ES6에서 Arrow Function 사용하기

관련 포스트

JavaScript ECMAScript란?

---

Arrow Function의 특징

• function 표현에 비해 구문이 짧다.
• 자신의 this, arguments를 바인딩하지 않는다.
• 항상 익명 함수로만 사용된다.
• 생성자로서 사용할 수 없다.

Arrow Function 사용하기

매개변수가 없을 때

const func = () => { ... }

매개변수가 1개일 때

const func1 = i => { ... } // 소괄호의 지정 불필요!
const func2 = (i) => { ... } // 소괄호 지정해도 무관!

매개변수가 2개 이상일 때

const func = (x, y) => { ... }

함수 Body

const func = i => { 
  return i * i;
}

한 줄의 구문만 있는 경우

const func = i => i * i; // 중괄호와 return을 생략할 수 있음. i * i 값이 리턴된다.

Arrow Function 호출하기

const add = (a, b) => a + b;
console.log(add(1, 2)); // 3

Arrow Function 콜백 함수로 전달하기

const arr = [1, 2, 3, 4, 5];
const isEven = arr.map((i) => i % 2);
console.log(isEven); // [0, 1, 0, 1, 0]

---

중요 Arrow Function에서의 this

일반 함수에서의 this

JavaScript에서의 this와 this 바인딩

Arrow Function에서의 this

일반 함수에서의 this는 함수가 선언될 때가 아닌, 호출될 때, 그 호출 Context에 따라 동적으로 바인딩된다. 반면에, Arrow Function은 함수가 선언될 때 정적으로 바인딩된다.

Arrow Function에서의 this는 항상, 상위 스코프의 this를 가리킨다.
이를 Lexical this라고 부른다. JavaScript의 Lexical scope 개념과 유사하다.

const me = {
  arr: [1, 2, 3],
  show() {
    function func() {
      console.log(this.arr); // undefined
    }
    func();
  },
  showArrow() {
    func = () => {
      console.log(this.arr); // [1, 2, 3]
    };
    func();
  },
};

me.show();
me.showArrow();

---

Arrow Function을 사용해서는 안되는 경우

메소드 정의로 사용하는 경우

객체의 함수, 즉 메소드로서 정의해서는 안된다. 일반 함수가 객체의 메소드로 정의되는 경우에는 인스턴스 자기 자신을 가리키지만, Arrow Function은 항상 상위 스코프의 this를 가리키므로 사용해서는 안된다.

const me = {
  name: 'Hoon',
  getMyName: () => this.name; // this는 상위 스코프의 this인 window를 가리키게 됨.
}
console.log(me.getMyname()); // undefined

이런 경우에는 ES6에서 제공하는 축약 메소드 표현을 사용하자.

const me = {
  name: 'Hoon',
  getMyName() { return this.name; }
}
console.log(me.getMyname()); // Hoon

prototype의 메소드

생성자 함수

---

참고문서

PolemaWEB