JS. 호이스팅

"호이스팅이요?"
"변수를 끌어올려 주는거였나.."

그렇다. 이게 호이스팅 설명에 대한 내 한계였기에 호이스팅에 대한 velog를 써보려고 한다.

📕 호이스팅

Hoisting: Hoist(들어올리다) + ing

• 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징
• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.

결론적으로,

모든 선언(var, let, const, function 등)을 가장 위로 끌어올린다.

가 된다. 참고(https://velog.io/@stampid/Hoisting호이스팅이란)

📗 호이스팅 이해하기

💡 case 1: var

console.log(name)
var name = ‘자몽’

다음과 같은 코드가 있다.
name이 선언되기 전에 console.log(name)이 먼저 실행되었는데 콘솔은 놀랍게도 에러가 아닌, 'undefined' 을 출력한다.
앞에서 배운 호이스팅의 개념이 여기에서 쓰여, 코드의 최상단에 name이 선언되게 된다.

💡 case 2: const(let)

const와 let은 특징이 다를 뿐, 호이스팅이 이루어지는 과정은 동일하기에 let 하나의 사례를 가지고 설명한다.

var name = ‘자몽1’;
{
    console.log(name)
    let name = ‘자몽2’;
}

case 1에 의하면 var name과 let name은 호이스팅이 된다는 것을 추측할 수 있다.
그렇다면, 콘솔창에 나온 출력결과는?? 에이 당연히 undefin...엥?
특이하게도 ReferenceError: name is not defined가 나온다.
에러가 떴으니깐 let은 호이스팅이 안되는거 아닌가 싶기도 한데 이를 이해하기 위해서는 변수의 생성 과정을 알아야 할 필요가 있다.

변수의 생성

1. 선언: 변수 객체에 등록
2. 초기화: x-> undefined
3. 할당: undefined -> 변수 값

var는 선언, 초기화가 동시에 이루어지는데,
let, const는 선언단계만 호이스팅되고, 이후 초기화 단계는 실제 코드 위치에서 실행된다.

💡 case 3: 함수

함수 선언식

foo();

function foo(){
  console.log('자몽');
}

함수 선언은 최상단으로 끌여올려지기에, 정상적으로 '자몽' 을 출력한다.

함수 표현식

foo();

var foo = function(){
  console.log('자몽');
}

이상하게도 함수 표현식에서는 에러가 발생한다.
왜인지 코드를 뜯어보자.

가장 큰 차이점은 역시 선언 방법.
var foo는 case 1에서와 같이 최상으로 끌여올려지는데,
이는 호이스팅 이후 foo()가 호출되지만, foo()가 가리키는 곳은 아무것도 없고, 그 이후에 foo에 함수가 정의되게 된다.

+이러한 특징으로 인해, 함수 표현식이 권장되기도..

//컴퓨터가 함수 표현식을 읽을 때의 순서
var foo;
foo();
foo = function(){
  console.log('자몽');
}

따라서, 변수와 함수(선언식)은 호이스팅이 발생한다.

📒 그래서 왜?? 사용하는데?

• 호이스팅은 자바스크립트에서 함수의 호출을 첫 줄에서 하고 마지막 줄에 함수를 정의해도 문제없이 작동되도록 하는 유용한 특성이다.

  (함수를 정의하는 부분이 먼저 선언되고, 그 이후에 코드가 순차적으로 실행된다.)

• 호이스팅은 JS 동작 그 자체이다.

  호이스팅은 JS가 인기를 얻게된 ES6이전의 문법이지만 JS의 인터프리터 과정을 이해하는데 도움이 된다.
  참고(https://velog.io/@nibble/그래서-호이스팅의-장점이-뭔데)