함수

이번 포스팅에서는 자바스크립트의 핵심 개념인 함수, 그 중에서도 함수 선언식과 함수 표현식의 차이에 대해 살펴보자.

💡 함수란?

함수란 무엇일까? 최근 읽고있는 모던 자바스크립트 Deep Dive 책에서는 함수를 이렇게 정의한다.

일련의 과정을 statement로 구현하고 코드블록으로 감싸서 하나의 실행단위로 정의한 것으로, 재사용이 가능하고 실행시점을 개발자가 결정할 수 있다는 장점이 있다.

함수 정의 방법

그렇다면 함수는 어떻게 정의할 수 있을까? 😮

자바스크립트에서 함수를 정의하는 방식은 함수 선언문, 함수 표현식, Function 생성자 함수, 화살표함수(ES6)로 총 4가지가 있다.

이번 포스팅에서는 가장 보편적인 함수 생성 방식인 함수 선언문과 함수 표현식에 대해 중점적으로 살펴 볼 것이다.

함수 선언문

함수 선언문은 가장 기본적인 함수 선언 방식이다.

// 1. 함수선언문
function add(x, y){
	return x+y;
}

함수 표현식

자바스크립트에서 함수는 객체 타입의 값이다. 그러므로 객체 리터럴을 통해 객체를 생성하듯이 함수를 생성할 수도 있다.

// 2. 함수표현식
const add = function b(x, y){
	return x+y;
}

또한 아래처럼 ES6에서 추가된 화살표 함수 방식을 정의할 수도 있다.

const add = (x,y) => (x+y)

화살표 함수는 나중에 별도의 포스팅을 통해 자세히 살펴보자.

함수 선언문 vs 함수 표현식

그러면 함수 선언문과 함수 표현식은 어떤 차이점이 있는지 살펴보자.

함수 선언문으로 실행한 함수는 실제로 어떻게 호출이 될까? 자바스크립트 엔진은 암묵적으로 생성된 함수 이름과 동일한 이름의 식별자를 생성하고, 거기에 함수 객체를 할당해서 함수가 실행 될 수 있도록 한다.

예를 들어,

function add(x, y){
	return x+y;
}

위와 같이 함수선언문으로 생성한 코드는 자바스크립트 엔진에 의해 함수 표현식과 유사하게 변환 된다고 생각 할 수 있다.

const add = function add(x,y){
	return x+y;
}

그렇다면 함수 선언문과 함수 표현식은 동일한 것일까? 😯

결론부터 이야기 하면, 함수 선언문과 함수 표현식은 동일하지 않다!
그 이유는 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.

어떤 차이가 있는지 다음 코드를 통해 살펴보자.⌨️⌨️

//함수 참조
console.dir(add); // f add(x,y)
console.dir(sub); // undefined



//add를 정의하기 이전에 실행
console.log(add(2,5)); // 7

//sub를 정의하기 이전에 실행
console.log(sub(2,5)); // TypeError: sub is not a function

//add를 함수선언문 방식으로 선언
function add(x,y){
	return x + y ;
}

//sub를 함수표현식 방식으로 선언
const sub = function(x,y){
	return x - y ;
}

위 코드의 실행 결과를 보면, 함수 선언문으로 정의한 add 함수는 정의하기 전에 실행하면 실행이 되지만, sub는 실행이 안되는 것을 볼 수 있다!

차이가 발생하는 이유는 호이스팅이 발생하는 주체가 다르기 때문이다. (호이스팅에 원리가 궁금하신 분들은 실행 컨텍스트 포스팅을 참조하세요😁)

함수선언문으로 함수를 정의하면 런타임 이전에 코드 평가 과정에서 함수객체가 먼저 생성된다. 즉, 함수 호이스팅이 발생한다는 것이다.

따라서 함수 선언문 이전에 함수를 참조할 수 있으며 실행까지 할 수 있다. (이렇게 함수 선언문이 코드의 선두로 끌어 올려진 것 처럼 동작하는 방식을 함수 호이스팅 이라 한다.)

반면에 함수표현식으로 함수를 정의하면 변수 호이스팅이 발생한다. sub이라는 변수에 할당되는 값은 런타임에 결정되기 때문에, sub이라는 변수 호이스팅에 의해 undefined로 초기화된다.

따라서, sub이라는 변수에 함수가 대입되기 전에는 undefined이기 때문에 함수에 접근할 수 없다.

정리

💡 함수 선언문으로 선언된 함수는 함수 호이스팅이 발생한다. 런타임 이전에 함수 객체가 생성이 되므로 함수가 정의되기 전에 함수를 호출할 수 있다.

💡 함수 표현식으로 선언된 함수는 변수 호이스팅이 발생하며, undefined로 초기화된다. 그러므로 함수 선언문으로 선언한 함수는 함수가 정의되기 전에 함수를 호출할 수 없다.

이러한 함수 호이스팅은 함수를 사용하기 전에 반드시 함수를 선언해야한다는 규칙을 무시하므로 함수 표현식을 권장한다고 한다.

위 코드는 Airbnb 자바스크립트 코딩 스타일 가이드에서 가져온 코드인데, 함수 이름이 있는 기명 함수 표현식을 사용하는 것을 권장하고 있다.

앞으로 함수를 정의할때는 함수표현식을 사용하도록 해야겠다. 😁😁