Hoisting

ryh0629·2022년 7월 1일
0

호이스팅(Hoisting) ?


우리는 보통 호이스팅(Hoisting)은 보통 코드를 실행하기 전 함수의 선언과 변수의 선언을 파일의 맨 위로 끌어 올린다고 알고 있을 것이다.

하지만, JS 엔진은 스크립트를 가져 오면 가장 먼저 코드에서 데이터를 위한 메모리를 설정한다. 이 시점에는 코드가 실행되지는 않고 실행을 하기 위한 준비단계이다.

함수와 변수가 메모리에 저장되는 방식은 다르다.

함수는 전체 함수에 대한 참조와 함께 저장된다.
변수의 경우 ES6 문법인 letconst는 초기화 되지 않은 채로 저장이 되고, var는 undefined로 저장이 된다.
그럼 이제 준비단계를 마치고 코드를 실행할 수 있게 된다.

예시

console.log(sum(2,3));
console.log(name);
console.log(age);

function(x,y) {
  return x + y;
}

const name = 'hoo00nn';

var age = 25;

처음 console.log는 함수는 전체 함수의 대한 참조와 함께 메모리에 저장되기 때문에 함수를 만든 라인 이전에도 호출할 수 있다.

다음 console.log 는const는 초기화되지 않은 채로 메모리에 저장이 되기 때문에 초기화 전에 변수를 참조할 수 없다는 ReferenceError 가 발생한다.

var는 undefined 형태로 메모리에 저장이 되기 때문에 undefined가 콘솔에 찍힌다.



호이스팅 우선순위

  1. 같은 이름의 var 변수 선언과 함수 선언에서의 호이스팅
    변수 선언이 함수 선언보다 위로 끌어올려진다.

  2. 값이 할당되어 있지 않은 변수와 값이 할당되어 있는 변수에서의 호이스팅


함수와 변수는 코드를 실행하기 전에 실행 컨텍스트를 위해 메모리에 저장된다. 이것을 호이스팅 이라고 한다.
함수는 전체 함수에 대한 참조와 함께 저장되고, var 키워드가 있는 변수는 undefined, let 및 const 키워드가 있는 변수 는 초기화되지 않은 상태로 메모리에 저장됩니다.


결론
호이스팅 메카니즘을 적절히 이해하는 것은 호이스팅에 의해 발생하는 잠재적 버그와 혼란을 피하도록 도와준다.
undefined나 reference error와 같이 호이스팅의 사이드 이펙트(Side Effect)를 피하기 위해서는 항상 변수를 현재 스코프 최상단에서 선언하도록 하고, 선언과 함께 초기화를 해야한다.


참고 | https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
https://velog.io/@hoo00nn/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting-%EC%9D%B4%EB%9E%80

profile
developer

0개의 댓글