간단히 화살표함수 알아보기

안녕하세요. 

오늘은 화살표함수(arrow function expression)에 대해서 알아보겠습니다.

화살표함수란?

• 화살표함수 표현은 일반 함수 표현보다 간결하게 함수를 표현할 수 있는 방식입니다.

화살표 함수의 특징

• function 표현에 비해 구문이 짧습니다.
• 나머지 매개변수 및 기본 매개변수가 지원 됩니다.
• 화살표 함수는 자신만의 this를 생성하지 않습니다.
• 화살표 함수 표현은 메소드 함수가 아닌 속에 적당합니다. 그래서 생성자로서 사용할 수 없습니다. 
• 화살표 함수는 항상 익명입니다.

화살표함수 예제

기존 방식

var a = function(user) {

return user.age > 20;

}

화살표함수를 적용한 방식

1. 기본

var a = (user) => {

return user.age > 20;

}

2. 한줄일 경우 { } 생략 가능

var a = (user) => return user.age > 20;

3. 한줄일 경우 return 생략 가능

var a = (user) => user.age > 20; 

4. 변수가 없을 경우

var a = () => {

// TODO

}

5. 변수가 여러개일 경우

var a = (a, b) => {

// TODO

}

6. 객체를 반환해야 하는 경우

var a = (user) => { value: "123" } (X)

var a = (user) => ({ value: "123" }) (O)

7. 화살표함수는 자신만의 this를 생성하지 않습니다.

-> 화살표 함수전까지는, 모든 새로운 함수는 자신의 this 값을 정의했습니다. 
(아래 예제와 같이 화살표 함수 표현은 메소드 함수가 아닌 속에 적당합니다.)

function Person(){
  this.age = 0;

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

var p = new Person();

8. 화살표 함수는  파라메터와 화살표 사이에 개행 문자를 포함 할 수 없습니다.

var func = ()
           => 1; // SyntaxError: expected expression, got '=>'

9. 브라우저 호환성

참조

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98
• https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/