Note ≣ 경고: 콤마 연산자와 화살표 함수

간결한 형태의 화살표 함수는 => 뒤에 표현식을 취하기 때문에 일부 프로그래머는 함수에서 할 일이 두세 가지만 있으면 장황한 양식을 사용하지 않기 위해 쉼표 연산자를 사용했다. 쉼표 연산자는 자바스크립트의 이상한 연산자 중 하나이다. 왼쪽 피연산자를 평가하고 결괏값을 버리고 오른쪽 피연산자를 평가하고 그 값을 결과로 취한다.

function returnSecond(a, b) {
    return a, b;
}
console.log(returnSecond(1, 2)); // 2

return a, b의 결과는 b의 값이다.

이것이 화살표 함수와 어떤 관련이 있을까? 부작용이 있는 왼쪽 피연산자의 식을 사용하여 간결한 양식에서 사용하는 식에서 둘 이상의 작업을 수행할 수 있다. “엔트리”를 감싸는 “핸들러” 배열이 있고 핸들러를 unregister 함수에 전달하여 각 엔트리를 변환한 다음 해당 엔트리를 register 함수에 전달하고 결과를 기억한다고 가정해 보자. 전통적인 함수를 사용하면 다음을 수행할 수 있다.

handlers = handlers.map(function(handler) {
    unregister(handler);
    return register(handler.item);
});

자세한 화살표 함수를 사용하여 더 짧게 만들 수 있다.

handlers = handlers.map(handler => {
    unregister(handler);
    return register(handler.item);
});

그러나 일부 프로그래머는 쉼표 연산자를 사용하거나 남용하는 대신 간결한 화살표 함수를 사용한다(하지만 일반적으로 모두 한 줄에 표시된다).

handlers = handlers.map (handler => (unregister (handler), register (handler.item)));

쉼표 식을 괄호로 묶어야 한다(그렇지 않으면 파서는 하나가 아닌 두 개의 인수를 handlers.map에 전달한다고 생각할 것이다). 따라서 이것이 장황한 양식보다 짧은 유일한 이유는 return 키워드 작성을 피하기 때문이다.

이것이 쉼표 연산자의 편리한 사용이나 남용이라고 생각하든, 현업에서 이런 식으로 사용되는 것을 볼 가능성이 높다는 점에 유의하자.