FUNCTIONS - Arrow Functions

출처 Nomadcoders ES6의 정석

화살표 함수(Arrow Function)는 기존의 함수에서 조금 변형된 함수이다.

화살표 라고 하는것은 "=>"를 지칭하며, 화살표를 사용하여 함수를 표현한다.

var와 let,const처럼 아예 대체가 되는것이 아닌 선택지가 하나 더 늘어난 것이라 생각하면 될 것같다.

const names = ['kims','practice','poppy']

function addHeart(item){
  return item + "❤"
}

const hearts= names.map(addHeart)

console.log(hearts)

위 소스는 기존의 우리가 흔히 알고 있는 함수를 사용하는 방식이다.
좀 더 좋은 예시를 보기위해 익명함수를 사용하는 것으로 조금 수정해보겠다.

const hearts= names.map(function (item){
  return item + "❤"
})

map은 배열의 각 아이템에 대하여 함수를 호출 후 결과를 배열형태로 반환하는 메서드이다.
위의 예시처럼 익명함수를 사용할 경우 불필요한 텍스트가 많이 있다고 생각이 들 수 있다.

좀 더 개선할 수 없을까 라는 생각을 통해 만들어진게 우리가 말하는 화살표 함수이다.
그럼 위의 코드를 화살표 함수형태로 수정해보겠다.

//기존의 익명함수
const hearts= names.map(function (item){
  return item + "❤"
})
// 익명화살표함수
const hearts= names.map(item=>{
  return item + "❤"
})

코드가 훨씬 간결해진것을 확인할 수 있다. 인자가 복수라면 소괄호()를 사용하여야 하지만 하나라면
굳이 소괄호를 써주지 않아도 된다. 그리고 화살표 함수의 implicit return 이라고하는 또 하나의 특징이 있다.

위의 작성된 코드의 return을 살펴보자. 중괄호로 감싸주고 return 키워드로 명시해주고 있다.
화살표 함수에서는 간단한 코드의 경우 이 마저도 축약할 수 있다.

//return 명시
const hearts = names.map(item=>{
  return item + "❤"
})

//implicit return
const hearts = names.map( item => item + "❤" )

이처럼 함수의 return이 필요할 때 {}와 return을 사용하지 않고도 같은줄에 있을때 return을 하겠다 라는것을 implicit return 라고한다.

정리하면서 유형별 함수표현을 살펴보자.

//기존의 함수
function hearts(item,index){
    console.log(index+"번째 순서입니다.")
  return item => item + "❤"
}

//화살표 함수
const hearts = (item,index) =>{
    console.log(index+"번째 순서입니다.")
  return item => item + "❤"
}
//인자가 하나일때
const hearts = item => {
	return item => item + "❤"
}
//implicit return
const hearts = item => item + "❤"

//익명 화살표함수와 인자가없을때
() => "❤"