Javascript 화살표 함수

화살표 함수 표현법은 => 오퍼레이터를 사용하기 때문에 이런 이름이 붙은 것 같다. 문법은 생략하고 일단 예제를 보자.

let add = (a, b) => {
    return a + b
}

위 코드는 아래와 동일하다고 볼 수 있다.

let add = function(a, b) {
    return a + b
}

참고로 위의 두 코드는 아래와 같이 더 단순하게 구현할 수도 있다.

let add = (a, b) => a + b

즉 단순한 식(expression)만 있을 경우 return 과 중괄호를 생략할 수 있다.

당연하게도 function 을 이용해 클로저를 구현하던 것을 화살표 함수로 그대로 대체할 수 있다.

setTimeout(() => {
  console.log('after a second...')
}, 1000)

확실히 코드가 더 단축되기는 하는데 읽기가 좋은지는 잘 모르겠다.

위에서 언급했던 예를 다시 보자.

(a, b) => a + b

위 코드는 아래처럼 표현할 수도 있다.

(a, b) => (a + b)

괄호로 감싼 것이 뭔가 특별한가 생각할 수도 있는데, 좀 더 복잡한 식을 표현하기 위해 괄호를 사용하는 것과 사실 별 차이는 없다. 다만 차이가 있다면 아래와 같이 표현할 수도 있다는 점이 있다.

(a, b) => (
    a + b
)

이렇게 줄바꿈을 해서 여러 줄의 식을 구현할 경우 유용한 방식이다.

만약 오브젝트를 리턴해야 한다면 어떻게 해야할까?

(v1, v2) => {
    foo: v1,
    bar: v2,
}

불행히도 이 코드는 틀렸다. 당연하게도 중괄호는 함수 본체를 구현할 때 사용하는 문법으로 해석된다.

그런데 이런 단순한 식으로 오브젝트(Object)를 리턴하는 경우에 괄호를 이용할 수 있다.

(v1, v2) => ({
    foo: v1,
    bar: v2,
})

중괄호를 괄호로 감싸면 아주 간단하게 오브젝트를 리턴하는 화살표 함수를 구현할 수 있다.