var : 중복 선언 가능
// 변수 선언 + 초기화
var menu = "페퍼민트";
console.log(menu); // 페퍼민트
// 변수 선언 + 초기화
var menu = "캐모마일";
console.log(menu); // 캐모마일
// 변수 선언 (초기화 X)
var menu;
console.log(menu); // 캐모마일
var는 중복해서 변수 선언을 여러번해도 에러없이 각각 다른 값이 출력될 수 있다.
초기화 없이 선언만 한 경우엔 변수 선언문 자체가 무시된다. (이 또한 에러발생X)
이는 기존에 선언했던 변수의 존재를 까먹고 값을 재할당하게되는 등의 실수를 저지르기 쉽다는 단점이 있다.
let / const : 중복 선언 불가능
let menu = "돈까스";
let menu = "냉면"; // SyntaxError: Identifier 'menu' has already been declared
const menu = "피자";
const menu = "치킨"; // SyntaxError: Identifier 'menu' has already been declared
let, const로 선언한 변수는 중복 선언이 불가능하다.
위의 코드를 보면 이미 선언한 변수를 다시 선언할 경우 에러가 발생하는 것을 알 수 있다.
let, const는 var에 비해서 코드 안전성을 높여준다.
2. 재할당
var / let : 값의 재할당이 가능하다.
var order = "주문";
order = "취소";
console.log(order); // 취소
let door = "열림";
door = "닫힘";
console.log(door); // 닫힘
var와 let은 변수 선언 및 초기화 이후에 반복해서 다른 값을 재할당 할 수 있다.
const : 값의 재할당이 불가능하다.
const name = "홍길동";
name = "이순신"; // TypeError: Assignment to constant variable.
const는 상수를 선언하는 키워드이다.
처음에 선언 및 초기화 하고 나면 다른 값을 재할당 할 수 없다.
3. 스코프 (Scope)
스코프란 유효한 참조 범위를 뜻하며, var로 선언한 변수와 let, const로 선언한 변수의 스코프는 다르다.
var : 함수 레벨 스코프 (function-level scope)
function test() {
var coco = "코코";
console.log(coco);
}
test(); // 코코
console.log(coco); // ReferenceError: coco is not defined
var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주한다.
test 함수 내부에서 선언된 coco 변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조시 에러가 발생한다.
함수를 제외한 영역에서 var로 선언한 변수는 전역변수로 취급된다.
if(true) {
var coco = "코코";
console.log(coco); // 코코
}
console.log(coco); // 코코
자바스크립트에서는 if, for, while, try/catch 문 등의 코드 블록 { ... } 내부에서 var로 선언된 변수를 전역 변수로 간주한다.
그래서 블럭 외부에서도 어디에서나 참조할 수 있다.
하지만, let과 const는 다르다.
let / const : 블록 레벨 스코프 (block-level scope)
if(true) {
let coco = "코코";
console.log(coco); // 코코
}
console.log(coco); // ReferenceError: coco is not defined
let, const는 함수 내부는 물론이며 if, for문 등의 코드 블록 { ... } 에서 선언된 변수도 지역변수로 취급한다.
function test() {
let coco = "코코";
console.log(coco);
}
console.log(coco); // ReferenceError: coco is not defined
정리하면,
var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프이고,
let, const는 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프이다.
4. 호이스팅
자바스크립트의 Parser는 코드를 실행하기 전에 해당 코드를 한번 훑어보는 일종의 코드 평가 과정을 거치는데,
이 때 변수 선언문을 미리 실행해두기 때문에 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 된다.
이를 변수 호이스팅이라 한다.
여기서 var와 let/const도 호이스팅 과정이 다르다.
var : 변수 호이스팅 발생
console.log(coco); // undefined
var coco = "코코";
console.log(coco); // 코코
변수 coco 가 선언되기 전에 참조되었음에도 에러가 발생하지 않는다.
728x90
728x90