호이스팅(Hoisting)

호이스팅(Hoisting)

자바스크립트는 모든 선언(Declaration)을 상단으로 가져와서 해석한다

함수 선언식***

호이스팅은 함수 선언식의 경우에만 적용된다.

const awesome = add(1, 5); // 변수 선언 전에 함수를 호출

function add(a, b){ // 함수 선언식
return a + b;
}
console.log(awesome) // 콘솔창에 함수값을 할당한 변수 awesome이 문제없이 출력된다.

(위와 같이 코드를 짜는 건 바람직 하지 않지만)
자바스크립트는 모든 선언(Declaration)을 상단으로 가져와서 해석한다.
이를 '호이스팅(hoisting)'이라 한다.
선언식 함수값을 할당받은 변수 awesome을 console.log해도 문제없이 출력이 된다.

함수 표현식

ReferenceError가 나온다.

const awesome = add(1, 5); 

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

console.log(awesome);
// Uncaught ReferenceError: Cannot access 'add' before initialization
    at <anonymous>:1:17

화살표 함수

ReferenceError가 나온다.

const awesome = add(1, 5); // 변수 선언 전에 함수를 호출

const add = (a, b) => a + b; // 함수 표현식

console.log(awesome); // ReferenceError: Cannot access 'add' before initialization

//'referenceError'가 발생했다.

add 함수 선언 전에 add 함수를 호출했기 때문에
변수 awesome에 add(1,5) 함숫값을 저장할 수 없다.
함수 표현식과 화살표 함수는 '호이스팅'이 적용되지 않는다.