자바스크립트에서 변수를 선언 할 때 var, let 그리고 const 키워드를 사용하여 선언 할 수 있다. 각 변수에 대한 차이점을 알아보자.
var는 자바스크립트의 첫 번째 버전부터 사용됐다. 자바스크립트 var 키워드는 변수를 선언하는 데 사용되며, 해당 변수의 값을 초기화하는데도 사용된다.
var num = 10;
자바스크립트에서 두 종류의 범위가 있다.
var는 가시성이 함수로 제한되기 때문에 함수 범위이다. 만약 함수 외부에서 사용하려고 한다면 오류가 발생 할 것이다.
function test() {
var a = 10
console.log(a) // 10
if(true) {
var a = 20
console.log(a) // 20
}
console.log(a) // 20
}
test()
위 코드에서 알 수 있듯, var 변수를 쟈선언하고 업데이트 할 수 있다. 즉, 동일한 범위 내에서 작업을 수행 할 수 있으며 오류가 발생하지 않는다.
호이스팅(호이스팅 이란?)은 코드 실행 전에 변수와 함수 선언이 해당 범위의 맨 위로 이동되는 자바스크립트 엔진의 메커니즘이다.
var로 선언 된 변수는 블록 맨 위에 호이스팅되기 때문에, 호출되기 전에도 해당 범위에서 접근 할 수 있음을 의미한다.
예제를 살펴보자.
console.log(a);
var a = 10;
위 예제에서는 console.log (a) 뒤에 var를 선언한다.
하지만 인터프리터가 읽고 해석할 때에는 개념적으로 아래와 같이 된다.
var a;
console.log(a); //a is undefined
a = 10;
따라서 var 변수는 해당 범위의 맨 위에 올려지고 undefined로 초기화된다.
ES6에서 const와 함께 추가되었다. let은 var와 매우 유사하지만 몇 가지 차이점이 있다.
let은 블록 범위이며, let이 있는 블록에서 선언 된 변수는 해당 블록 내에서만 사용할 수 있다. 예를 살펴보자.
if(true) {
let name = 'dean'
console.log(name) // dean
}
console.log(name) // name is not defined.
범위 밖의 변수 name 호출 시 에러가 발생하는 것을 확인할 수 있다.
(Uncaught ReferenceError: myName is not defined.)
let은 var와 마찬가지로 업데이트 될 수 있지만, 범위 내에서 재선언을 할 수 없다.
// 정상 동작
function test() {
let num = 10
num = 555
console.log(num)
}
test()
// 비정상 동작
function test() {
let num = 10
let num = 555
console.log(num)
// (Uncaught SyntaxError: Identifier ‘num’ has already been declared)
}
test()
// 정상 동작
let num = 10
function test() {
let num = 555
console.log(num) // 555
}
console.log(num) // 10
test()
var와 마찬가지로 let 선언은 호이스팅되어 맨 위로 올라간다. undefined로 초기화되는 var와 달리 let 키워드는 초기화되지 않는다. 초기화 전 액세스 시, ReferenceError가 발생한다.
const는 let 및 var와 달리 한번 정의 된 변수는 변경할 수 없다.
let과 마찬가지로 const도 블록 범위이며, 선언 된 변수는 해당 블록 내에서만 사용할 수 있다. 또한 업데이트하거나 재선언 할 수 없다. 만약 기존 const 변수를 재할당하려고하면 에러가 발생한다.
(Error Message : Uncaught TypeError: Assignment to constant variable.)
// 비정상 동작
function test() {
const num = 10
const num = 555
console.log(num)
// (Uncaught SyntaxError: Identifier ‘num’ has already been declared)
}
test()
let과 같이 const 선언은 상단으로 호이스팅 되지만, 초기화 되지 않는다.
var | let | const | |
---|---|---|---|
재할당 | O | O | X |
호이스팅 | O | X | X |
자바스크립트 범위에는 전역 범위(global-scope)도 있습니다❤️