JavaScript - arrow function

ES6 = ECMA Script 2015

 

ES는 ECMA Script의 줄임말이다. ECMA Script는 JavaScript를 표준화시키려고 탄생했다. 

JavaScript의 역사는 점점 깊어지고, 문법의 보완이 필요하면서 버전별로 문법을 확장시키고 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES가 명세를 확정해왔다.

즉, ECMA Script는  JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것이다.

현재는 ES10 버전까지 나왔지만, 주로 쓰이는 것은 ES6이다. 6은 버전 이름이고 ES2015라고도 한다.(2015년에 ES6 최종 나왔기 때문.)

 

---

arrow function

 

이 전에 배웠던 function을 표현하는 방법과 완전히 다르지만, 생김새만 바뀐 것이다.

 

//ES5
function() {}

//ES6
() => {}

 

이름이 없는 함수의 기본적인 표현이다. ES6에서는 function이라는 키워드가 빠지고 소괄호만 남았다. 그리고 =>(arrow)가 추가되었다.

이름이 있는 함수를 만들 때는 아래와 같다.

 

//ES5
function getName() {}

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

 

호출할 때는 둘다 같다.

 

getName()

 

ES6는 함수를 getName이라는 변수에 저장했다. 사실 function(함수)는 변수에 저장할 수 있는 하나의 식이다. 그래서 ES5일 때도 마찬가지로 변수에 저장할 수 있다.

 

//ES5
//Function Declaration
function getName() {}

//ES5
//Function Expression
const getName = function() {}

 

쓰임새가 다를 때가 있지만, 함수를 정의할 때는 편한 방법으로 선택하면 된다.

 

인자를 받는 방법은 아래와 같다.

 

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

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

 

인자가 하나일 때는 소괄호 생략이 가능하고, 인자가 두 개일 때는 생략할 수 없다.

 

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

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

 

return 하는 방법은 아래와 같다.

 

//ES5
function hi(text) {
  text += '하세요';
  return text;
}

//ES6
const hi = text => { 
  text += '하세요';
  return text 
};

 

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

 

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

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

 

중괄호와 return문이 생략될 경우, 화살표 오른쪽에서는 리턴될 "값"만 쓰여야 한다. 다른 코드가 들어가면 안 된다.

 

//ES5
function getFullName(first, family) {
  return first + family;
}

//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;