[새로운 기능] comma operator(쉼표연산자)

이번 포스트에서는 comma operator 즉 쉼표 연산자라는 것에 대해 살펴보자.

 

쉼표 연산자

 

사실 쉼표 연산자는 평소에 반복문을 쓰면서 사용해 봤던 녀석이다. 단지 이것을 연산자라고 인식하지 못한 경우가 많을 것이다.

다음은 주어진 문장 str이 회문(Palindrome)인지 판단하는 코드이다.

const str = "소주만병만주소"
let isPalindrome = true;
for(let i=0, j=str.length-1; i<j; i++, j--){
    if(str.charAt(i)!=str.charAt(j)){
        isPalindrome = false;
        break;
    }
}

console.log(isPalindrome?"회문이다":"회문이 아니다.")

 

위의 for 문장에서 초기화 및 증감식 부분에서 , 를 사용하고 있는데 이것을 쉼표 연산자 라고 한다.

comma operator는 단일 표현식이 들어가는 곳에 복수의 표현식을 사용하고 싶은 경우 사용된다. for 문에서도 초기화, 조건식, 증감식에도 원래는 하나의 표현식을 써야 하지만 필요에 따라 여러 가지를 선언할 수 있는 것이다.

 

할당 연산과 쉼표 연산자

쉼표 연산자는 연산자 우선순위가 가장 낮으며 왼쪽에서 오른쪽으로 순서대로 실행한다. 그리고 최종적으로 맨 우측의 값을 반환한다.

let a, b, c;

console.log(`할당 결과: ${(a = b = 3), (c = 4)}`); 
console.log(a, b, c); // 3 3 4

 

첫 번째 출력문에는 쉼표 연산자를 중심으로 (a=b=3)과 (c=4)가 연산되고 있다. 쉼표 연산자가 가장 우선순위가 낮기 때문에 a=b=3이 처리되고 c=4가 처리 된 후 최종으로 , 의 결과로 맨 우측의 값 4가 반환되어 출력된다.

 

let x, y, z;

x = ((y = 5), (z = 6)); // 맨 우측의 값 z가 반환
console.log(x, y, z); // 6 5 6 (제일 오른쪽)

여기서는 y=5가 실행되고 z=6이 실행된 후 맨 우측의 결과가 x에 할당되므로 x는 6이 된다.

 

대부분 코드를 좀 더 간결하게 사용할 목적으로 사용

그럼 이 쉼표 연산자를 어디다 써먹어 볼 수 있을까? comma operator는 주로 반복문을 이용하면서 여러번의 업데이트 작업을 수행할 때 유용하다. 마치 java의 stream api처럼 한 줄 쿼리 작성에 용이하다.

다음과 같은 배열이 있을 때 각 과목별 총점을 알고 싶고 각 객체별로 시험 점수의 합을 업데이트 하고 싶다면 어떻게 해야 할까?

let arr = [{java: 10, c: 9, js: 8},{java: 9, c: 8, js: 9},{java: 7, c: 7, js: 10},];

let javaSum = 0;
let cSum = 0;
let jsSum = 0;

먼저 일반적인 반목문을 이용한다면 다음과 같다.

arr.forEach((item) => {
      javaSum += item.java;
      cSum += item.c;
      jsSum += item.js;
      item.sum = item.java + item.c + item.js;
    });

 

하지만 만약 쉼표 연산자를 이용한다면 아래처럼 한 줄에 처리할 수가 있게 된다.  간결!! 한가? ㅎ

arr.forEach((item) => ((javaSum += item.java), (cSum += item.c), (jsSum += item.js), (item.sum = item.java + item.c + item.js)));