[자바스크립트 중급] 변수 키워드, 호이스팅, TDZ, 스코프, 변수의 생성단계

1. 변수 (Variable) 키워드

1) 변수 선언 키워드별 차이점 (var, let, const)

- 여기서의 재할당은 변수의 값 자체가 바뀌는게 아니라 바라보는 '콜스택 주소'가 바뀌는 것을을 의미한다.

- const도 주소만 동일하다면 값을 바꿀 수 있다. (참조타입(배열, 객체, 함수)의 heap 영역의 값)
 

출처: fnw님 티스토리

① var
- 재선언, 재할당 가능, 값없이 선언만 해두기 가능 // 그래서 let이 더 안전하다.
- var는 변수 생성시, 선언(1단계)+ 초기화(2단계)를 동시에 실행하기 때문에, 실행문이 선언문보다 앞에 있어도 실행됨
- 호이스팅 시, 선언(1단계)와 초기화(2단계)까지 실행되어 메모리가 할당되고 초기값이 undefined로 세팅

console.log(name);

var name = 'Mike';

undefined

 
② let
- 재선언 불가능, 재할당 가능, 값없이 선언만 해두기 가능
- let은 변수 생성시, 선언(1단계)과 초기화(2단계)를 별도로 실행하기 때문에, 실행문이 선언문 앞에 있으면 실행 X
- 호이스팅 시, 선언(1단계)은 되었지만 초기화(2단계)는 실제 코드에 도달했을때 되기 때문에 이 변수에 값을 할당할 수 있는 메모리가 아직 없어 reference error가 남.
 
③ const
- 재선언, 재할당 불가능, 값없이 선언만 해두기 불가능
- const는 변수 생성시, 선언(1단계)+ 초기화(2단계)+ 할당(3단계)를 동시에 실행한다.
- 호이스팅 시, 할당(3단계)까지 동시에 하기 때문에 값이 없으면 선언도 안됨.

  // let 재할당 됨

let name = "미미"

name = "고고"

console.log(name); // 고고

// let 재선언 안됨

let name = "미미"

let name = "고고"

console.log(name); // SyntaxError: Identifier 'name' has already been declared

 

// const 재할당도 안됨

const name = "미미"

name = "고고"

console.log(name);  // TypeError: Assignment to constant variable.

// const 선언만 해두기 안됨

const c;

console.log(c); // SyntaxError: Missing initializer in const declaration

 
2) 변수의 생성 과정
① 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록 // 이 변수 객체는 스코프가 참조하는 대상이 됨
② 초기화 단계 : 실행 컨텍스트에 존재하는 변수 객체의 메모리를 만드는 단계 // 할당된 메모리에 Undefined로 초기화
③ 할당 단계 : 사용자가 undefined로 초기화된 메모리에 원하는 값을 할당하는 단계
 
 

2. 호이스팅 (hoisting)

1) 설명
- 일반적으로 실행코드가 선언코드보다 앞에 있을때도 에러없이 일부 실행되는 것을 호이스팅되었다 함.
- 변수 키워드에 따라 차이가 있지만 실제 변수 선언 코드를 실행하기 전, 해당 변수의 스코프 최상단에서 선언(1단계) 또는 초기화(2단계)까지 미리 실행해 두는 자바스크립트 매커니즘을 뜻함. (각 스코프의 최상단인 점을 기억)
 
2) 종류
① 변수 호이스팅
-var 는 호이스팅으로 변수 선언 코드 만나기 전에 1,2단계 진행되어 메모리할당과 초기값 세팅 완료.
- let 은 호이스팅으로 선언(1단계)은 진행되어 실행 컨텍스트에 변수 객체가 등록되지만,
변수 선언 코드를 만나야 초기화(2단계)가 진행된다!
그래서 변수 선언 코드 만나기 전에는 메모리도 할당되지 않음. 그리하여 코드 보다 위에서 실행문 입력하면 에러남.
- const 는 변수 선언 코드를 만났을 때 변수에 할당할 값까지 완전 다 준비되어 있으면 1단계부터 3단계까지 동시에 진행.
 
② 함수 호이스팅 : 
- 가능: 함수 선언문
- 불가능: 함수 표현식, 화살표 함수

- var 처럼 선언, 초기화까지 됨. 그래서 실행문이 선언문보다 더 위에 있어도 실행 가능.

//함수 선언문 (호이스팅 됨)

showName();

function showName(){

  console.log(name);

  var name = "Mike";

  console.log(name);

}

