[JS] 호이스팅이란?

호이스팅 (hoisting)
Javascript에서의 호이스팅은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말하며 이는 변수 범위가 전역 범위인지 함수 범위인지에 따라 다르게 수행될 수 있다
함수 내에서 선언한 함수 범위(function scope)의 변수는 해당 함수의 최상위로 함수 밖에서 선언한 전역 범위(global scope)의 전역 변수는 스크립트 단위의 최상위로 끌어올려진다
-> 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동

 

var, let, const의 변수 선언과 특징

var

---

var는 한번 선언된 변수를 다시 선언할 수 있다

 

var name = 'Mike'
console.log(name) // Mike

var name = 'Jane'
console.log(name) // Jane

 

var는 선언하기 전에 사용할 수 있다

 

 입력코드

console.log(name) // undefined
var name = 'Mike'

 

 

 실제 작동 코드

var name; // 호이스팅(hosting)

console.log(name) // undefined
name = 'Mike'

 

유튜브-코딩앙마

선언은 호이스팅되지만 할당은 호이스팅 되지 않기 때문에 console.log에 undefined가 출력된다

var
1. 선언 및 초기화 단계
2. 할당 단계

초기화 : undefined를 할당 해주는 단계

let, const

---

let, const는 재선언이 되지 않는다

 

let name = 'Mike'
console.log(name) // Mike

let name = 'Jane'
console.log(name) // 'name' has already been declared

 

let, const도 호이스팅이 된다
하지만 var처럼 동작하지 않고 ReferenceError 에러가 뜨게 된다
호이스팅 된 변수가 여전히 Temporal Dead Zone에 존재하기 때문에 !

 

Temporal Dead Zone(TDZ) ❓
초기화되지 않은 변수가 있는 곳을 말한다
변수가 초기화되는 순간 TDZ에서 나오게 되며 사용할 수 있게 된다

 

let age = 30

function showAge() {
  console.log(age) // ReferenceError : Temporal Dead Zone
  let age = 20
}

showAge()

 

let age = 30

function showAge() {
  console.log(age) // 30
  age = 20
}

showAge()

let이 호이스팅되지 않는다면 console.log에는 30이 정상적으로 찍혀야 하지만 함수 내부의 let이 호이스팅 되며 console.log가 TDZ에 들어가기 때문에  ReferenceError가 발생하게 된다

 

let
1. 선언 단계
2. 초기화 단계
3. 할당 단계

let의 경우 호이스팅으로 변수가 선언은 되지만 초기화 단계가 실제 코드에 도달했을때 되기 때문에 ReferenceError가 발생

 

const
1. 선언 + 초기화 + 할당

 

유튜브 - 코딩앙마

const의 경우 선언과 할당이 동시에 되어야한다

 

let name
name = 'Mike'

var age
age = 30

const gender // SyntaxError 발생, 선언하며 바로 할당을 안 해줬기 때문에
gender = 'male'

 

let, const 모두 호이스팅으로 선언된 변수가 스코프 내 최상단으로 끌어올려지지만 초기화 단계가 실제 코드에 도달했을 때 실행되기 때문에 호이스팅 된 변수는 TDZ 안에 존재하게 되고 ReferenceError가 발생하게 된다

 

함수 선언식 vs 함수 표현식 ⭐️
함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다

 

함수 선언식

 

function funcDeclarations() {
  return 'A function declaration';
}

funcDeclarations(); // 'A function declaration'

 

함수 표현식

 

const funcExpression = function () {
    return 'A function expression';
}
funcExpression(); // 'A function expression'

 

함수 선언식, 함수 표현식의 차이

 

 입력코드

logMessage();
sumNumbers();

function logMessage() {
  return 'worked';
}

var sumNumbers = function () {
  return 10 + 20;
};

 

 실제 작동 코드

function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};

 

함수 표현식 sumNumbers 에서 var 도 호이스팅이 적용되어 위치가 상단으로 끌어올려졌지만 실제 sumNumbers에 할당 될 function 로직은 호출된 이후에 선언되므로 sumNumbers는 함수로 인식하지 않고 변수로 인식한다

함수 표현식에서 var, let, const의 차이 ‼️
- var에서는 선언과 동시에 초기화(undefined)가 진행되면서 함수 표현식보다 상단에서 호출 시에 TypeError 발생
- let, const는 초기화가 실제 코드가 있는 부분에서 작동하기 때문에 함수 표현식보다 상단에서 호출 시에 ReferenceError(is not defined) 발생