ES6 화살표 함수 (arrow function expression)

October 21, 2020

ES6에서는 익명함수를 표현하기 위해 화살표 함수(Arrow function) 표현식을 지원한다. 기존에는 아래와 같이 함수를 선언 하였다.

var coffee = function (americano, espresso) {
  var cart = americano * espresso
  return cart
}

var result = coffee(10, 20)
console.log(result) // 200

위와 같은 함수를 ES6 화살표 함수(Arrow function) 을 사용하면 아래와 같이 간결하게 선언할 수 있다.

let coffee = (americano, espresso) => {
  let cart = americano * espresso
  return cart
}

var result = coffee(10, 20)
console.log(result) // 200

즉 function 이 생략되고 => 기호가 그 자리에 추가 된다. 또한 아래와 같이 구문이 하나밖에 없으면 {} 기호를 생략할 수 있다.

let coffee = (americano, espresso) => americano * espresso
var result = coffee(10, 20)
console.log(result) // 200

return 을 생략한 것으로서, return americano * espresso 와 같다. 만약, 화살표 앞에 줄을 분리하면 SyntaxError 가 발생 한다.

let coffee = (americano,espresso) = > americano * espresso; // SyntaxError

파라미터가 하나이면 소괄호 ()를 제외하고 해당 파라미터만 작성이 가능하다.

let coffee = americano => americano * 20
var result = coffee(10)
console.log(result) // 200

파라미터가 없는 경우, 소괄호 () 만 작성한다.

let coffee = () => 10 * 20
var result = coffee()
console.log(result) // 200

Arrow function은 IE환경에서 아직 제공하지 않는다.

화살표 함수(Arrow function) 브라우저 호환성

사용할려면 babel 을 사용해야 하는데 babel 은 다음에 자세히 알아 보도록 하겠다.