Arrow Function

ES6 = ECMA Script 2015

ES 는 ECMA Script의 줄임말 인데요, 그럼 ECME Script는 무엇일까요? ECMA Script 는 JavaScript를 표준화, 규격화 시키기 위해서 만들어졌습니다.

ECMA Script is a (ECMAScript (or ES) is a scripting-language specification standardized by Ecma International)

현재는 ES10 버전까지 나왔지만 가장 주로 쓰이는 것은 2015년에 나온 ES6 입니다.

유용한 기능이 많이 있는 ES6! 그 중에서도 가장 많이 쓰이는 arrow function에 대해서 알아보겠습니다.

//ES5
function (){
}

//ES6
() => {}

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

이름이 있는 함수로 볼까요?

// ES5
function greeting(){

}

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

//호출할 때
getName()

ES6 에서는 함수를 gretting이라는 변수에 저장했습니다. 사실 함수 또하나 변우세 저장할 수 있는 하나의 식 입니다. 그래서 ES5때도 함수를 변수에 저장 할 수 있었습니다.

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

// 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 getName = name => {return name};
const getName= name => name ;

또 다른 예시를 볼까요?

// ES5
function getFullName(firstName, lastName){
  return firstName + lastName
  }
  
// ES6
const getFullName = (firstName, lastName ) => firstname + familyName;