[JavaScript] 호이스팅

Rae-eun Yang·2022년 7월 7일
0

호이스팅이란?


인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것


변수 호이스팅


브라우저가 자바스크립트를 해석할 때 변수 선언문이 코드를 구현한 위치와 관계없이 맨 위로 끌어 올려지는 현상


예시

console.log(score) // undefined

score = 80;
var score;

console.log(score) // 80

두번째 console.log(score)가 80인 이유는 변수 호이스팅 때문이다


let과 const 호이스팅

let과 const로 선언한 변수도 호이스팅 대상임
But! var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않는다.
-> 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생

어느 곳에서는 let과 const는 호이스팅 대상이 아니라고 하는 사람들도 있음


함수 호이스팅


브라우저가 자바스크립트를 해석할 때 함수 선언문이 코드를 구현한 위치와 관계없이 맨 위로 끌어 올려지는 현상

  • 함수 표현식은 함수 선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있음
    - 함수 표현식에서는 선언과 할당의 분리가 발생

함수 선언문 예시

function add(a, b) {
  return a + b;
}

함수 표현식 예시

var sum = function add(a, b) {
  return a + b;
}

호이스팅 우선순위


  • 변수 선언문이 함수 선언문보다 위로 끌어올려진다.

호이스팅 사용시 주의

  • 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.
    + 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.
    + let/const를 사용한다.
  • var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있다. 그럼 왜 var와 호이스팅을 이해해야 할까?
    + ES6를 어디에서든 쓸 수 있으려면 아직 시간이 더 필요하므로 ES5로 트랜스컴파일을 해야한다.
    -> 따라서 아직은 var가 어떻게 동작하는지 이해하고 있어야 한다.

Reference


더 자세한 설명

profile
개발자 지망생의 벨로그

0개의 댓글