Arrow Function

• 함수 표현식을 축약한 형태로 표시
• return을 생략할 수 있다.
  • 이 때, 중괄호대신 소괄호를 사용한다.

  let multiply = function (x, y) { return x * y; }

    let multiply2 = (x, y) => { return x * y; }
    let multiply3 = (x, y) => (x * y);
    let multiply4 = (x, y) => x * y;

• 일반 함수에서 this는 호출할 때 함수가 어떻게 호출되었는지에 따라 this가 다르지만, 화살표 함수는 언제나 상위 스코프의 this를 가리킨다.

This

this는 현재의 실행 컨텍스트이다. 풀어서 말하면 this는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 바인딩되는 객체가 달라지는 객체다.

• 기본적으로 this는 window를 가르킨다.

this의 5가지 패턴

1. Global : window
2. Function Invocation : window, 부모가 window 라서
3. Method Invocation : parent object
   • Method란 객체에 담긴 함수

4. Construction Mode(new 연산자로 생성된 function scope의 this) : 새로 생성된 객체

5. call, apply 호출 : call, apply의 첫 번째 인자로 명시된 객체

Bind

• call/apply 와 다르게 함수를 바르게 실행시키지 않는다.
• this의 값이 바인딩된 함수 자체를 리턴한다.

    function Box(w, h) {
      this.width = w;
      this.height = h;

      this.getArea = function () {
        return this.width * this.height;
      }

      this.print = function () {
        console.log(this.getArea());
      }
    }

    let b = new Box(100, 50);
    b.print();

    // setTimeout(b.print, 1000); // TypeError
    setTimeout(b.print.bind(b), 1000);