JavaScript - 일반 함수와 화살표 함수 차이

자스~

면접 때 받은 질문, 하지만 제대로 대답하지 못한 내용이라 정리해두려고 한다.

일반 함수와 화살표 함수의 차이점에 대해 알아보기 전에,

함수 정의 방법에 대해 알아보자.

함수를 정의하는 방법은 4가지가 있다.

 

함수 선언식

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

함수 표현식

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

Function 생성자 함수

const add = new Function('x', 'y', 'return x + y');

화살표 함수(ES6)

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

 

모든 함수 정의 방식은 함수를 정의한다는 면에서는 동일하지만 중요한 차이가 있다.

변수는 '선언(declaration)'한다고 하지만, 함수는 '정의(definition)'한다고 표현한다. 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당되기 때문이다.

 

 화살표 함수와 일반 함수의 차이점

화살표 함수는 ES6부터 도입된 함수로 function키워드 대신 화살표 =>를 사용해 좀 더 간략한 방법으로 함수를 정의하는 방법이다.

화살표 함수는 항상 익명 함수로 정의한다.

 

화살표 함수는 기존의 함수보다 표현만 간략한 것이 아니라 내부 동작도 간략하다.

1. 화살표 함수는 생성자 함수로 사용할 수 없으며,

2. 기존 함수와 this 바인딩 방식이 다르고, → 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용

3. prototype 프로퍼티가 없으며

4. arguments객체를 생성하지 않는다.

 

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다.

const Foo = () => {};

new Foo(); // TypeError: Foo is not a constructor

2. 화살표 함수는 중복된 매개변수 이름을 선언할 수 없다.

strict mode가 아닐 때, 일반 함수는 중복된 매개변수 이름을 선언해도 에러가 발생하지 않는다.

하지만, 화살표 함수는 중복된 매개변수 이름을 선언하면 에러가 발생한다.

const arrow = (a, a) => a + a;
// SyntaxError: Duplicate parameter name not allowed in this context

3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

화살표 함수 내부에서 this, arguments, super, new.target을 참조하면 스코프 체인을 통해 상위 스코프의 this, arguments, super, new.target을 참조한다.

만약, 화살표 함수와 화살표 함수가 중첩되어 있다면 상위 화살표 함수에도 this, arguments, super, new.target 바인딩이 없기 때문에 스코프 체인 상 가장 가까운 화살표 함수가 아닌 함수의 this, arguments, super, new.target을 참조한다.

 

[참고 서적] 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리