JS [클린코드] | 호이스팅과 함수표현식

mogooee·2021년 12월 16일

호이스팅이란?

호이스팅이란 선언문이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트 고유의 특징이다.

변수의 선언과 할당

자바스크립트는 선언과 할당이 분리된다.

선언: 런타임 이전

할당: 런타임시

자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 런 타임 이전에 먼저 실행한다. 이러한 평가 과정이 끝나면 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행하며 이를 런 타임이라 한다. 소스코드가 순차적으로 실행되는 시점인 런 타임에 값의 할당이 실행된다.

함수 선언문은 런타임 이전에 선언이 이미 자바스크립트 엔진에 의해 함수 객체가 먼저 생성된다. 따라서 런타임시 함수 선언문 이전에 함수를 참조하고 호출할 수 있다. 이를 함수 호이스팅이라 한다.

변수 호이스팅

console.log(a); //undefined

let a=10;

console.log(a); //10

선언문이 런타임 이전에 실행되었으므로 변수 선언 이전에도 console.log(a)가 참조 에러가 발생하지 않고 초기화 값인 undefined이 출력된다. 런타임에 값이 할당되므로 값을 할당한 다음줄에서 a값이 정상적으로 출력된다.

함수 표현식

함수 표현식은 변수에 함수가 할당되는 것이다. 함수 표현식은 변수 호이스팅으로 동작한다. 변수 선언문은 런타임 이전에 생성이 되고 변수는 undefined으로 초기화가 된다. 변수에 할당되는 함수는 런타임에 평가되므로 함수 표현식 이전에 참조나 호출이 불가능 하다.

함수 호이스팅

함수 선언문으로 정의한 함수는 런타임 이전에 함수 객체가 먼저 생성된다. 런타임에는 이미 함수 객체가 생성되어 있으므로 함수 선언문 이전에 함수를 참조하고 호출할 수 있다.

함수 표현식과 함수선언문, 즉 변수 호이스팅과 함수호이스팅의 차이를 아래 예제코드에서 확인할 수 있다.

console.log(add(1,2))//3
console.log(sub(1,2))//undefined

function add(x,y){
  return x+y;
}

const sub = function(x,y){
  return x-y;
}

호이스팅의 문제

코드를 작성할 때 예측하지 못한 실행 결과가 발생한다.

// 함수 호이스팅으로 변수를 덮어쓴다.
var sum;

console.log(type of sum); //function

function sum(){
  return 1+2;
}; 

// 변수에 할당 값이 있으면 분리 가능
var sum = 10;

console.log (sum()); // sum is not a function

function sum(){
  return 1+2;
};

// 함수 표현식을 사용, const를 사용하여 에러도 표기됨 
console.log(sum); // Cannot access sum before init

const sum=function(){ 
  return 1+2;
};