[Javascript] 화살표 함수(Fat Arrow Function), Babel 사이트(ES6 연습)

오늘은 지난 번 ES6 포스팅 중 var let const 의 차이점에 대해서 포스팅했던 것에 이어서 ES6에서 업데이트된 화살표함수(Fat Arrow Function)에 대해서 포스팅해보겠습니다.

 

- 함수 선언을 화살표로 선언한느 방식인데요. function 키워드를 쓰지 않고 => 키워드로 대체하는 방식입니다.

- 흔히 사용되는 콜백함수(callback)의 문법을 간결화하는데 탁월합니다.

 

var sum = function(a, b) {
	return a + b;
};

위와 같은 기존 함수 표현식을 아래와 같이 변경할 수 있습니다.

// 1.
var sum = (a, b) => {
	return a + b;
};

// 2. 축약버전
var sum = (a, b) => a + b

첫번째 function을 =>으로 대체한 것뿐만아니라 Java8의 람다규칙처럼 return 문만 존재하는 경우 return을 생략할 수 있고, 단일라인으로 구성된 경우 괄호를 제거할 수 있는 간편한 코딩방법입니다.

 

ES6 참조 사이트

ES6 공부하는데에 추가적으로 도움이 될만한 사이트를 소개해드리고자 합니다.

https://babeljs.io/

Babel · The compiler for next generation JavaScript

먼저 ES6에 해당하는 코드를 작성해보시고 ES5 버전으로 바꿔주는 사이트입니다.

 

현재 ES6는 모든 브라우저에서 호환이 적용되는 버전은 아닙니다. 따라서 배포시 ES6를 ES5 문법으로 바꿔주는 라이브러리를 활용해야할텐데요. 

 

위 사이트는 그에 관한 내용도 있으니 한번 참조해보시기 바랍니다.