함수 표현식 vs 함수 선언식

함수 선언식 - Function Declarations

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

function 함수명(){
  로직
}

//예시
function fucDeclarations(){
  return 'function';
}
fucDeclarations(); // 'function'

함수 표현식 - Function Expressions

JS 언어의 특징을 이용한 선언 방식

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

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

---

함수 선언식, 표현식 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 대한 영향을 받지 않는 특징이 있다.
호이스팅이란 코드 구현 위치와 관계없이 자바스크립트 해석시 맨 위로 끌어 올려지는 현상을 말한다.

예를 들어보자

//실행
sayHello();
expresssionHello();

//선언식
function sayHello(){
  console.log("hello");
}
//표현식
var expresssionHello = function(){
  console.log("hello");
}

실행을 한다면 자바스크립트는 호이스팅에 의해 아래와 같이 인식할 것 이다.

//선언식
function sayHello(){
  console.log("hello");
}
var expresssionHello;
sayHello(); //"hello"
expresssionHello(); // Uncaught TypeError: expresssionHello is not a function

expresssionHello = function(){
  console.log("hello");
}

함수 표현식 expresssionHello에서 var도 호이스팅이 적용되어 지기 때문에 상단으로 끌어올려진다.
하지만 실제 expresssionHello 에 할당된 function은 호출도니 이후에 선언되기에, expresssionHello은 함수로 인식하지 않고 변수로 인식한다.

함수 선언식 특징

1. 함수가 선언되기 전에 호출할 수 있다. (호이스팅)
2. 함수 선언식은 전역 스코프 또는 함수 스코프에 사용할 수 있다.

함수 표현식 특징

1. 함수 표현식은 변수에 함수를 할당하기 때문에 변수의 스코프 규칙을 따르며, 함수는 변수가 선언된 위치 이후에 호출 가하다.
2. 함수 표현식은 다른 함수 내에서 정의되거나 변수에 할당된 함수를 생성할 때 주로 사용된다.