[ArrowFunction]

1. ArrowFunction란?

function 키워드를 사용해서 함수를 만드는 것보다 화살표(=>)를 사용 간단히 함수를 선언한다. function표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않는다. 항상 익명 함수이고 메소드가 아닌 곳에 가장 적합하다.

function test (number) {
	console.log('test');
};
//위의 함수를 arrowfunction으로 만들면 아래와 같다.
const test = (number) => { console.log('test') };

2. 매개변수 지정 방법

매개변수가 없을 경우

() => { console.log("매개변수없는경우"); }

매개변수가 한 개인 경우 : 소괄호 생략가능

x => { console.log(x); }

매개변수가 여러 개인 경우 : 소괄호 생략불가

(x, y) => { console.log(x+y); }

3. 함수 몸체 지정 방법

single line block : 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return

x => x * x

객체 반환 : 소괄호사용

() => ({ a: 1 })

multi line block

() => {
  const x = 10;
  return x * x;
};

4. this

일반함수와 화살표함수의 가장 큰 차이점은 this이다.
일반 함수의 this는 이곳을 클릭해서 참고.

1) 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. arrowfunction에서 this는 일반인자나 변수와 동일하게 취급이 되기 때문이다.

2) 화살표 함수의 this 언제나 상위 스코프(컨텍스트)의 this를 가리킨다.(Lexical this)

3) call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

4) 화살표 함수로 메소드를 정의하는 것은 피해야 한다. 그냥 메소드로 arrowfunction을 사용하면 상위 컨텍스트를 this의 값으로 지정되어 부모object를 this에 바인딩이 되지 않기 때문에 메소드를 위한 단축 표기법인 ES6의 축약 메소드 표현을 사용하는 것이 좋다.

const person = {
  name: 'Lee',
  sayHi() {
    console.log(`Hi ${this.name}`);
  }
};

person.sayHi(); // Hi Lee

5) 화살표 함수로 정의된 메소드를 prototype에 할당하는 경우도 피해야 한다. 메소드와 같은 이유로 일반 함수를 적용해야한다.

6) 생성자 함수로 사용할 수 없다. arrowfunction은 prototype프로퍼티를 가지고 있지 않다.

7) addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.

ArrowFunction에서this출처: https://poiemaweb.com/es6-arrow-function