JS ArrowFunc

화살표함수(Arrrow Funtion)

• 화살표 함수 표현은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다 그래서 생성자로서 사용할 수 없습니다.
  • this : 어디 컨택스트에 포함됬는지
  • argument : 전달인자의 집합 리스트 형태
  • super : 부모의 프로토타입을 접근
  • new.target : new로 생성여부, 맞다면 undefiend, 아니면 error

• 기본구문

  1. (a, b) => {함수 바디}
  2. (a) => {함수 바디} => 전달인자가 하나면 () 생략가능
  3. ( ) => {함수 바디} => 전달인자가 없으면 () 생략불가
  4. (a=0, b=0) => {함수 바디} => 전달인자 기본값 설정 가능
  5. a => ({foo:bar}) => 객체를 리턴할때는 () 사용

• 특징

  1. 기본 함수형태보다 짧은 함수의 형태

  2. 바인딩 되지 않은 this

     1. 화살표 함수전까지는, 모든 새로운 함수는 자신의 this값을 정의한다.
     2. 화살표 함수는 전역 컨텍스트에서 실행될때 this를 새로 정의하지 않습니다. 대신 코드에서 바깥의 함수(혹은 class)의 this 값이 사용됩니다. 이것은 this를 클로저 값을 처리하는 것과 같습니다.

     //---------------------> 1. 정규 함수 this
     function Person() {
         // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
         this.age = 0
     
         setInterval(function growUp() {
             // 비엄격 모드에서, growUp() 함수는 `this`를
             // 전역 객체로 정의하고, 이는 Person() 생성자에
             // 정의된 `this`와 다름.
             this.age++
         }, 1000)
     }
     
     var p = new Person()
     
     //-----------------------> 2. 화살표함수 this
     function Person() {
         this.age = 0
     
         setInterval(() => {
             this.age++ // |this|는 Person 객체를 참조
         }, 1000)
     }
     
     var p = new Person()

  3. 바인딩 되지 않은 arguments

     1. arguments객체를 바인딩하지 않기 때문에 범위 내 (argument)값만 조회

     var arguments = [1, 2, 3]
     var arr = () => arguments[0]
     
     arr() // 1
     
     function foo(n) {
         var f = () => arguments[0] + n
         // foo 함수 객체 내의 argument객체를 참조하기 때문에 () => n + n 으로 생각하면 된다.
         return f()
     }
     
     foo(1) // 2

  4. 메소드로 사용

     1. this를 가지고 있지 않기 때문에 객체 내에서 다른 값 참조해서 메소드 만들기 편함

     'use strict'
     
     var obj = {
         i: 10,
         b: () => console.log(this.i, this),
         c: function () {
             console.log(this.i, this)
         },
     }
     obj.b() // prints undefined, Window
     obj.c() // prints 10, Object {...}

  5. New 연산자 사용 불가

  6. prototype 속성 사용 불가