[ JavaScript ] 자바스크립트 기본 ①

자바스크립트 : 웹사이트를 실질적으로 움직이게 만드는 언어 → 웹사이트에서 일어나는 일을 수행

ex) 버튼을 클릭했을 때 경고창을 띄우기, 서버로부터 데이터를 받아오거나 전송하기

 

자바스크립트는 자바스크립트 엔진이 실행시켜줌 ( 엔진이 없으면 실행이 안됨 )

* 자바스크립트 엔진 : 사파리, 파이어폭스, 크롬, 엣지, 오페라 등 같은 웹 브라우저에 포함되어있음

* V8 : 크롬의 자바스크립트 엔진

웹 브라우저는 자바스크립트가 실행될 수 있는 환경으로 Runtime이라 부를 수 있음

---

[ 변수와 상수 ]

 

1. 변수

let age = 25;

 

* var  :  같은 이름의 변수를 재선언이 가능해지기 때문에 문제가 생길 가능성이 매우 높음

            반면에 let은 변수를 중복해서 선언하는 것을 허용하지 않기 때문에 var 대신 let을 사용하는 것이 좋음

 

2. 상수

const age = 25;

 

상수는 한번 선언된 변수의 값을 변경하려고 하면 오류가 난다. 상수는 write가 불가능하고 오직 read만 가능함.

즉, 상수는 선언과 동시에 초기화가 이루어지지 않으면 에러가 발생해 선언 후에는 절대로 값을 변경할 수 없음.

---

[ 자료형과 형변환 ] 

 

1. 자료형 : 값을 성질에 따라 분류한 것

 

자바스크립트는 5개의 Primitive Data Type과 3개의 Non-primitive Data Type이 존재한다.

 

1) Primitive Data Type ( 원시 타입 ) : 한번에 하나의 값만 가질 수 있음 → 하나의 고정된 저장공간을 이용

 

- 숫자형

 

① 정수형

let age = 25;

 

② 실수형

let height = 162.7;

 

③ Infinity 

let inf = Infinity; // 양의 무한대

let minusInf = -Infinity; // 음의 무한대

 

④ Nan : 수학적인 연산의 실패값

let nan = Nan;

 

- 문자형

 

① 큰따옴표(") 사용

let name = "2CHAECHAE";

 

② 백틱(`) 사용 → 백틱을 사용하면 변수 값을 사용해서 하나의 문자열로 만들 수 있음

let name = `2CHAECHAE`;

let hello = `hello! ${name}`;

* 템플릿 리터럴 : 백틱안의 ${}안에 변수를 담아서 문자열을 만드는 문법

 

- 불린형

 

let eaten = true;

let offswitch = false;

 

- Null

 

변수가 의도적으로 아무 값도 안가지고 있다고 가리킬때 사용한다.

 

let a = null;

 

- undefined

 

변수를 선언하고 아무 값도 할당하지 않을 경우 출력된다. 변수에 아무 값도 할당을 해주지 않는다면 자동적으로 undefined라는 값을 할당받는다. 

 

let variable;

console.log(variable); //undefined

 

 

2)  Non-primitive Data Type ( 비원시 타입 ) : 한번에 여러 개의 값을 가질 수 있음

                                                                     → 여러 개의 고정되지 않은 동적 공간 사용

let array = [ 1,2,3,4 ];

 

2. 형변환 ( Casting ) : 자료형을 변환시키는 기능

 

let a = 12;

let b = "2";

console.log( a * b ); //24

 

24는 자바스크립트가 문자열 2를 자동으로 숫자형으로 인지해서 계산된 결과이다. 자바스크립트 엔진은 서로 다른 자료형들간의 연산을 수행할 때 적절하게 자동으로 자료형을 변환한다. 

* 묵시적 형변환 : 자바스크립트 엔진이 묵시적으로 형태를 변환하는 것

 

let a = 12;

let b = "8";

console.log( a + b ); //128

 

문자열과 숫자의 곱셈은 문자열을 숫자로 형변환해서 수행하지만 문자열과 숫자의 덧셈은 숫자를 문자열로 형변환해서 문자열로 합친다. 

 

let a = 12;

let b = "8";

console.log( a + parseInt(b) ); //20

 

parseInt() : 문자열 값을 받아서 숫자로 반환하는 형변환 함수

* 명시적 형변환 : 프로그래머가 의도적으로 형태를 변환하는 것

 

---

[ 연산자 ]

 

1. 대입 연산자 : =

2. 산술 연산자 : +, - , * , /, %

3. 연결 연산자 : + → 두 개 이상의 문자열을 연결 ( 묵시적 형변환 포함 )

4. 복합 연산자 : +=, -=, *=, /=

5. 증감 연산자 : ++, -- → 숫자형에만 사용 가능

증감 연산자는 변수 이름 오른쪽에 사용하게 되면( 후위연산자 ) 해당 코드 라인이 실행이 되고 나서 값이 변한다. 반대로 왼쪽에 사용하게 되면( 전위연산자 ) 증감 연산자를 만난 시점부터 바로 적용이 된다. 

6. 논리 연산자 : !( not ), &&( and ), ||( or )

7. 비교 연산자 : <, >, <=, >=, ==, ===, !=, !==

let a = 1 == "1";

console.log(a); //true

let b = 1 != "1";

console.log(b); // false

==와 !=는 값만 비교하기 때문에 자료형이 다르더라도 값이 같으면 true이다.

 

let a = 1 === "1";

console.log(a); // false

let b = 1 !== "1";

console.log(b); // true

값 뿐만 아니라 자료형도 비교하기 위해서는 ===, !== 를 사용해야한다.

 

* 피연산자 : 연산을 당하는 것

 

8. typeof

 

자바스크립트는 타입이 자유로운 동적 타입 언어이기 때문에 유연하다는 장점이 있다. 

let a = 1;

a = "1";

console.log(typeof a); // string

 

9. null 병합 연산자 ??

 

??는 양쪽의 피연산자 중에 null이나 undefined가 아닌 값을 선택한다. 

* 변수를 선언해놓고 아무런 값을 할당해주지 않는다면 자동으로 undefined 값이 할당된다.

 

let a;

a = a ?? 10;

console.log(a); // 10