var, let, const의 차이점에 대하여..

binary·2020년 6월 7일

Javascript

목록 보기

2/3

ES5까지 변수를 선언할 수 있는 유일한 방법은 var를 사용하는 것이었습니다. var를 사용하여 변수를 선언하는 방법은 자유도가 높아 사용하기에는 편하지만 오히려 이러한 특징때문에 때때로 여러 문제를 일으키기도 합니다.

이러한 문제점들로 인해 ES6부터 let, const 추가되어 오늘날에는 주로 let, const만 사용 되어지고 있습니다. 오늘날 주로 사용되어지는 방식의 작동 원리를 알려면 이게 나오게 된 배경을 정확하게 알아야 하겠죠?

본 포스팅에서는 var, let, const가 가진 특성을 비교하면서 자바스크립트에서 변수를 선언하는 방식을 살펴보도록 하겠습니다.

함수 레벨 스코프(Function-level scope) vs 블록 레벨 스코프(Block-level scope)

var는 함수 레벨 스코프를 가집니다. 때문에 블록 내부에 선언되어도 외부에서 접근 할 수 있습니다.

{
	var age = 20;
}

console.log(age) // 20

let과 const는 블록 레벨 스코프를 가집니다. 즉 {} 내부에 변수를 선언하면 해당 블록 내부에서만 생명 주기를 유지합니다.

{
	let age = 20;
}

console.log(age) // age is not defined

호이스팅

자바스트립트는 실행시점에 변수와 함수에 대해 호이스팅을 수행합니다. 호이스팅은 실행 시점에 변수와, 함수를 소스의 맨 위로 이동시키는 것을 의미합니다.

이러한 특성 때문에 var는 변수를 선언하기도 전에 변수를 참조할 수 있습니다.

age = 4;
var age;

console.log(age) //4

하지만 let, const는 변수를 선언하기 이전에 참조할 수 없습니다.

name = 'kyle';
let name;

console.log(name) // Uncaught ReferenceError: Cannot access 'name' before initialization

let,const가 변수를 선언하기 전에 참조 할 수 없다고 해서 호이스팅이 이루어지지 않는 것일까요? 그렇지 않습니다.

이를 이해하기 위해서는 자바스크립트에서 변수를 할당할 때 var와 let, const가 어떤 차이가 있는지 이해해야 합니다.

자바스크립트의 변수 생성 3단계

선언 단계

변수를 실행 컨텍스트의 변수 객체에 등록합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다

초기화 단계

변수 객체에 등록된 변수를 위한 공간을 메모리에 확보합니다 이 단계에서 변수는 undefined로 초기화됩니다.

할당 단계

undefined로 초기화된 변수에 실제 값을 할당합니다

var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어집니다.

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.
console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); //

반면에 let으로 선언된 변수는 **선언 단계와 초기화 단계가 분리되어 진행**됩니다.

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1