JS 변수 선언자 - var, let, const

 

 

var

ES5까지 변수를 선언할 수 있는 유일한 방법은 var키워드를 사용하는 것이었다.

var 사용 시 몇가지 주의할 점이 존재한다.

 

- 변수 중복 선언 허용

var 키워드로 선언한 변수는 중복 선언이 가능하다.

var x = 1;
var y = 1;

var x = 100;
var y;

console.log(x) // 100
console.log(y) // 1

 

- 함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수 레벨 스코프를 따른다.
함수 외부에서 선안한 변수는 코드 블록 내에 선언하여도 모두 전역 변수가 된다.
따라서 의도치 않게 변수의 중복 선언이 발생할 수 있다.

var x = 1;

if (true) {
	var x = 10; // 함수 코드 블럭이 아니므로 변수의 중복 선언이 발생함
}

console.log(x); // 10

 

for 문 코드 블럭 내부에서도 동일하다.

var i = 10;

for (var i = 0; i < 5; i++) {
	console.log(i) // 0, 1, 2, 3, 4
}

console.log(i) // 5

 

- 변수 호이스팅

var 키워드는 변수 선언문이 스코프 최상단에 끌어올려진 것처럼 동작하는 것을 말한다.
때문에 변수 선언문 이전에 변수 참조가 가능하다.
단, 변수 할당 이전에 참조하면 언제나 undefined를 반환한다.

// 해당 시점에 변수 호이스팅에 의해 이미 foo 변수가 선언되었다. (선언 단계)
// 변수 foo는 undefined로 초기화된다 (초기화 단계)
console.log(foo); // undefined

// 변수에 값을 할당(할당 단계)
foo = 123;

console.log(foo);

var foo;

---

let 

var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 키워드인 let, const를 도입했다.

 

- 변수 중복 선언 금지

let 키워드로 같은 이름의 변수를 중복 선언하면 문법 에러가 발생한다.

let bar = 123;
let bar = 456; // SyntaxError

- 블록 레벨 스코프

let 변수는 모든 코드 블록을 지역 스코프인정하는 따르는 블록 레벨 스코프를 따른다.

let foo = 1; // 전역 변수

{
	let foo = 2; // 지역 변수
 	let bar = 3; // 지역 변수
}

console.log(foo); // 1
console.log(bar); // ReferenceError

- 변수 호이스팅

var 키워드는 변수 선언과 초기화가 한 번에 진행되어 선언문 이전에 변수를 참조해도 에러가 발생하지 않는다.
반면, let 키워드는 선언과 초기화가 분리되어 진행되어 선언문이 실행되어야 비로소 초기화 단계가 시작된다. 
스코프 최상단에서 부터 초기화 이전 지점을 일시적 사각지대(TDZ)라고 한다.
TDZ에 의해 초기화 이전에 변수를 참조할 경우 참조 에러가 발생한다.
실제로 let 키워드도 호이스팅이 발생하지만 TDZ로 인해 발생하지 않는 것처럼 보인다.

let foo = 1; 

{
	console.log(foo) // ReferenceError 호이스팅 발생!
	let foo = 2; 
}

 

---

const

const 키워든 상수를 선언하기 위해 사용한다.

const 키워드의 특징은 let 키워드와 대부분 동일하다.

 

- 선언과 초기화

const 키워드로 선언한 변수는 반드시 선언과 초기화가 동시에 이루어져야 한다.
동시에 초기화가 이루어지지 않을 경우 문법 에러가 발생한다.

- 블록 레벨 스코프

모든 코드 블록에 대한 블록 레벨 스코를 따른다.

- 재할당 금지

const 키워드로 선언한 변수는 재할당이 금지된다.

- const 키워드와 객체

const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.
원시값의 경우 재할당이 불가능하지만 변경 가능한 값인 객체는 재할당 없이도 프로퍼티의 변경이 가능하다.
const는 재할당을 금지하지만, 값의 '불변'을 의미하지 않는다.

const person = {
	name: 'Lee'
};

person.name = 'Kim';

console.log(person); {name: "Kim"}

---

참조

https://twitter.com/Div_pradeep/status/1625404389224587264

X의 Pradeep Pandey님(@Div_pradeep)

https://m.yes24.com/Goods/Detail/92742567

모던 자바스크립트 Deep Dive - 예스24