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

쉼표 연산자란

MDN에서는 다음과 같이 정의한다.

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

쉼표 연산자는 주로 여러 동작을 하나의 줄에서 처리하려는 복잡한 구조에서 활용할 수 있다.

연산자 우선순위에서 가장 낮은 순위를 가지기때문에 먼저 수행하기 위해서는 괄호를 사용해야 한다.

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

 

 

쉼표 연산자의 활용

for 문

const array = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f'],
    ['g', 'h', 'i'],
];

for (let i = 0, j = 2; i <= 2; i++, j--) {
    console.log(`array[${i}][${j}] = ${array[i][j]}`);
}

위 예제는 2차원 배열의 대각선에 위치하는 요소의 값을 출력하는 코드다.

쉼표 연산자를 사용해서 한 줄에서 두 개의 연산이 실행되고 있다.  (i는 증가, j는 감소)

 

reduce() 메서드

const array = ['apple', 'banana', 'banana', 'orange', 'orange', 'orange'];
const group = array.reduce((acc, cur) => ((acc[cur] = (acc[cur] || 0) + 1), acc), {});

console.log(group); // {apple: 1, banana: 2, orange: 3}

위 예제는 [ic]array[/ic]배열 내 각 값과 빈도를 포함하는 [ic]group[/ic]객체를 만드는 코드다.

쉼표 연산자를 사용해서 [ic]reduce()[/ic] 메서드가 실행될 때마다 빈도수를 카운팅 한 값을 담은 객체 [ic]acc[/ic]를 누적하고 있다.

 

 

정리

• 쉼표 연산자는 각 피연산자를 왼쪽에서 오른쪽으로 평가하고 마지막 피연산자의 값을 반환한다.
• 코드를 줄이는데에 도움이 되지만 가독성을 위해 상황에 맞게 잘 사용해야 할 것 같다는 생각이 든다.

 

 

참고

https://ko.javascript.info/operators

기본 연산자와 수학

https://dongmin-jang.medium.com/javascript-15%EA%B0%80%EC%A7%80-%EC%9C%A0%EC%9A%A9%ED%95%9C-map-reduce-filter-bfbc74f0debd

[Javascript] 15가지 유용한 map, reduce, filter

https://ko.javascript.info/operators

기본 연산자와 수학