[JS] 함수 표현식과 함수 선언식의 차이 - 호이스팅

 

 

함수 선언식 - Function Declarations

변수 선언이 let이나 const로 시작해야하는 것처럼 함수 선언을 function으로 시작한다.

선언된 함수는 나중 사용을 위해 저장되며, 함수를 실행하려면 함수 이름을 호출(call)하면 된다.

function 함수명() {
  구현 로직
}

// 예시
function funcDeclarations() {
  return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'

 

 

함수 표현식 - Function Expressions

자바스크립트에서는 함수를 특별한 종류의 값(value)으로 취급한다.

즉, 함수를 다른 변수에 값으로써 '할당'한 것이 곧 함수 표현식이다.

var 함수명 = function () {
  구현 로직
};

// 예시
var funcExpression = function () {
    return 'A function expression';
}
funcExpression(); // 'A function expression'

 

 

함수 선언식과  함수 표현식의 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

함수 선언식은 코드를 구현한 위치와 관계없이 호이스팅*되어

브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

 

함수 표현식 호이스팅 예시

alert(foo()); // 에러 발생! foo 함수는 아직 로드안됨
var foo = function() { return 5; }

함수 선언식 호이스팅 예시

alert(foo()); 
// Alerts 5. 
// 선언 전에 호출되도 정상 동작

function foo() { return 5; }

함수 선언식은 코드가 실행되기 전에 로드되지만, 함수 표현식은 인터프리터가 해당 코드 줄에 도달 할 때만 로드된다.

---

*호이스팅

• 호이스팅(Hoisting)의 사전적 의미는 끌어 올리다 라는 뜻을 가지고 있다.
  여기서도 같은 의미로 쓰인다. 함수 안에 있는 변수나 함수 맨위로 끌어올린다는 것이다.
• 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser가 내부적으로 끌어올려서 처리한다.

호이스팅 대상

• var 와 함수 선언문 이 호이스팅 대상이다.
  let 또는 const 그리고 함수 표현식은 해당되지 않는다.

호이스팅 규칙

부등호가 큰 쪽이 먼저 인식된다

• 변수 선언 > 함수 선언
• 할당되어있는 변수 > 할당되지 않은 변수