1.6호이스팅

1. 호이스팅의 정의

함수 안에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것

2. 세부

• 자바스크립트 함수는 실행되기 전, 함수 안에 필요한 변수 값들을 모두 모아서 유효 범위(함수 블록 안에 있는 범위)의 최상단에 선언
  • 자바스크립트 parser는 함수 실행 전 함수를 한번 쭉 훑고,
  • 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행
  • 즉, 실제로 코드가 끌어올려지는게 아니라 그냥 parser가 아랫쪽에 쓰여있지만 필요한 값들을 끌어올리는 것으로 실제 메모리에 변화는 없음
• 호이스팅의 대상
  • var 변수 선언과 함수 선언문(function declararation)에서만 호이스팅이 일어남
    • let/const 변수 선언과 함수 표현식(function expression)에서는 안됨
    • 즉, function foo()에서는 되고 const foo = function()에서는 안됨.
  • 함수 표현식에서는 선언과 호출 순서에 따라 정상적으로 함수가 실행되지 않을 수 있음(선언과 할당의 분리)

javascript
/* 오류 */
 function printName(firstname) { // 함수선언문
     console.log(inner); // > "undefined": 선언은 되어 있지만 값이 할당되어있지 않은 경우
     var result = inner(); // ERROR!!
     console.log("name is " + result);

     var inner = function() { // 함수표현식
         return "inner value";
     }
 }
 printName(); // > TypeError: inner is not a function
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

• console.log(inner)가 undefined인 것은, var inner=…가 함수 표현식으로 정의되어있기 때문에 얘는 함수로 인식되지 않고 undefined로 지정됨

3. 호이스팅 우선 순위

• 같은 이름의 var 변수 선언과 함수 선언에서의 호이스팅
  • 변수 선언 > 함수 선언

javascript
var myName = 'hi';

function myName() {
  console.log('yuddomack');
}
function yourName() {
  console.log('everyone');
}

var yourName = 'bye';

console.log(typeof myName); //string
console.log(typeof yourName); //string

myName은 위에 할당/아래에 함수선언, yourName은 위에 함수선언/아래에 할당임에도 불구하고 둘다 타입은 string으로 변수 할당이 우선됨

• 값이 할당되어 있지 않은 변수와 값이 할당되어 있는 변수 ⇒ 값이 할당되어 있지 않은 변수는 함수 선언문이 변수를 덮어버림(아래 예시)

javascript
var myName = 'Heee'; // 값 할당
var yourName; // 값 할당 X

function myName() {
  // 같은 이름의 함수 선언
  console.log('myName Function');
}
function yourName() {
  // 같은 이름의 함수 선언
  console.log('yourName Function');
}

console.log(typeof myName); // > "string"
console.log(typeof yourName); // > "function"

4. 주의사항

• 코드의 가독성/유지보수를 위해 호이스팅 일어나지 않게 하자
  • 함수와 변수를 가급적 코드 상단부에서 선언하면 호이스팅으로 인한 스코프 꼬임을 방지 가능
  • let/const 사용