ES6알아보기 04 - Arrow Functions - Hello, world! I'm Yongdeok An

이번에는 ES6에서 새롭게 추가된 Function의 선언방법의 대해서 알아보겠습니다.

// ES5의 기존의 선언방법
function foo(attr1, attr2) {
  console.log('Declare function');
};

// ES6에서 새롭게 추가된 선언방법
var bar = (arrt1, attr2) => {
  console.log('declare function');
};

위와 같이 서두의 function 부분없이 인수와 대괄호 사이의 => 화살표로 선언 될 수 있습니다. 심플하고 직관적이여서 저도 거의 이 방식을 사용하고 있습니다. 기능적으로는 기존의 선언방식과 거의 차이가 없습니다. 제가 알고 있는 유일한 차이는 함수 내부에서 this 의 컨텍스트를 다루는 방식이 다르다는 점 입니다. 이후에 this 를 가지고 es5 와 비교하는 글도 올려볼까 합니다.

몇가지 선언 방식을 더 다루어 보도록 하겠습니다.

// 인수가 하나밖에 없을 경우
var foo = attr => {
  console.log('괄호를 생략할 수 있습니다.');
};

// 인수가 없을경우
var bar = () => {
  console.log('인수가 없을 경우는 반드시 괄호를 넣어야 합니다.');
};

// 한줄로 표현하는 것도 가능합니다.
var baz = (attr) => console.log(attr);
// 한줄로 표현할 경우에는 대괄호를 생략할 수 있습니다.

// callback함수로의 화살표 함수
var arr = [1,2,3,4];

arr.forEach(v => {
  console.log(v * 2);
});