자바스크립트에서 사용되는 변수 선언 방식에는 세가지가 있다.
var
, let
, const
이다.
var
는 비교적 오래전부터 사용되어 왔지만 (ES6 이전), 현재는 잘 사용되지 않는 변수 선언식이고,
주로 let
과 const
가 사용된다.
변수 선언에는 활용에 따른 몇가지 차이들이 존재하는데,
var a = 5;
console.log(a); // 5
var a = 10;
console.log(a); // 10
a = 15;
console.log(a); // 15
var
에서는 중복 선언과 재할당이 모두 가능하다.
마지막에 할당된 값이 최종으로 변수의 값으로 저장된다.
let a = 5;
let a = 10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared
let
에서는 중복 선언을 허용하지 않는다.
중복 선언을 할 경우 SyntaxError
가 발생하게 된다.
let a = 5;
console.log(a); // 5
a = 10;
console.log(a); // 10
재할당은 var
와 동일하게 가능하다.
const a = 5;
const a = 10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared
const
에서도 let
과 동일하게 중복 선언을 허용하지 않는다.
const a = 5;
console.log(a); // 5
a = 10;
console.log(a); // TypeError: Assignment to constant variable.
하지만 const
는 다른 변수들과 다르게 재할당도 불가능하다.
이유는 const
는 상수를 선언하는 키워드이기 때문이다.
처음 선언과 초기화를 하고 나면 다른 값을 재할당 할 수 없어진다.
var
는 함수 단위 스코프(function-level scope)이다.
function hello(){
var a = 10;
console.log(a);
}
hello(); // 10
console.log(a); //ReferenceError: a is not defined
var
변수가 선언된 함수 내부의 어디서든 참조가 가능하지만, 외부로는 참조가 불가능하다.
또한 함수 내부에서 선언된 var
는 지역변수로 간주하지만, 함수 외부에서 var
가 선언 되었다면 전역변수로 간주한다.
let
과 const
는 블록 단위 스코프(block-level scope)이다.
function hello() {
let a = 5;
console.log(a); // 5
}
console.log(a); // ReferenceError: a is not defined
{ }
블록 내부에서 선언된 let
, const
변수는 외부에서 참조되지 않는다.
var
는 호이스팅이 발생한다.
console.log(a); // undefined :: 변수 선언 이전에 변수 참조 가능
var a // 초기화
console.log(a); // undefined
a = 10 // 할당
console.log(a); // 10
뒤에 선언된 변수 a 가 앞에 참조되었음에도 에러가 아닌 uedefined
가 호출된다.
let
, const
는 호이스팅이 발생하지만, 다르게 작동한다.
console.log(a); // ReferenceError :: 변수 선언 이전에 변수 참조 불가능
let a // 초기화
console.log(a); // undefined
a = 10 // 할당
consloe.log(a); // 10
var
와는 다르게 뒤에 선언된 변수를 앞에서 참조하려 하니 에러가 발생한다.
호이스팅이 발생하지 않는 것처럼 보일 수 있는데, 이런 현상은 let
, const
의 호이스팅 과정이 var
와는 다르게 진행되기 때문이다.
let
, const
로 변수를 선언하는 경우에는, 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)
가 존재하기 때문에 벌어지는 현상이다.
호이스팅은 발생하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보인다.
글 잘 봤습니다.