[Javascript] Arrow Function(화살표 함수)

 

 

Arrow Funcrtion의 특징

• 자바에서의 람다와 유사한 문법
•  es6문법 중 가장 많이 쓰이는 문법으로 코드의 가독성을 높여줌
• this에 대해서 다른 범위 스코프를 가지고 있어 기존의 함수에서의 this의 불편함을 근본적 해결
• return 키워드 생략 가능

일반 함수 문법

function add(var1, var2) {
    return var1 + var2;
}

 

화살표 함수 문법

//리턴 키워드 생략 가능
const addArrowFunction = (var1, var2) => var1 + var2

console.log(addArrowFunction(1, 2));

 

기존 함수에서의 this 사용

• 일반함수의 경우 this로 받게 된다면 해당하는 범위가 prototype의 this가 아닌 function 내부의 this를 받는다.
• 즉 api.prototype의 this를 받지 못해 아래와 같이 self라는 변수를 사용하여야 한다.

API.prototype.get = function (resource) {
    var self = this;
    return new Promise(function (resolve, reject) {
        http.get(self.uri + resource, function (data) {
            resolve(data);
        });
    });
};

일반 function에서의 this

arrow Function에서의 this 사용

해당 함수를 arrow Function으로 바꾸면 this문제를 해결할 수 있다.

화살표 함수는 기존의 함수의 this의 범위와 달리 글로벌 객체의 this를 사용하기 때문이다.

// Arrow Function으로 변경
API.prototype.get = (resource) => {
    new Promise((resolve, reject) => {
        // 기존 함수의 this의 범위와 달리 글로벌 객체의 this를 사용함
        http.get(this.uri + resource, (data) => {
            resolve(data);
        });
    });
};

화살표 함수 this 사용

내부 Closure함수 또한 하살표 함수로 표현할 수 있다.

 

내부 Closure 함수 (일반 함수)

//es6 이전 버전 문법
var getDiscount = function getDiscount(rate) {
    return function (price) {
      return rate * price;
    };
  };

내부 Closure 함수 (화살표 함수)

const getDiscount = rate => price => rate * price;


// 첫 번째 파라미터로 감
const getTenpercentOff = getDiscount(0.1);
// 이후로는 계속 금액만 선언 가능
getTenpercentOff(10000);