자바스크립트 화살표 함수

화살표 함수(Arrow Function)

화살표 함수는 기존 function 표현에 비해 구문이 짧고, 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적당합니다. 그래서 생성자로서 사용할 수 없습니다. function 키워드 대신 화살표(=>)를 사용하여 함수를 선언하는 방법입니다. 콜백 함수에서 사용하면 아주 간결하게 표현이 가능한 장점이 있습니다.

간단하게 화살표 함수를 정리하는 글이니 더욱 자세한 내용은 MDN을 참조해주세요.

표현식

// 함수 표현식 
function () {}
 
// 화살표 함수 표현식
() => {}

사용법 (arguments -> args)

// ES5
function sum(){
  var arr = Array.prototype.slice.call(arguments);
  return arr.reduce(function(pre, cur){
    return pre + cur;
  });
}
console.log(sum(1,2,3,4));
 
// ES6
const sum1 = (...args) => {
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum1(1,2,3,4));
 

 ES5에서 매개변수를 지정하지 않아도 arguments라는 프로퍼티가 함수에 자동으로 생성되어 사용가능 했었으나 화살표 함수에는 arguments대신 args를 사용합니다. 매개변수부분에 rest 파라미터(...)을 사용하여 가변인자 함수 내부에 배열로 전달할 수 있습니다.

자신만의 this를 생성하지 않음(핵심)

화살표 함수는 자신을 포함하는 외부 scope에서 this를 계승받습니다. 즉 화살표 함수는 자신만의 this를 생성하지 않습니다(Lexical this)

화살표 함수의 등장 이전 즉 ES5까지는 모든 새로운 함수를 정의하면 각각의 this가 존재했습니다.

function Person() {
    // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
    console.log(this);
 
    setTimeout(function growUp() {
        // 비엄격 모드에서, growUp() 함수는 `this`를
        // 전역 객체로 정의하고, 이는 Person() 생성자에
        // 정의된 `this`와 다름.
        console.log(this);
    }, 1000);
}
 
var p = new Person();

이 소스에서 this는 window로 바인딩이 되겠죠

setTimeout으로 호출된 growUp 함수의 this객체가 window로 바인딩되어 Person의 this와 growUp의 this는 서로 다른 객체입니다. 이러한 문제를 해결하기 위해 아래와 같이 작성합니다.

function Person() {
    console.log(this);
    var that = this
 
    setTimeout(function growUp() {
        console.log(that);
    }, 1000);
}
 
var p = new Person();

this를 변수에 저장해서 해결하거나 bind()함수를 통해 this를 바인딩해서 해결할 수 있습니다. 지금까지 ES5에서 사용하던 방법을 알아보았다면 화살표함수에서는 어떻게 사용하는지 알아보겠습니다.

function Person() {
    console.log(this);
 
    setTimeout(() => { console.log(this) }, 1000);
}
 
var p = new Person();

화살표 함수는 자신의 this객체를 생성하지 않기 때문에 위와 같이 사용하지 않아도 this를 사용할 수 있습니다.