2018-12-18(JavaScript Hoisting 호이스팅)

Hoisting

호이스팅(Hoisting)은 ECMScript 2015 언어 명세 및 그 이전 표준 명세에서 사용된 적이 없는 용어이다. 호이스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨진다. 하지만 호이스팅은 오해로 이어질수 있다. 예를들어, 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있다.

예제1

JavaScript 가 어떤 코드 구분을 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에서 선언하기 전에 함수를 사용할 수 있다는 것이다.

예를들어

function catName(name){
    console.log("My cat's name is " + name);
}
 
catName("Tigger");
 
//위 코드의 결과는 : "My cat's name is Tigger"

위 코드 스니펫은 통상적으로 작동하는 코드를 작성하는 법이다. 만약 함수를 작성하기 전에 함수를 호출하면 어떤일이 일어날까?

catName("Chloe");
 
function catName(name){
    console.log("My cat's name is " + name);
}
 
//위 코드의 결과는 : "My cat's name is Chloe"

비록 함수를 작성하기 전에 함수를 호출하였지만, 코드는 여전히 동작한다. 이는 JavaScript에서 컨텍스트 실행이 작동하는 방식 때문이다.

Hoisting은 다른 데이터 타입 및 변수와도 잘 작동한다. 변수는 선언하기 전에 초기화하여 사용될 수 있다. 그러나 초기화 없이는 사용할 수 없다.

예제2

num = 6;
num + 7;
var num;
 
//num이 선언되지 않더라도 에러를 내지 않는다.

JavaScript는 초기화가 아닌 선언만 끌어올린다(hoist). 만약 변수를 선언한 뒤 나중에 초기화 시켜 사용한다면, 그 값은 undefinded로 지정된다. 아래 두 예제는 같은 동작을 보여준다.

var x = 1; // x 초기화
console.log(x + " " + y); // '1 undefinded'
var y = 2;
 
//아래 코드는 이전 코드와 같은 방식으로 동작
var x = 1; // x 초기화
var y; // y 선언
console.log( x + " " + y); // '1 undefinded'
y = 2; // y 초기화

2019-01-31 일자 추가 내용

사용과 관련하여

//----------------------------------------------------------------
//JavaScript 함수 선언
 
//선언적 함수
function a () {
    return 'a';
}
 
//기명함수 표현식
var b = function bb () {
    return 'b';
}
 
//익명함수
var c = function () {
    return 'c';
}
 
//----------------------------------------------------------------
 
 
//----------------------------------------------------------------
//호이스팅 관련하여 함수 사용시 문제점
function sum(a,b){
  return "a + b = " + (a+b);
}
 
sum(1,2); // 3
//아래의 선언된 sum 함수가 호이스팅 되면서 첫번째 선언된 sum 함수를 덮어버림
//호이스팅 되면서 "a + b = 3" 이란 값이 아닌 "3"이란 값으로 출력됨
 
function sum(a,b){
  return (a+b);
}
 
sum(3,4); // 7
 
/*
ex) 아래의 예시를 한번 보자.
  팀작업을 하다보면 다른 사람과 동일한 이름으로 함수를 아래쪽에 한번 더 선언하게 될 수 있는데
  (실수로...)
  이 경우는 호이스팅을 같이 생각하면 어떻게 수행될까?
  -> 첫번째 sum함수 선언이 호이스팅되서 올라가고, 두번째 sum 함수 선언이 호이스팅되는데
     이때, 이미 sum함수가 있음으로 마지막에 선언된 sum함수로 덮어써지고 만다...
     따라서, sum(1,2)와 sum(3,4)가 모두 3, 7의 결과가 나온다.
     (우리 예상으론 a+b=3, 7이 나올것 같지만...)
  결론)
    -> 호이스팅에 의해 덮어써질 수 있음으로 함수 선언은 선언적 함수 방식보다
       함수 표현식(익명함수로 대입하는 등...)의 방식을 사용해서 정의하는 것이 좋다!
    */
//----------------------------------------------------------------