scope와 hoisting 그리고 var, let, const의 차이점

💡 let과 const의 등장

JavaScript에서 변수를 정의하는 방법은 다음과 같다.

• ES5: var
• ES6: var, let, const (let과 const의 등장)

 

🔨 변수 생성 단계

• 선언 단계
  
  • 변수를 생성하는 것
  • 변수명을 등록하여 스코프가 참조할 대상을 만든다.

let age; //선언

 

• 초기화 단계
  • 메모리에 변수 저장을 위해 공간을 확보하는 단계, 기본 값으로 undefined가 할당된다.

let age; //선언 -> 초기화
console.log(age); //undefined

 

• 할당 단계
  • 할당 연산자(=)를 사용해 값을 할당한다.
  • undefined로 초기화 된 변수에 실제 값을 할당해주는 단계

let age; //선언 -> 초기화
console.log(age); //undefined

age = 20; //값 할당
console.log(age); //20

 

📍 var, const, let 차이점

var

1. 선언 + 초기화
   - 선언과 초기화가 한번에 이루어짐
   - 변수 선언 이전에 접근해도 에러가 발생하지 않음
2. 할당

//선언+초기화 (호이스팅)
console.log(a); //undefined
var a; 
a = 10; //할당

 

let

1. 선언
2. 초기화
   - 실제 코드에 도달했을 때 초기화가 됨
   - 변수 선언 이전에 접근하면 ReferenceError가 발생함
3. 할당

console.log(a); //ReferenceError: a is not defined

let a; //선언+초기화
a = 10; //할당

 

const

1. 선언+초기화+할당
   - 선언과 동시에 초기화를 해야 함
   - 그렇지 않으면 컴파일 에러 발생함

console.log(a); //ReferenceError: a is not defined
const a; //SyntaxError: Missing initializer in const declaration

const a = 10; //선언+초기화+할당

 

🔒 Scope

Scope는 변수가 유효한 범위이다.
자바스크립트의 경우 코드블록 (if, for, while, try/catch문 등)내에서 선언된 변수는 코드 블록 내에서만 유효하다.

function test() {
	let bear = true;
    
    //b와 c가 메모리에 올려지기 전
    if(bear) {
    	const dog = 'dog';
        let cat = 'cat';
    }
    //b와 c가 메모리에 해제된 후
}

 

위 코드에서 bear는 test라는 함수가 scope이고, dog와 cat은 if문이 scope이다.

메모리 관점에서 봤을 때, if문의 이전은 dog와 cat가 메모리에 올려지기 전이기 때문에 사용할 수 없고, if문의 이후는 dog와 cat가 메모리에서 해제된 이후이기 때문에 사용할 수 없다.

 

만약 스코프 안에 동일한 이름의 변수가 선언되면?

let rabbit = 'rabbit';

function test() {
	let bear = true;
    
    if(bear) {
    	const dog = 'dog';
        let cat = 'cat';
        
        let rabbit = 'cow';
        
        console.log(rabbit); // 'cow'
    }
}

 

다음과 같이 안쪽에 선언된 변수로 접근하게 된다.
여기서 최초로 선언된 rabbit은 전역으로 선언된 변수이기 때문에 test함수 및 if문 안에서 언제든지 사용될 수 있다.

하지만 다음과 같이 전역변수를 사용하게 될 경우, 이름의 충돌이나 오류의 위험이 있기 때문에 불가피한 상황이 아니면 사용하지 않는 것이 좋다.

 

⏫ 호이스팅

호이스팅은 말 그대로 끌어올리는 것이다.

 

그럼 어떻게 끌어올리냐?

 

자바스크립트의 엔진 (인터프리터)가 전체 코드를 스캔하고, 변수와 함수의 메모리 공간을 선언 전에 미리 할당한다. 이 것을 바로 호이스팅이라고 한다.

 

함수 호이스팅

함수를 선언하는 방법에는 크게 두가지가 있는데,

1. function을 사용하는 방법 (함수 선언식)
2. const를 사용하는 방법 (함수 표현식)

function 함수는 호이스팅되어 선언 이전에도 사용할 수 있다.

test(); //Hello World
function test() {
	console.log('Hello World');
}
test(); //Hello World

 

하지만 const로 선언된 함수는 호이스팅 되지 않아서 선언 이전에 사용할 수 없다.

test(); //TypeError: expression is not a function
const test = () => {
	console.log('Hello World');
}
test(); //Hello World

 

변수 호이스팅

1. var
   : var는 호이스팅 시에 undefined로 초기화되어 선언 이전에도 사용이 가능하다.
2. let, const
   : let, const는 호이스팅 시 변수를 초기화하지 않는다. 따라서 Reference Error가 발생한다.
   
   

하지만 let, const는 호이스팅이 되고 있다?

 

let과 const는 Reference Error가 발생한다고 해서 호이스팅이 되지 않는 것은 아니다!
let과 const도 호이스팅이 되지만 TDZ라는 영역에 속해있다.

 

⛔ TDZ

TDZ란 Temporal Dead Zone이다.
바람직한 코딩을 위한 최소한의 안전장치로 let과 const로 선언한 변수에는 접근을 하지 못하게 막는 것이다.
즉, let과 const로 선언한 변수가 죽어있는 구역이라고 생각할 수 있다.

 

참조
변수 선언, 초기화, 할당 & 호이스팅 (Hoisting)
[얄팍한 코딩사전] [코딩만화] Scope가 뭔가요? (feat: let, const, var의 차이)