호이스팅(Hoisting)이란?

최준호·2022년 5월 22일

호이스팅의 개념

자바스크립트의 모든 선언에는 호이스팅이 일어난다.

if(true) {
var name = 'jun'
}
console.log(name);

<내가 작성한 코드>

위코드는 호이스팅에 의해 아래와 같이 변환이 된다.

var name;
if(true) {
name = 'Jun';
}
console.log(name);

<호이스팅으로 변환된 코드>

호이스팅이란?

자바스크립트 함수는 실행되기전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
-함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
-유효 범위 : 단순한 블록{}이 아닌 함수 블록 function{} 안에서 유효한다. 이를 var는 함수 수코프에서 유효하다 라고 한다.

호이스팅의 변수는 3단계에 걸쳐 생성된다.

변수는 선언 => 초기화 => 할당의 단계를 거친다. var 키워드와 let 키워드는 이 단계를 수행하는 과정이 서로 다르고 이에 따라 호이스팅의 양상도 다르게 나타난다.

중복해서 선언(+초기화)가 가능하다. 이 경우, 마지막에 할당된 값이 변수에 저장된다.
기존에 선언해둔 변수의 존재를 잊고, 값을 재할당하게 되는 등 실수가 발생하기 쉽다.

console.log(a); // undefined
var a = 10;
console.log(a); //10

뒤에서 선언된 변수 a가 앞에서 참조되었음에도 에러가 발생하지 않는다.

코드로 표현하면

var a = undefined;
console.log(a); // undefined
a = 10;
console.log(a); // 10

var로 선언된 변수의 호이스팅이다.

let,const : 블록 레벨 스코프
let,const,는 함수 내부는 물론, 코드 블럭에서 선언된 변수도 지역변수로 취급한다. 함수 내부에서 선언된 변수도 외부에서 참조할 수 없다.

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

뒤에서 선언된 변수를 앞에서 참조하니 에러가 발생한다.
이렇게 되는 이유는 let,conset의 호이스팅 과정이 var와 다르게 진행되기 때문이다.

let a = 10; // 전역변수 a선언

if(true) {
cosole.log(a); //ReferenceError : a is not defined
let a = 20; // 지역변수 a 선언
}

let 키워드로 선언한 변수는 런타임 이전 선언까지만 실행된다. 런타임데 선언문이 다시 도달하면 초기화가 이루어지고 let 키워드에서 선언부터 초기화단계까지의 견격을 일시적 사각지대(Temporal Dead Zone)이라고 부른다.

함수 선언은 지정된 매개변수를 갖는 함수를 정의한다. 함수 선언으로 생성된 함수는 Function 객체로, 런타임 이전에 함수 개체가 생성된다. 선언된 함수는 후 사용을 위해 저장되고 실행하려면 함수 이름을 호출(call)하면 된다.

function myName { //함수명 myName이 곧 변수명이다.
  alert("Jun");
}

//함수 실행
myName();

함수 표현식은 정의한 function을 별도의 변수에 할당하는 것이다. 즉 함수 표현식으로 함수를 작성하면 변수 호이스팅이 발생된다.

console.log(sum);//undefined

var sum = fucntion(a + b) (
  return a + b;
  }

console.log(sum(a, b));//a+b

LV1 프론트엔드 엔지니어