[Javascript] 쉼표 연산자(Comma Operator)

 

 

쉼표 연산자는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 피연산자의 값을 반환한다.

 

 

위 내용은 쉼표 연산자에 대한 MDN의 정의이다. 하지만 이렇게만 봐서는 잘 모르겠으니 조금 풀어서 알아보도록 하자.

 

 

먼저 아래의 함수 예시를 보자. 흔히 볼 수 있는 평범한 함수이다.

let myFunc = (value1, value2) => {
  value1 += value2;
  value1 += value2;
  return value1;
}

myFunc(1, 2);  // 5

 

이제 이 예시를 쉼표 연산자를 사용하여 바꿔 보려 한다. 위 함수에서 중괄호를 없애고 괄호와 쉼표(,)만으로 표현할 수 있다. 작동 원리는 = (a, b, c) 와 같이 작성할 경우 1)  a 실행, 2) b 실행, 3) c return이다.

 

 

따라서 value1 += value2가 두 번 실행되고 value1을 return하여 실행의 결과로 5가 나온 것이다(1+=2, 3+=2, 5).

 

let myFunc = (value1, value2) => (value1 += value2, value1 += value2, value1);

myFunc(1, 2);  // 5

 

 

 

 

---

 

 

쉼표 연산자의 활용

 

쉼표 연산자는 주로 여러 동작을 한 줄에서 처리하려는 복잡한 구조에서 활용할 수 있다. 단, 자바스크립트의 연산자 우선순위 중 가장 낮은 순위를 가지기 때문에 먼저 수행하기 위해서는 괄호를 사용해야 한다.

let x, y, z;
x = 1, y = 2, z = 3;  // 3
console.log(x);  // 1

let a, b, c;
a = (b = 5, c = 6);  // 6
console.log(a);  // 6

 

 

또한 자주 쓰이는 map()이나 reduce()에서도 요긴하게 쓰일 수 있다.

let array = [1, 2, 3, 4, 5];

let testReduce = array.reduce((acc, cur) => {
  acc += cur;
  return acc;
}, 0);

let testComma = array.reduce((acc, cur) => (acc += cur, acc), 0);

console.log(testReduce);  // 15
console.log(testComma);  // 15

 

보이는 바와 같이 간단한 실행 코드를 쉼표 연산자로 표현하면 코드 라인 수를 확연히 줄일 수 있다는 장점이 있다.

 

 

 

쉼표 연산자는 코드의 라인 수를 한 줄로 줄일 수 있다는 장점이 있지만 가독성에서는 그리 좋지 못한 문법이다. 그럼에도 이러한 스타일의 자바스크립트 코딩을 하는 개발자들이 꽤 되기에 권장되지는 않지만 코드를 읽기 위해 일단 알아두는 것을 권장한다.