[JS] 📚 콤마 연산자 (a, b, c) 문법 정리

자바스크립트 콤마(쉼표)연산자

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

 

다음과 같은 함수가 있다. 우리가 흔히 보는 평범한 함수이다.

let a = (obj, value) => {
   obj+=value;
   obj+=value;
   return obj;
}

a(1,2); // 5

 

저 문법에서 중괄호를 없애고 괄호와 콤마만으로 표현 할수가 있다.

작동원리는 = (a, b, c) 이렇게 작성할 경우,

  1) a 실행

  2) b 실행

  3) c 리턴

이다.

 

그래서 obj+=value가 두번 실행되고 obj를 리턴해서(1+=2, 3+=2, 5) 답이 5가 나온다.

let a = (obj, value) => (obj+=value, obj+=value, obj);

a(1,2); // 5

​

정말 자주 쓰는 map() 이나 reduce() 고차함수에서도 요긴하게 쓰일 수 있다.

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

let aa = arr.reduce((obj,value) => {
   obj+=value; 
   return obj
}, 0);

let bb = arr.reduce((obj,value) => (obj+=value, obj), 0);

console.log(aa); // 15
console.log(bb); // 15

보는바와 같이 아예 함수 실행 블럭부분을 한줄로 쭉 표현하였다.

이처럼 간단한 실행 코드를 콤마 연산자로 표현하면 코드 줄수를 확실히 줄인다는 장점이 있다.

 

이밖에 논리연산자 &&, || 를 사용하여 if 조건문 코드 줄수를 확연히 줄이는 방법 또한 존재한다.

[JS] 📚 IF문 단축 문법 TIP

콤마연산자는 코드를 한줄로 간단히 줄일수는 있지만, 가독성에서는 그리 좋지 못한 문법이다.
그래도 이런 스타일의 자바스크립트 코딩을 하는 사람들이 꽤 되기에, 권장되지는 않지만 코드를 읽으려면 일단 배워두기를 추천한다.