[JS] 화살표함수

ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해보면 보통 함수 표현식을 축약한 형태로 표시됩니다.

const add = function (x, y) {

  return x + y

}

const add = (x, y) => {

  return x + y

}

화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있습니다. 함수의 본문에 return 문만 있는 경우, 화살표 함수는 return 을 생략할 수 있습니다. 이 때 주의해야할 점은 {} 중괄호 (curly brace) 는 사용하면 안됩니다.

() 소괄호 (parentheses) 를 사용하는 것은 가능합니다. 이는 일반적인 수식에서의 "괄호 치기" 와 동일합니다.

const add = (x, y) => x + y

const add = (x, y) => (x + y) // O, 정상 작동

const add = (x, y) => { x + y } // X, undefined 리턴

만일 함수 내의 표현식이 두 줄 이상일 경우에는, return을 생략하기 보다는 중괄호와 return을 명시적으로 쓰는 것이 좋습니다.

화살표 함수는 클로저를 표현할 때 더 유용합니다.

const adder = function(x) {

  return function(y) {

      return x + y

    }

  }

adder(5)(7) // 12

function 키워드만 없애본다면 아래와 같습니다.

const adder = (x) => {

  return (y) => {

    return x + y

  }

}

위의 식의 return을 생략하면 아래와 같습니다.

const adder = x => y => x + y

이처럼 클로저는 연속된 여러 개의 화살표로 표시할 수 있습니다.

클로저를 연속된 여러개의 화살표 함수로 표현한 다른 예제입니다.

const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`

htmlMaker('div')('code states')

//'<div>code states</div>'

const liMaker = htmlMaker('li')

liMaker('1st item')

//'<li>1st item</li>'

liMaker('2nd item')

//'<li>2nd item</li>'

Wooyoung