[JS/ES6] 화살표 함수 (Arrow function)

화살표 함수 사용법

기존 익명 함수를 만들 때 function () {} 으로 사용했던 것을 화살표 함수를 사용해서 '축약형'으로 나타냅니다.

// 이전 자바스크립트 버전

setTimeout (function() {

console.log('hello world');

}, 1000);

let newArr = [1,2,3,4,5].map(function(value, index, object) {

return value * 3;

});

// ES6 화살표 함수 사용

setTimeout (() => {

console.log('hello world');

}, 1000);

let newArr = [1,2,3,4,5].map((v) => (v*3) );

• 매개변수 지정법
  () => {...} // 매개변수가 없을 때
  x => {...} // 1개
  (x,y) => {...} //여러개
• 함수 몸체 지정법
  x => { return x + x }
  x => x + x // 위와 같음. 함수 몸체가 한줄이면 리턴,중괄호 생략 가능
• 객체 지정법
  () => { return {a : 1};}
  () => ({ a : 1 }) // 위와 같음. 객체 리턴일 경우 소괄호로 묶어준다
• 다중 라인 몸체
  () => {
  const x = 5;
  return x * x;
  }

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

일반 함수의 this

일반 함수에서의 this는 함수를 선언할 시점이 아닌 호출할 때 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다.

생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백함수 포함)의 this는 전역 객체(window)를 가리킵니다.

function Hello(a) {

this.a = a; //생성자 Hello의 인스턴스 객체를 가리키는 this

}

Hello.prototype.helloArray = function (arr) {

return arr.map(function (x) {

return this.a+ ' ' + x; // window 객체를 가리키는 this

});

}

var hello = new Hello('hi');

console.log(hello.helloArray(['Ann', 'Sunny'])); // undefined Ann, undefined Sunny 출력

해결하기 위해 콜백 함수 뒤에 .bind(this) 를 붙여 사용합니다. (다른 방법도 더 있음)

화살표 함수의 this

일반 함수에서의 this는 바인딩하는 객체가 동적으로 결정되지만 화살표 함수에서는 정적으로 결정됩니다.

언제나 화살표 함수의 상위 스코프를 this로 판단합니다.

그렇기 때문에 일반 함수처럼 this를 바인딩 하지 않고 편하게 쓸 수 있습니다.

function Hello(a) {

this.a = a;

}

Hello.prototype.helloArray = function (arr) {

return arr.map(x => `${this.a} ${x}`; // 상위 스코프인 helloArray를 가리키는 this

});

}

또, call, bind, apply를 사용하여 this를 변경할 수 없습니다.

화살표 함수를 사용하면 안되는 경우

• 메소드 정의, 프로토타입에 메소드 할당할 경우 => 메소드를 소유한 객체가 아닌 상위 컨텍스트인 전역객체 window 를 가리키게 된다.
• 생성자 함수로 사용할 경우 => 화살표 함수는 prototype을 갖고있지 않다.
• addEventListener 함수의 콜백 함수 => 화살표 함수를 사용할 경우 전역 객체 window를 가리킨다.

참고

https://poiemaweb.com/es6-arrow-function