TIL 34일차_화살표함수

About Arrow Function

• 화살표 함수는 항상 익명함수이다.
• 화살표 함수는 메소드 함수가 아닌 곳에 표현하는 것이 가장 적합하다.
• 따라서 생성자로서 사용할 수 없다.

화살표 함수라는 함수표현식이 생긴 2가지 이유

1. 짧은 함수를 표현하기 위해서

화살표함수를 상용하면 짧은 함수를 간략하고 간단하게 표현할 수 있다.

2. this를 바인딩하지 않기 위해서

화살표 함수가 나오기 전까지 모든 새로운 함수는
어떻게 그 함수가 호출되는지에 따라 자신의 this 값을 바인딩했다.

• 함수가 생성자인 경우: 새로운 객체
• 엄격모드 함수호출의 경우: undefined
• 함수가 '객체메서드'로서 호출된 경우: 문맥 객체

이러한 this의 바인딩은 객체지향 스타일로 프로그래밍을 할 때 많은 어려움을 준다.

function Person() {
  // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
  this.age = 0;

  setInterval(function growUp() {
    // 비엄격 모드에서, growUp() 함수는 `this`를
    // 전역 객체로 정의하고, 이는 Person() 생성자에
    // 정의된 `this`와 다름.
    this.age++;
  }, 1000);
}

let p = new Person(); //Person {age: 0} 

화살표함수가 없을 때에는, 이문제를 this값을 폐쇄할 수 있는 비전역변수에 할당하여 해결하였다.

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // 콜백은  `that` 변수를 참조하고 이것은 값이 기대한 객체이다.
    that.age++;
  }, 1000);
}

let p = new Person(); //Person {age: 0부터 1초마다 1씩증가}

반면 화살표함수는 자신의 this가 없다.
대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용된다.
때문에 현재 범위에서 존재하지 않는 this를 찾을 때,
화살표 함수는 바로 바깥 범위에서 this를 찾는것으로 검색을 끝내게 된다.

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this|는 Person 객체를 참조
  }, 1000);
}

let p = new Person(); //Person {age: 0부터 1초마다 1씩증가}

참고: mdn 화살표함수