ES6(ECMA Script 6)의 큰 특징 중 하나인 화살표 함수(Arrow functions)에 대하여 간략하게 알아봅니다.

[참고] 화살표 함수?
화살표 함수는 => 처럼 화살표 기호를 사용하여 함수를 만들 수 있는 방법으로 기존의 CoffeeScript의 문법에서 사용되던 함수 작성 문법입니다. 




# ES 6 화살표 함수의 특징


ES 6 부터는 함수를 구현할 때 일반적인 함수 구현 방식과 달리 화살표 함수를 사용할 수 있게 되었습니다. 화살표 함수는 함수를 구현하는데 사용되는 함수 구문으로 기능적인 측면에서는 대부분이 동일합니다. 그 외 문법적 차이를 포함한 몇 가지 화살표 함수만의 차이점을 가지고 있습니다. 먼저 간단한 작성 문법을 알아보겠습니다.
// 기존의 자바스크립트 Function 구문
function myFunc() {
};

// ES 6의 화살표 함수 구문
myFunc = () => {
};

위 두 문법은 myFunc() 이라는 동일한 함수를 만들어냅니다. 다만 ES 6의 화살표 함수는 기존 방식과 다른 특징을 가지고 있는데요 아래와 같은 특징이 있습니다.

ES 6 화살표 함수의 특징은?
- New 키워드를 사용한 생성자 함수 사용불가
- 한 줄 함수 작성 문법이 가능함
- this 키워드는 자기 자신의 함수를 this로 가지지 않고 외부 scope의 this를 계승함

위 내용은 대표적인 차이점입니다. 아래에서 자세히 알아보면...


! New 키워드를 사용한 생성자 함수 사용불가
가장 먼저 함수 내부에 New 키워드를 사용할 수 없습니다. 즉 생성자 함수를 만들 수 없는데요 ... 아래와 같이 생성자를 만들 경우 에러가 발생하게 됩니다.
myConstructor = (name) => {
  this.name = name;
}
yourConstructor = new myConstructor('webisfree');

// myConstructor는 생성자가 아니라는 에러가 발생함

즉 화살표 함수는 생성자를 만들 수 없습니다.


! 한 줄 (one line) 함수 작성하기
한 줄 함수를 쉽게 작성할 수 있습니다. 이 때 {} 기호는 생략 가능합니다.
myConstructor = (name) => this.name = name;

더 간단하게 작성되었습니다.


! this 키워드의 쓰임새 차이점
기존의 방식과 새로운 ES 6의 차이점으로 함수 내부에서의 scope 영역의 this가 다를 수 있습니다. 예를들어 아래와 같이 내부함수에서 this를 사용하는 경우 self 또는 _this 등의 키워드를 사용하여 클로저를 활용해 외부 함수의 scope의 this에 접근할 수 있었습니다. 
function getName() {
  var self = this;
  return function() {
    this.result;
  }
};

ES6의 화살표 함수는 클로저의 활용 없이 this 키워드가 바로 외부 함수의 this 값을 참조할 수 있게되었습니다.
getName = () => {
  return function() {
    this.result;
  }
};

this 쓰임에 있어서도 더 쉽고 편하게 구현할 수 있게되었죠. 하지만 this가 달리 사용되면서 주의할 부분도 있습니다. 바로 this의 값을 변경하기 위해서 apply(), call(), bind()를 사용할 수 없습니다. 이런 이유로 함수 내부에 apply(), call(), bind()를 사용해 this 값을 변경해야한다면 화살표 함수를 사용하지 말아야합니다.


이런 특징을 가지는 화살표 함수(Arrow Functions)를 사용하면 가독성도 뛰어나고 더 간결하게 나타낼 수 있어 개발에도 효율적인 방법입니다.



! ES6 화살표 함수 사용 예제보기

간략하게 예제를 하나 만들어보겠습니다. 아래 예제는 이름을 반환하는 getName() 이름의 함수를 만드는 예제입니다.
getName = (name) => {
  return name;
};

getName('Webisfree');
// 'Webisfree' 출력함

단순하게 네임값을 인자로 넘기면 입력된 인자 값을 반환하여 출력하는 함수입니다.

기본적인 연산도 만들 수 있겠죠. 만약 두 값을 더하는 예제를 만든다면?
getName = (a, b) => {
  a + b;
};

getName(1,2);
// 3을 출력함


매우 간단한 예제를 만들어 보았습니다.