ES6 화살표 함수 (arrow function expression)

October 21, 2020

ES6 화살표 함수 (arrow function expression)

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 은 다음에 자세히 알아 보도록 하겠다.


Written by Jeon Byung Hun 개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트