자바스크립트 유용한 팁 - Comma :: 마이구미

이번 글은 자바스크립트의 Comma 즉, 콤마를 다뤄본다.

너무도 당연히 알고 있고, 당연히 사용하고 있는 것이 콤마다.

그렇다면 도대체 무엇을 위해 글을 다뤘는가?

한번 보자. 후회 없을거다!

var obj={a:0,b:1,c:function(){}};
var arr=[1,2,3,4];
var a=1,b=2,c=3;

위와 같이 객체, 배열, 변수 등등 다양하게 사용하고 있다.

그렇다면, 아래와 같은 코드를 본 적이 있는가?

var a = 0; 
var b = ( a++, 99 ); 
var c = ( 1, 2, 3 );
var d = 4, 5;    //error
console.log(a);  // 1
console.log(b);  // 99
console.log(c);  // 3

b 변수는 a++를 실행되어진 후, 99가 대입된다.

왼쪽부터 먼저 실행되고 오른쪽이 마지막에 실행된다고 생각하면 된다.

이 경우가 콤마 연산자이다.

콤마 연산자? 의아해 할 수 있다.

본인은 여기서 콤마를 분리자(separators)와 연산자(operators) 두 가지로 나뉘어 설명하겠다.

우리가 지금까지 단순히 단순히 쓰던 콤마가 분리자이고,

지금 새로 본 표현이 콤마 연산자라고 생각하면 된다.

저 예제만 보고는 뭔지 의문이 많이 있을 것으로 생각한다.

본인 또한 왜 저걸 쓰지.. 오히려 더 복잡해지지 않을까 생각이 들었다.

일단 계속 보자.

분리자와 연산자의 구분을 for문을 통해 보자.

var j=10;
for(var i=0;i<=j;i++) {
  j--;
 console.log(i + " " + j); 
}

콤마를 이용해보자.

for(var i=0,j=10;i<=j;i++,j--) { 
 console.log(i*j); 
}

var i=0,j=10은 분리자이고, i++,j--는 연산자이다.

콤마 분리자를 이용하여 i,j 두 값을 만들고,

콤마 연산자를 이용하여 i, j 두 값을 변경하였다.

피보나치를 이용한 소스를 보자.

var r = [], n = 0, a = 0, b = 1, next;
 
function nextFibonacci() {
    next = a + b;
    a = b;
    b = next;
    return next;
}
 
while(n++ < 10) {
    r.push(nextFibonacci());
}
 
r; //[1, 2, 3, 5, 8, 13, 21, 34, 55, 89]
[1, 2, 3, 5, 8, 13, 21, 34, 55, 89]

위 소스에서 nextFibonacci 함수 내부를 깔끔하게 하고 싶을 것이다.

콤마 연산자를 이용하여 바꿔보자.

function nextFibonacci() {
    next = a + b;
    return b = (a = b, next);
}

괜찮은가?

b = ( a = b, next) 로직은,

a = b가 실행되어 a는 b의 값을 가지고, next는 b에 대입되어진다.

결국 똑같은 처리가 되고 코드 2줄을 없애게 되었다.

하나 더 함수를 통한 활용사례를 보자.

예를 들어 아래와 같이,

어떤 조건에 만족하면 두 함수를 호출하고 싶을 경우가 있었을 거라 생각한다.

function fn() {
    if (x) {
        foo();
        return bar();
    } else {
        return 1;
    }
}

콤마 연산자를 통해 소스를 줄이고, 가독성을 높여보겠다.

function fn() {
    return x ? (foo(), bar())
             : 1;
}

삼항 연산자를 같이 사용했지만, 콤마 연산자와 같이 활용함으로써 깔끔해졌다.

삼항 연산자는 x가 존재한다면 ? 뒤를 실행, 그렇지 않다면 : 뒤를 실행한다.

if문 대신 많이 사용하는 자바스크립트 연산자이다.

마지막으로 응용 사례를 들고 마치겠다.

접근에 대해 제한을 주고 싶을 때 아래와 같이 활용할 수 있다.

var triesLeft = 5;

function Try() {
  console.log('try');
}

function Finish() {
  console.log('Finish');
}

function noMoreTries() {
  console.log('noMoreTries');
}

function Conntect() {
    triesLeft ? (triesLeft--, Try())
              : (noMoreTries(), Finish())
}

Conntect(); // try
Conntect(); // try
Conntect(); // try
Conntect(); // try
Conntect(); // try
Conntect(); // noMoreTries Finish

잘 쓰면 좋고 이상하게 쓰면 독이 될 수 있다.

참고한 자료

http://www.i-programmer.info/programming/javascript/6524-the-confusing-comma-in-javascript.html