[JS] 일반함수와 화살표함수의 차이

함수를 정의하는 방법 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');

Arrow 함수(화살표함수)[ES6]

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

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

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

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

화살표 함수는 ES6부터 도입된 함수로 function키워드 대신에 화살표 ⇒를 사용해 조금 더 간략한 방법으로 함수를 정의한다. 화살표 함수는 익명함수로 정의한다.

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

1. 화살표 함수는 생성자 함수로 사용이 불가
2. 기존함수와 this 바인딩 방식이 다르고 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.
3. prototype 프로퍼티가 없으며
4. arguments객체를 생성하지 않는다.

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

const Poo = () => {};
new Poo(); // TypeError: Poo is not a constructor

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

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

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

const arrow = (a, b) => 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을 참조한다.