화살표 함수 (feat : 함수표현식 vs 함수선언식)

프로젝트를 하며 js를 다루다가, api 연동 혹은 리액트 코드 작성을 위해 사용한 함수식은 대부분 화살표 함수로 작성되어있다는 것을 깨달았다. 과연 내가 제대로 알고 쓰는것일까? 문득 궁금하여 다시 공부하고 내용을 정리해서 글로 남겨두고자 한다.어떻게 동작하는지 모른채로 접한다면 이해하기 힘들 수 있다. 우선 화살표함수는 ES6 이후 문법으로 function 키워드 대신 "=>" 모양을 사용하여 만든 함수이다. 이 글에서 알아볼 방식은 함수를 선언하는 방식 중 함수표현식과 함수선언식 방식이다.

 

화살표 함수 - 화살표 함수는 function 키워드 대신 => 기호를 사용하는 함수 표현식이다.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

 

함수 선언식 - function 키워드 옆에 함수의 이름을 작성하고 함수를 선언하는 방식이다.

이를 이용하여, 기존엔 아래와 같이 함수를 작성하였다. 

const add = function(a, b) {
    return a+b;
}

 

함수 표현식 : 화살표 함수처럼 함수를 하나의 값처럼 생각하고,  변수에 할당하는 방법이다.

// 함수 표현식(화살표 함수)
// function 키워드 삭제 후 "=>" 작성  
const add = (a, b) => {
    return a+b;
}

 

위와 같이 특정 값을 반환하는 함수라면 아래와 같이 중괄호와 return 문을 생략할 수 있다.

const add = (a, b) =>  a+b;

 

그렇다면 단순 가독성 측면을 제외하고 두 방식의 차이점은 뭐가 있을까?

가장 큰 차이점은 호이스팅 차이이다. (*호이스팅 : 선언문이 마치 해당 스코프의 최상단에 끌어올려진 듯한 현상)

 

함수 선언식

hoisted(); 

function hoisted () {
  console.log("hoisting");
};

정상적으로 실행된다. 

 

---

함수 표현식

hoisted(); 

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

Uncaught ReferenceError: 

Cannot access 'hoisted' before initialization

위와 같이  hoisted 가 초기화 되지 않았다는 내용의 에러가 발생하는 것을 확인할 수 있다.

 

함수 표현식은 위에서 설명한대로, 변수에 함수를 할당하는 방식이다.

변수가 호이스팅이 되는 과정에서 변수의 선언부분/할당부분 중, 선언부분만 호이스팅 된다는 것을 알고 있다면, 이또한 같은 원리가 적용되어 발생한 오류라는 것을 쉽게 깨달을 수 있을 것이다. 

(+ 함수표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.)

 

참고로 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.

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

console.log(add(2, 5)); //

 

식별자 :var add 의 add 

함수이름 : function add 의 add