JavaScript 쉼표(Comma) 연산자란?
JavaScript에서 쉼표( , )는 하나의 연산자로 동작합니다. 쉼표 연산자는 왼쪽부터 오른쪽으로 각 피연산자(operand)를 순서대로 평가한 뒤, 마지막 피연산자의 값만 반환합니다.
즉, 여러 개의 표현식을 한 줄에서 순차적으로 실행하고 싶을 때 유용하게 사용할 수 있습니다.
동작 방식
예를 들어 다음 코드를 살펴보겠습니다.
var x = (10, 20, 30); // x에는 30이 할당됨
위 코드에서 10, 20, 30이 차례대로 평가되지만, 최종적으로 변수 x에 할당되는 값은 마지막 피연산자인 30입니다.
실전 예제
아래 예제는 쉼표 연산자가 실제로 어떻게 동작하는지 보여줍니다.
<!DOCTYPE html>
<html>
<body>
<script>
var a = 100;
// 증가 후 현재 값을 반환
a = (a++, a);
document.write(a);
// 마지막 값인 300만 할당됨
a = (200, 300);
document.write("<br>" + a);
</script>
</body>
</html>실행 결과
101 300
코드 설명
a = (a++, a): 먼저a++가 평가되어 a가 101이 되고, 이후a가 평가되어 최종적으로 101이 반환됩니다.a = (200, 300): 200은 평가만 되고 버려지며, 마지막 값인 300이 변수 a에 할당됩니다.
쉼표 연산자의 주요 활용 사례
- for 루프:
for(var i=0, j=10; i<j; i++, j--)처럼 여러 변수를 동시에 초기화하거나 업데이트할 때 사용됩니다. - 여러 표현식 결합: 부수 효과(side effect)가 있는 표현식들을 한 줄에서 순차적으로 실행할 수 있습니다.
- 삼항 연산자 내부: 조건문 안에서 여러 동작을 실행해야 할 때 활용됩니다.
주의 사항
쉼표 연산자는 가독성을 해칠 수 있으므로 남용하지 않는 것이 좋습니다. 특히 변수 선언 시 사용되는 쉼표(var a = 1, b = 2;)는 연산자가 아니라 문법적 구분자이므로, 연산자로서의 쉼표와 혼동하지 않도록 주의해야 합니다.