화살표 함수

화살표함수

: ES6 문법으로 함수를 화살표로 간단하게 나타낼 수 있다.

화살표 함수를 이미 잘 알고 있다고 생각했는데, 리액트때 소괄호와 중괄호 생략 할때 많이 헷갈렸었다. 다시 한번 숙지하자

기본적으로 우리는 애로우 함수를 아래의 코드와 같이 작성한다.

let arrowFunc = (singleParameter) => {
  console.log(singleParameter);
}
// 위에서 파라미터를 하나만 받았다. 이 경우 파라미터를 감싸고 있는
// 괄호를 생략해도 된다.(선택사항)
// 예시는 아래와 같다.
let arr = [1,2,3];
let test = arr.map(singleParameter => {
  return singleParameter * 2;
}) // test = [2,4,6] 
//
// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
// 중괄호({})를 생략할 수 있다.
let test = arr.map(singleParameter => singleParameter * 2); 
 // test =[2,4,6]

또 다른 기본문법은 매개변수가 없으면 '괄호를 빈칸으로 남겨둔다'이다.
예)

let arrowFunc = () => {
  console.log('hi world');
} // 'hi world'

위를 짧게 정리하면 아래와 같다

1. 매개변수

     () => { ... } // 매개변수가 없을 경우
      x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
 (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

2. 실행 컨텐스

x => { return x * x }  // single line block
 x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.
 () => { return { a: 1 }; }
 () => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.
 () => {           // multi line block.
  const x = 10;
  return x * x;
 };

화살표 함수에서 this

: 일반 함수를 선언할 때, this는 동적으로 결정이 된다.(= 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.)

그러나 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다.

function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // 여기서 this는 Person 객체를 가르킨다
  }, 1000);
}
var p = new Person();

이렇게 다시 화살표함수를 보았다. 원래 배울때, 화살표함수를 쓰면 this는 window객체를 가르킨다고 알고 있었는데, 다시 보니... 오해한 부분이 있었다.

공식 문서 : MDN