JavaScript

함수 선언식 vs 함수 표현식

함수 선언식 : Function Declarations: 선언

 - 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식

일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다.

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

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

function funcDeclarations() {
  return "A function declaration";
}
funcDeclarations();

함수 표현식 : Function Expressions : 표현

 - 유연한 자바스크립트 언어의 특징을 환용한 선언 방식 => 함수는 일 급 객 체!!

 

함수 표현식은 정의한 function을 별도의 변수에 할당하는 것이다.

함수 선언문의 경우 반드시 함수명이 정의돼 있어야 하는 반면, 함수 표현식은 없어도 되기에 일반적으로 함수 표현식은 함수명을 정의하지 않는다.

 

함수 표현식은 유연한 자바스크립트 언어의 특징을 활용한 선언 방식으로 다른 언어에서는 함수를 '특별한 동작을 하는 구조'로 취급하지만, 자바스크립트에서는 함수를 특별한 종류의 값(value)으로 취급한다. 즉, 함수를 다른 변수에 값으로써 '할당'한 것이 곧 함수 표현식이다.

• 변수나 데이터 구조안에 담을 수 있다.
• 파라미터로 전달 할 수 있다.
• 리턴 값으로 사용할 수 있다.

let funcExpression = function () {
  return "A function expression";
};
funcExpression();

---

차이점!

함수 선언식은 hoisting (hoist : 들어 올리다 (끌어 올리다)의 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않습니다!

 

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

 

실제 b에 할당될 function 로직은 호출된 이후에 선언되므로, b는 함수로 인식하지 않고 변수로 인식한다.

 

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

a();
console.log(a()); // hoisting now
// var 변수도 hoisting됨!!
console.log(b); // undefined
// 근데 함수 실행은 정의 이후에 실행됨
b(); // typeError : b is not a function

console.log(c); // let은 안 돼!

function a() {
  return "hoisting now";
}

var b = function () {
  return "plz hoisting now";
};
let c = 1;

---

 

[JavaScript] 함수 선언식 vs 함수 표현식