티스토리 뷰

Daylogs/Javascript

ES6: Arrows

ohgyun 2015. 5. 11. 22:41
발생일: 2015.05.10

키워드: arrow function expression, fat arrow function

내용:

ES6에서는 익명함수를 화살표(`=>`)로 축약해 표현할 수 있다.
Arrow Function Expression 또는 Fat Arrow Function 이라고 부르며, 문법은 아래와 같다.

([param] [, param]) => {
    statements
}

param => expression

param: 매개변수, 컴마로 구분하고 괄호로 싸서 호출한다. 파라미터가 한 개인 경우엔, 괄호를 생략해도 좋다.
statements or expression
  여러 구문은 중괄호(brace, { })로 감싸준다. 한 개의 표현식이라면 중괄호를 생략해도 된다.


코드 샘플을 보면 이해하기 쉽다.

// 한 줄짜리 표현식
let square = x => x * x;
square(3); //-> 9

// 중괄호를 생략한 한 줄 표현식은 중괄호와 함께 리턴한 것과 동일하다.
let square2 = (x) => { return x * x; };
square2(3); //-> 9

// 파라미터로 전달하는 경우, 훨씬 간결하게 표현할 수 있다.
setTimeout(() => {
  console.log('delayed');
}, 100);

let list = [1, 2, 3, 4];
  list.filter(n => {
    return n % 2 === 0;
  }); //-> [2, 4];
list.reduce((sum, n) => sum + n, 0); //-> 10

// 즉시실행함수는 아래와 같이 표현할 수 있다.
(() => {
  console.log('foo');
})();

// `=>`로 정의한 함수 내의 `this`는 현재 객체를 가리킨다.
let obj = {
  getThis: function () {
    var getter = () => this;
    return getter();
  }
};
obj.getThis() === obj; //-> true

// `this`는 lexical 범위 내의 `this`를 가리키므로,
// 아래 코드처럼 객체의 메서드에서 `this`를 사용하면 객체 선언을 감싸고 있는 함수의 `this`를 가리키게 된다.
(function () {
  this.name = 'outer';
  var inner = {
    name: 'inner',
    getName: () => {
      return this.name;
    }
  };
  inner.getName(); //-> 'outer'
}());


// Arrow Function 내에서 'use strict'; 구문을 정의한 경우,
// strict mode 의 `this`는 무시된다.
let obj = {
  getThis: function () {
    var getter = () => {
      'use strict';
      return this;    
    };
    return getter();
  },
  getThis2: function () {
    var getter = function () {
      'use strict';
      return this;
    };
  }
};
obj.getThis() === obj; //-> true
obj.getThis2() === undefined; //-> true



호환성



브라우저 중에서는 2015년 5월 현재 파이어폭스에서만 지원한다.

반응형
댓글
공지사항