본문 바로가기

Javascript/Javascript

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

728x90
반응형

 

 

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);

 

 

728x90
반응형