간단하게 쓰는 글 : 함수 선언문 / 함수 표현식 차이

들어가기 전

자바스크립트를 그냥 저냥 사용하고 있다. 늦었지만 의문이 하나 생겼다.

function sayHello(){
  console.log("Hello!!");
};

const sayHello = function(){
  console.log("Hello!!");
};

 

함수를 선언하는 것 / 변수에 함수를 담는 것

볼 땐 무슨 차이인가 싶다

이 둘의 차이는 호이스팅(hoisting)과 스코프(scope)와 같은 차이가 있다.

 

1. 함수 선언문 (Functional Declaration)

function sayHello() {
  console.log("Hello!!");
};

 

이처럼 함수를 선언하는 것을 "함수 선언문"이라고 한다.

호이스팅 : 전체 코드에서 최상단으로 끌어올려지기 때문에 정의하기 전에 호출이 가능하다.

(즉, 사용보다 먼저 선언할 필요가 없다.)

sayHello();
function sayHello() {
  console.log("Hello!!");
};

 

이렇게 사용할 수 있다.

 

2. 함수 표현식 (Function Expression)

const sayHello = function () {
  console.log("Hello!!");
};

 

이처럼 변수에 함수를 담는 것을 함수 표현식이라고 한다.

호이스팅은 되지만, 변수만 undefined로 올라가고, 함수는 안 올라간다.

(따라서 정의 전에 호출하면 에러가 발생한다.)

sayHello(); // TypeError: sayHi is not a function
const sayHello = function () {
  console.log("Hello!!");
};

 

이런 차이가 있어서 필요에 따라서 사용하면 되겠다.