const, let, var JAVASCRIPT

es5에서 es6를 배우는 과정에서 처음 차이점을 배우는 것은 class 문법과 const, let, var 이다. 장황하게 설명하면서 단박에 이해하기가 어렵게 책 등지에 써져 있는것이 const, let, var 이다. 이 세개의 차이점을 아래 예제로 한번에 설명하도록 하겠다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
   var var_ = "apple";
let let_ = "banana";
let testObj = {};
const const_1 = testObj;
const const_2 = "aaaa";

function scopeTest(){
     /*alert(var_);
     alert(let_);*/
if(true){
var var_2 = "apple2";
let let_2 = "banana2";
}
function inner(){
/*alert(var_2);
alert(let_2);*/
}
inner();
}
scopeTest();

const_1.testVal = "오잉?";
const_2 = "오잉?";
/*alert(const_1.testVal);
alert(const_2);*/


위의 예제를 보면 alert에 주석을 쳐 놓았는데 실행시에는 풀어보자 ^^. 먼저 var, let, const를 한줄로 설명하고 저 코드가 왜 저리 동작하는지 좀 더 자세히 알아보도록 한다.

1. var :: 기존에 자바스크립트에서 쓰던 식별자 방식. 식별자를 찾는 범위가 자신이 기술되어 있는 함수(혹은 객체)이다.
2. let :: es6에서 쓰이는 새로운 방식. 식별자를 찾는 범위가 자신이 쓰여져 있는 {} 괄호 내 이다. (블록 스코프)
3. const :: es6에서 쓰이는 새로운 방식. 자신이 할당한 값을 재할당 하지 못하게 한다.

코드를 실행해 보면 8번,9번 라인은 잘 보일 것이다. 그런데 16번 라인은 잘 안될 것이다. 왜냐면 let_2는 if문의 괄호 안에서만 자신의 탐색 범위를 갖기 때문이다. (블록 스코프) 반대로 15번 라인은 자신의 함수를 탐색 범위로 갖기 때문에 잘 될 것이다.

24번 라인의 경우 분명 const는 값 변경이 안된다고 했는데 왜 되는지 이해가 안갈 것이다. const는 자신이 원시 값을 가질 경우에만 재할당을 방지한다. 쉽게 외우면 그렇고, 깊이 생각하면 애초에 const는 메모리에 담긴 주소를 단 한번만 할당받는거지 그 객체 자체를 받는게 아니다. (C에서의 포인터를 상상하면 된다.)


덧글

댓글 입력 영역