JavaScript를 사용할 때 변수 선언시 주로 var, let를 많이 썼었는데
JavaScript 변수로는 var, let, const 이렇게 3가지가 있다는 것을 알게 되었다.
각각의 차이점은 무엇일까?
차이점에 대해 알아보기에 앞서,
호이스팅(Hoisting)이란 것에 대해 알아둘 필요가 있다.
호이스팅(Hoisting)
변수는 선언 > 초기화 > 할당 3단계에 걸쳐 생성되는데,
호이스트(Hoist)란 변수의 정의가 범위에 따라 선언/초기화/할당이 분리되는 것을 의미한다.
변수를 생성할 때 먼저, Scope에 변수가 등록된 후 선언을 통해 변수를 위한 공간이 확보된다.
그리고 변수를 undefined로 초기화 한다.
그런 다음 할당문에 도달하여 값이 할당 되었을 때 값이 정상적으로 출력되게 된다.
javascript에 쓰이는 변수마다 scope의 영역이 다르기 때문에 사용 시 주의해야한다.
1.var : 중복 선언o
|
1
2
3
4
5
|
var abc = '가나다';
console.log(abc);
var abc = '가나다2';
console.log(abc);
|
cs |
var은 function level scope로 함수블록 function(){}만 scope로 인정하기 때문에
함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.
함수 외부에서 선언한 변수는 모두 전역 변수가 된다.
변수 선언 시 선언/초기화가 동시에 이루어지며, 중복 선언이 가능하다.
결과 ▼
console.log로 찍어봤을 때 결과값이 잘 나오는 것을 확인할 수 있다.
2.let : 중복 선언x, 재할당o
|
1
2
3
4
5
|
let abc = '가나다';
console.log(abc);
let abc = '가나다2';
console.log(abc);
|
cs |
let은 block-level-scope로 변수를 사용하는 해당 코드 블록 내에서만 유효하며 외부에서는 참조할 수 없다.
코드 블록 내부에서 선언한 변수는 지역 변수가 된다.
또한 let은 중복 선언은 안되지만 재할당은 가능하다는 특징이 있다.
let을 이용해 두 번 선언했더니 아래와 같이 에러 문구가 떴다.
결과 ▼
오류가 난 지점을 정확히 확인해보니 두번째로 선언한 부분이
아래와 같이 문제가 된 것을 확인할 수 있었다.
그럼 처음에 let으로 선언/초기화를 해주고
변수 이름만 갖고와서 재할당하는 것도 안되는 것일까?
확인해보니 재할당은 잘 된다.
3.const : 중복 선언x, 재할당x
const 역시 let과 마찬가지로 block-level-scope로 변수를 사용하는 해당 코드 블록 내에서만 유효하다.
코드 블록 내부에서 선언한 변수는 지역 변수가 된다.
const는 let과 달리 중복 선언, 재할당 모두 불가능하다.
실제로 코드로 확인해봤을 때 const는 아예 중복 선언부터 되지 않았다.
|
1
2
3
4
5
|
const abc = '가나다';
console.log(abc);
const abc = '가나다4';
console.log(abc);
|
cs |
결과 ▼
역시 abc가 정의되지 않았다는 오류가 뜬다.
오류 지점은 중복 선언한 곳이였다.
그렇다면 아래와 같이 재할당한다면 어떻게 나올까?
|
1
2
3
4
5
|
const abc = '가나다';
console.log(abc);
abc = '가나다4';
console.log(abc);
|
cs |
결과 ▼
위와 같이 에러 문구가 떠서 자세하게 확인해보니
역시 재할당 지점에서 오류가 난 것을 확인할 수 있었다.
