자바스크립트의 변수 선언 방식인 var, let, const의 차이에 대해 정리하고자 한다.
var
ES5까지 var를 통하여 변수를 선언하였으며, var는 hoisting되기 때문에 선언 위치에 영향을 받지 않는다.
var 선언은 전역 범위 또는 함수 범위로 지정이 되기 때문에, 함수 블록 외부에서 var를 사용하여 선언된 변수는 전역 범위에서 사용이 가능하다. var가 함수 내에서 선언될 때는 함수 범위로 지정되어 함수 내에서만 사용하고 접근할 수 있는 지역변수가 된다.
또한 var는 재선언이 가능하기 때문에 이를 인지하고, 의도적으로 변수를 재선언하여 정의한다면 괜찮지만 이를 의도하지 않았을 시 문제가 될 수 있다.
var name = 'Max';
if(name === 'Max') {
var hobbies = ['Sport', 'Cooking'];
}
function greet() {
var age = 30;
}
console.log(age); //error
console.log(name); //Max
//hobbies는 지역변수 처럼 보일수 있지만, if문은 함수가 아니기 때문에 var는 전역범위로 인식한다.
console.log(hoobies); // ["Sport", "Cooking"];
//var의 재선언
var name = 'Manuel';
console.log(name); //Manuel
let, const
ES6으로 넘어오면서 변수 선언을 let, 프로그램 실행중 값이 변하지 않는 상수 선언을 const로 하도록 추가되었으며, var와 다르게 블록 범위가 적용된다. 블록은 {}로 바인딩된 코드로 중괄호 안에 있는 것은 모두 블록범위에 해당된다.
즉, let, const로 선언된 변수는 해당 블록내에서만 사용이 가능하다.
let, const는 재선언이 불가능하기 때문에 var에서 재선언으로 오는 문제를 해결할 수 있다.
let name = 'Max';
if(name == 'Max') {
let name = 'Manuel'
//블록 범위로 적용되기 때문에 블록 밖에서 선언된 name이 아닌 if문 안에서 생성한 name을 출력한다.
console.log(name); //Manuel
}
console.log(name); //Max
const greet = 'hello';
greet = 'say hi'; //error. 상수는 프로그램이 실행되는 동안 값이 바뀔 수 없다.
hositing
var와 마찬가지로 let, const 선언도 호이스팅되어 맨 위로 끌어올려지지만, var는 선언과 동시에 초기값이 undefined로 정의되는 반면, let과 const는 선언만 될 뿐 초기화를 하지 않기 때문에 초기화를 하지 않고 hositing된 let과 const를 사용하면 정의되지 않았다는 에러가 발생한다.
호이스팅을 통해 var, let, const를 선언하지 않아도 변수 선언이 가능하지만, 이는 변수를 선언한건지 기존의 변수를 사용하는건지 알 수 없으므로 지양해야하며, 이러한 자바스크립트 특유의 관대함을 허용하지 않는 엄격모드를 사용할 것을 권장하고 있다.
엄격모드를 사용할 시에는 스크립트 파일 최상단에 아래와 같이 선언한다.
'use strict';참고
[Udemy] JavaScript - The Complete Guide 강의
