화살표 함수는 일반 함수와 무엇이 다른가

TLDR;

함수선언문과 함수표현식의 차이

함수 선언문은 함수 호이스팅이 일어난다. 즉, 런타임 이전에 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다. ( 변수 호이스팅과 다르게 undefined가 아니라 함수 객체로 초기화된다.)
반면, 함수표현식은 변수 호이스팅이 발생하여 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

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

1. 화살표 함수는 함수 자체의 this 바인딩을 갖지 않아서, 화살표 내부 함수에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라고 한다.
2. 화살표 함수는 constructor가 없기 때문에, new와 함께 호출할 수 없다. 즉 생성자 함수로서 사용할 수 없다.
3. arguments를 가지지 않는다.

암시적 바인딩 vs 명시적 바인딩

this가 자바스크립트 작동방식에 따라 바인딩 되는 것을 암시적 바인딩, call,apply,bind등으로 바인딩해 주는 것을 명시적 바인딩이라고 한다.

본 글에서는 화살표 함수와 일반 함수 차이 3가지를 자세히 살펴보고자 한다.

1. 화살표 함수는 this가 없다.

화살표 함수는 일반 함수와는 달리 '고유한' this를 가지지 않고, 외부에서 값을 가져온다. 만약 화살표 함수 내부에서 this를 참조하면 일반적인 식별자처럼 스코프체인을 통해 상위 스코프에서 this를 탐색한다.

const obj = {
    say() {
      console.log(this); // [object Object]
      const f = function() { console.log(this); }; // [object Window]
      f();
      const g = () => { console.log(this); } // [object Object]
      g();
    }
};
obj.say();

1) 위의 코드에서 첫번째 this의 경우, obj를 가리킨다.

2) 두 번째로 메서드안에서 일반 함수로 정의한 경우 this는 함수로 호출했기 때문에 Window를 가리킨다.

3) 마지막으로, 메서드 안에서 화살표 안에서 정의한 경우 this는 별도로 가리키는 대상이 없기 때문에 자신의 외부 스코프인 say함수가 가리키고 있는 this인 obj를 동일하게 가리키게 된다.

 

이를 자바스크립트 콘솔에 찍어보면 아래와 같이 확인할 수 있다.

이처럼 화살표 함수 본문에서 this에 접근하면 외부에서 값을 가져오는데, 이러한 특성을 활용해서 객체의 메서드 안에서 동일 객체의 프로퍼티를 대상으로 순회할 때 사용 할 수 있다.

 

[화살표 함수 사용 예시]
화살표 함수를 사용했기 때문에 this.title은 화살표 함수 밖에 있는 메서드인 showList가 가리키는 대상과 동일해진다. 즉 (this.title === group.title)이 된다.

let group = { 
        title: "1모둠", 
        students: ["보라", "호진", "지민"], 

        showList() {
            this.students.forEach(student => alert(this.title ': ' + student));
        }
};

group.showList();

[일반 함수 사용 예시]
forEach에 전달되는 함수의 this가 window를 가리켜 에러가 난다.

let group = { 
        title: "1모둠", 
        students: ["보라", "호진", "지민"], 

        showList(){
            this.students.forEach(function(student)){
                //TypeError: Cannot read property 'title' of undefined
                alert(this.title + ': ' + student)
            });
        }
};

group.showList();

 

2. 화살표 함수는 new와 함께 사용할 수 없다.

화살표 함수는 생성자로서 사용될 수 없으며 new와 함께 사용하면 오류가 발생한다.

const Person = (name, age) => {
    this.name = name;
    this.age = age;
}

const tom = new Person('Tom', 18); // Uncaught TypeError: Person is not a constructor

 

3. 화살표 함수에는 'arguments'가 없다.

화살표 함수는 함수자체의 arguments 바인딩을 갖지 않기 때문에, 화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조한다.

(function(){
    const foo = () => console.log(arguments); //화살표 함수 foo의 arguments는 상위 스코프인 즉시실행함수의 arguments를 가리킨다. (1, 2를 가리킴)
    foo(3,4);
}(1,2))

const foo = () => console.log(argments);
foo(1,2); // ReferenceError: arguments is not defined

arguments 객체는 함수를 정의할 때 매개변수의 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다. 하지만 화살표 함수에서는 arguments 객체를 사용할 수 없다. 상위 스코프의 arguments 객체를 참조할 수는 있지만 화살표 함수 자신에게 전달된 인수 목록을 확인할 수 없고, 상위 함수에게 전달된 인수 목록을 참조하므로 그다지 도움이 되지 않는다. 따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 Rest 파라미터를 사용해야 한다.

 

참고로 Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다. 일반 arguments를 이용하면, arguments 자체가 배열이 아닌 유사배열객체이므로 배열 메서드를 사용하려면 Function.prototype.call이나 Function.prototype.apply로 arguments 객체를 배열로 변환해야 하는 번거로움이 있었다.

function foo(...rest){
    console.log(rest); // [1,2,3,4,5]
}

rest 파라미터와 화살표 함수를 사용하면 가변인자 함수를 다음과 같이 간편하게 구현할 수 있다.

 

[rest파라미터 + 화살표 함수]

function sum(...args) {
    return args.reduce((pre, cur) => pre+,cur, 0);
}
console.log(sum(1,2,3,4,5));

[arguments + 일반 함수]

function sum() {
    var array = Array.prototype.slice.call(arguments);

    return array.reduce((function (pre,cur){
        return pre + cur;
    }, 0);)
}