JS) var, let, const, 호이스팅

1. var

var phone = 'galaxy';
console.log(phone)	// galaxy

var phone = 'apple';
console.log(phone)	// apple

- var는 재선언을 해도 에러가 나지 않는다.
- 물론 재할당도 가능하다.

2. let

let phone = 'galaxy';
console.log(phone)	// galaxy

let phone = 'apple';
// Uncaught SyntaxError: Identifier 'name' has already been declared

phone = 'apple';
console.log(phone)	// apple

- let은 재선언은 불가하나 재할당은 가능하다.

3. const

const phone = 'galaxy';

const phone = 'apple';
 // Uncaught SyntaxError: Identifier 'phone' has already been declared
 
 phone = 'apple';
 // Uncaught TypeError: Assignment to constant variable.
 // = '상수에 값을 할당했습니다.' 라는 뜻
 
 - const는 재선언, 재할당 모두 불가능하다.

4. 호이스팅 (hoisting)

호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

console.log('my phone is ' + myPhone);	// my phone is undefined

var myPhone = 'apple';

console.log('my phone is ' + myPhone);	// my phone is apple

흔히 사용하는 '변수'라는 단어의 정확한 정의는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 변수와 종종 햇갈리곤 하는 식별자(identifier)는 '변수'가 아닌 '변수명'을 뜻한다.

// 변수명(식별자): myPhone
// 해당 값의 위치(메모리 주소): 0012CCGWH80
// 변수 값(저장된 값): 'apple'

 

JS에서 변수가 생성될 때는 선언, 초기화, 할당 단계를 거친다. 선언 단계는 스코프의 선두에서 실행되는데, 이때 스코프는 전역 스코프도 포함으로, 즉 자바스크립트 엔진이 실행되면서 선언 단계가 실행된다. 선언 단계에선 스코프의 선두에 모든 변수를 선언한다. 초기화 단계는 선언 단계에서 선언된 변수에 메모리가 할당되는데, 암묵적으로 값으로 undefined를 할당한다. 초기화 단계가 실행되는 위치는 var, let, const에 따라 다르다. 할당 단계는 말 그대로 해당 변수에 값을 할당하는 단계를 말한다.

 

var는 선언 단계와 함께 초기화 단계가 실행된다. 스포크 상에 존재하는 모든 var 변수는 엔진이 실행되면 스코프 최상단에 값으로 undefined가 할당된 채로 선언된다.

var myPhone = undefined

console.log('my phone is ' + myPhone);	// my phone is undefined

myPhone = 'apple';

console.log('my phone is ' + myPhone);	// my phone is apple

// 앞서 봤던 코드는 위 코드와 같다. 그렇기에 3번 라인에서 에러가 아닌 undefined가 출력된 것이다.

 

let은 선언 단계와 초기화 단계가 나누어서 실행이 된다. 그렇기에 let 변수를 선언하기 전에 console.log(변수)와 같은 방식으로 변수를 사용하면 에러가 발생한다.

// 엔진 시작 : 선언 단계 실행
console.log(myPhone);	// ReferenceError: myPhone is not defined

// 변수 선언 : 초기화 단계 실행
let myPhone;
console.log(myPhone);	// undefined

// 할당 단계 실행
myPhone = 'apple';
console.log(myPhone);	// apple

 

const는 선언과 동시에 값을 초기화(할당)해야 한다. 즉 초기화가 이루어지기 전엔 해당 변수를 사용할 수 없다. 그렇기에 let과 에러 내용 또한 다르다.

console.log(myPhone);
const myPhone = 'apple';	// Uncaught SyntaxError: Missing initializer in const declaration

 

정리하자면 var는 호이스팅이 일어나고 let과 const는 호이스팅이 일어나지 않는다. 호이스팅은 함수 선언문에서도 발생하는데, function 함수명() { ~ } 형태가 아닌 const 함수명 = () => { ~ } 형태로 함수를 선언하는 경우데도 호이스팅이 발생하지 않는다.