화살표 함수 vs 일반 함수 🖐

화살표 함수란?

화살표 함수는 ES6에서 새롭게 도입된 기능으로 일반 함수를 간결하게 쓸 수 있는 함수다. 일반 함수와 비슷하지만 몇 가지 차이가 존재하는데 그것에 대해 알아보자

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

const Foo = () => {};
// 화살표 함수는 생성자 함수로서 호출할 수 없다.
new Foo(); // TypeError: Foo is not a constructor

화살표 함수는 인스턴스를 생성할 수 없으므로 prototpye 프로퍼티가 없고 프로토타입도 생성하지 않는다.

const Foo = () => {};
// 화살표 함수는 prototype 프로퍼티가 없다.
Foo.hasOwnProperty('prototype'); // false

hasOwnProperty() 메소드는 특정 프로퍼티가 해당 객체에 존재하는지를 검사합니다.

2. 중복된 매개변수 이름을 선언할 수 없다.

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

function normal(a,a) {return a+a;}
console.log(normal(1,2)); // 4

단, 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.terget을 참조한다

this ⭐
화살표 함수가 일반 함수와 구별되는 가장 큰 특징이다. 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다 이를 lexical this라 한다.

arguments
화살표 함수는 arguments 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 argument를 참조.