[JS] ES6 (ECMA Script 2015) - arrow function

 

ES6

 

ES ?

ECMA Script의 줄임말이다.
Javascript를 표준화 시키고 규격화하기 위해 탄생했다.
현재는 ES10까지 나왔으나 주로 쓰이는 것은 ES6이다.

 

ES6 ?

6번째 ES라는 뜻이다. 2015년에 처음 등장해 ECMA Script 2015라고도 불린다.

ES5 이하 명세에서 문제 되었던 부분들이 ES6에서 많은 부분 해결이 되었고 다양한 기능들이 추가되었다.
React, Vue 등의 라이브러리들이 개발 환경을 ES6로 바꾸다보니 ES6가 더 많은 관심을 갖게 되었다.

즉, ES6는 프로그래밍 언어가 아닌 스크립트 언어에 대한 표준 및 규격이다.

 

 

arrow function

기본 형태

//ES5
function() {}

//ES6
() = {}

 

 

이름이 있는 함수

//ES5
function getName() {}
//or
const getName = function(name, age) {}

//ES6
const getName = () => {}
//or
const getName = (name, age) => {}

 

 

인자가 하나일 때

//ES5
const getName = function(name) {}

//ES6
const getName = (name) => {}
const getName = name => {}

인자가 하나일때 매개 변수 자리인 소괄호가 생략 가능하다.
그러나 두개 이상일 때는 소괄호가 꼭 있어야 한다.

 

 

함수의 실행 내용 없이 return만 할 때

//ES5
function getName(name) {
  return name;
}

//ES6
const hi = name => { return name };
const hi = name => name;

함수의 실행 내용이 없고 return만 한다면 중괄호, return 키워드 생략이 가능하다.

 

 

호출 방법은 동일하다.

getName();