[javascript] 기명 함수와 익명 함수의 차이점 (feat. 호이스팅)

// 기명(이름이 있는) 함수
// 함수 선언!
function hello() {
	console.log("hello");
}

// 익명(이름이 없는) 함수
// 함수 표현!
const world = function() {
	console.log("world");
};

// 익명(이름이 없는) 함수
// 바로 실행이 필요할 때 사용
(function () {
	console.log("hello world");
})();

// 함수 호출!
hello();
world();

 

위 코드를 보듯이 익명 함수란 말 그대로 이름이 없는 함수를 뜻한다

여기서 알아야 할 것은 기명 함수는 함수의 선언이라 표현하고 익명 함수는 함수의 표현이라 표현한다

 

그렇다면 기명 함수와 익명 함수의 차이점은 바로 호이스팅에 있다

호이스팅이란 선언된 함수나 변수의 선언문을 유효 범위의 최상단으로 끌어올리는 행위를 말한다

 

아래 코드를 보면 훨씬 이해가 쉬울 것이다

 

hello(); // hello
world(); // world is not defined

function hello() {
  console.log("hello")
}

const world = function() {
  console.log("world")
};

(function () {
  console.log("hello world")
})();

 

우리가 선언한 hello 라는 함수 위에서 hello 를 호출해 보면 정상적으로 콘솔에 찍히지만 기명 함수로 표현한 world 는 찾을 수 없다는 에러를 확인 할 수 있다

 

이유는 바로 호이스팅에 의해 hello 라는 함수는 코드의 최상단으로 끌어올려져 hello() 를 호출하는 것보다 위에 선언이 되어 정상적으로 호출이 가능하지만 world 라는 기명함수는 호이스팅에 영향을 받지 않기 때문에 world() 를 호출한 것보다 늦게 선언이 되어 찾을 수 없다는 것이다

 

즉, 둘의 차이점은 기명 함수는 호이스팅에 영향을 받고 익명 함수는 호이스팅에 영향을 받지 않는다