//함수 표현식 (호이스팅 안됨 -  에러발생)

showName();

var showName = function(){

  console.log(name);

  var name = "Mike";

  console.log(name);

}

// 화살표 함수 (호이스팅 안됨 - 에러발생)

showName();

var showName = () => {

    console.log(name)

    var name = "Mike";

    console.log(name)

}

 
 

3. 스코프 (Scope)

1) 설명
- 범위라는 뜻으로 '변수에 접근할 수 있는 범위'를 뜻함.
- 자바스크립트는 기본적으로 함수 스코프를 따르지만 es6 이후 let, const의 등장 이후 블록 스코프 생성도 가능해짐.
 
2) 종류
① 전역 스코프(Global Scope)
- 전역에 선언되어있어 어느 곳에서나 해당 변수에 접근할 수 있다.

// 전역스코프

var a = 1;

function gogo(){

    console.log(a);

}

gogo(); // 1 //함수 실행시 함수 외부에 글로벌로 선언된 a 변수 값 가져옴

console.log(a); // 1 // 함수 외부에서 외부에 글로벌로 선언된 a 값 가져옴. 

※이때 함수 내부에 변수 없을 때 외부에서 찾아 가져오는 것을 스코프 체인(Scope Chain) 이라 함.
 
② 지역 스코프(Local Scope)
- 해당 지역에서 선언, 해당 지역에서만 사용 가능 // e.g) 함수스코프, 블록스코프
 
③ 함수 스코프(Function Scope)
- var로 선언된 변수는 어디든 자유롭지만 함수 내부에서 선언될 때만 갇힘. // if문 for문 등에서는 자유로움.
- 또한, 함수 내에서 var로 선언되면 함수 안에 있는 여러 블록스코프들은 무시하고 돌아다님
e.g) function 안에 if, for 문 넣으면 블록이 여러개 생기는데 var로 선언한 변수는 전체 함수 내에서는 자유롭게 이동.
 
④ 블록 스코프(Block Scope)
- {}블록 내부에서 let, const 로 선언한 변수는 그 블록 내부에서만 사용 가능 // {}중괄호에 둘러쌓인 영역을 블록이라 함.
- let, const 는 함수, if문, for문, while문, try/catch문 등 {} 블록쓰인 곳은 다 못 나옴. // 그래서 함수 스코프도 따름
 
📌 var 와 let, const 의 스코프 차이를 알아보자

// 함수 스코프(var)와 블록 스코프(let, const) 차이

// var 로 선언

function add() {

    for (var i = 0; i < 5; i++) {

        console.log(i);

    }

    console.log(i+10);

}

add();

0

1

2

3

4 

15 // var로 선언되어서 i가 for문 밖으로 나감

//let 으로 선언

 

function add() {

    for (let i = 0; i < 5; i++) {

        console.log(i);

    }

    console.log(i+10);

}

add();

0

1

2

3

4 // 여기까지 for 문의 블록스코프 영역 정상적으로 잘나옴.

ReferenceError // let으로 선언된 i 가 for 문 블록스코프 밖으로 나갈 수가 없음. 즉, i 값이 없음.

function add() {

    for (let i = 0; i < 5; i++) {

        console.log(i);

    }

    let i = 5; // 이렇게 i를 for 문 밖 add 함수 안에서 따로 선언해주면

    console.log(i+10);

}

add();

0

1

2

3

4

15 // 잘나옴

 
3) 변수 키워드별 스코프 정리
- var : 선언된 함수스코프 밖으로 벗어날 수 없음 (함수 내 모든 블록스코프 통과 가능)
*화살표 함수는 블록스코프로 취급해서 화살표 함수의 var는 블록스코프 통과 못함.
- let : 선언된 위치에 따라 블록스코프와 함수스코프 둘 다 따른다.
- const : 선언된 위치에 따라 블록스코프와 함수스코프 둘 다 따른다.
 

4. TDZ (Temporal Dead Zone : 일시적으로 죽는 영역)

1) 설명
- 변수 선언과 초기화(메모리 할당) 사이의 접근할 수 없는 영역
- let, const는 TDZ에 영향을 받는다. let, const가 호이스팅 되어서 최상위에 선언 되었다고 해도 변수에 값이 할당(메모리가 할당되고 초기화값이 할당) 되기 전까지는 사용할 수 없도록 만들어 놓은 것이 TDZ이다.
=> 코드를 예측 가능하게하고, 예측불가능한 버그들을 줄이기 위함.