Fall in IT.

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

기타

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

D.Y 2017. 9. 15. 11:22


안녕하세요. 

오늘은 화살표함수(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. 브라우저 호환성




참조


Comments