자바스크립트 ES6 '=>' 화살표 문법 (Arrow function)

안녕하세요.

새해 첫글 이네요.  2019년 다들 새해복 많이 받으시길 바랍니다. ^^

오늘은 간단하게 자바스크립트 '=>'로 된 문법에 대해 알아보도록 하겠습니다.

먼저 '=>' 해당 문법의 경우는 화살표 함수(Arrow function) 라고 부릅니다.

간단히 자바스크립트에 대해 이야기를 하고 가도록 하겠습니다.

자바스크립트? ECMAScript?

넷스케이프사에서 만든 브라우저에서 동적인 요소를 구현을 위해 1995년에 개발된 스크립트가 '자바스크립트' 입니다.

그렇다면 여기서 왜 자바스크립트가 중요한지 말씀을 드리겠습니다.

자바스크립트를 다른 웹브라우저에서 지원을 받기 시작하면서, 표준 규약이 필요하였습니다. 그것을 ECMA국제기구에서 하였구요.

그렇게 됨으로써, ECMAScript가 탄생하게 되었습니다.

현재는 버전이 업그레이드 되면서 2015년에 'ECMAScript 6' 이 되었고 'ES6' 라고 부르고 있습니다.

화살표 함수는 ES6의 기능으로써 가끔 API나 예제를 살펴볼때 등장하여 당황스럽게 만들 수 도 있습니다.

그렇다면 '=>' 화살표함수(Arrow function)와 같은 뜻, 동작을 하게 되는 문법을 알아보겠습니다.

화살표 함수 (Arrow function)

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
 
console.log(materials.map(material => material.length));

모질라 문서에서 화살표 함수 예제를 가져왔습니다.

예제 참고 링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this

결론부터 말씀을 드리면 화살표 함수는 함수 표현식 function(meterial) 과 같습니다.

위의 예문의 결과문을 확인을 해본다면 

각 배열의 길이 값들이 재배열되어 아웃풋으로 출력이 됨을 확인할수 있습니다.

그럼 위 문장을 평소에 많이 보단 문장으로 변경을 해보겠습니다.

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
console.log(materials.map(function(material){ return material.length }));

결과값은 동일하게 출력이 됩니다.

결론적으로, 화살표 함수는 function() { return value };를 간단하게 '=>' 로 표기할수도 있습니다.

더 추가적인내용은 위에 예제참고로 올려놓은 링크에서 확인 하실수 있습니다.

하지만, 지원되는 브라우저를 잘확인하시고 사용하셔야 합니다.

아래에 지원되는 브라우저 목록을 확인하시고 사용하시면 될것 같습니다.

지원하는 브라우저

• Chrome (v. 45+)
• Firefox (v. 22+)
• Edge (v. 12+)
• Opera (v. 32+)
• Android Browser (v. 47+)
• Opera Mobile (v. 33+)
• Chrome for Android (v. 47+)
• Firefox for Android (v. 44+)
• Safari (v. 10+)
• iOS Safari (v. 10.2+)
• Samsung Internet (v. 5+)
• Baidu Browser (v. 7.12+)

지원하지 않는 브라우저

• IE (through v. 11)
• Opera Mini (through v. 8.0)
• Blackberry Browser (through v. 10)
• IE Mobile (through v. 11)
• UC Browser for Android (through v. 11.4)
• QQ (through v. 1.2)