간결한 표현식 만들기

참고문서 : Beautiful Javascript

다음 조건문은 프로퍼티가 존재하는지 확인한다. 만약 존재하지 않으면 메서드를 호출한다.

if ( !this.username ) {
   this.setUsername();
}

username이 없으면 username 을 설정한다.
그러나 논리 연산자 OR을 사용하면 더욱 간결한 방법으로 같은 것을 표현할 수 있다.

this.username || this.setUsername()

username이 존재하지 않으면 username을 설정한다는 표현식이다.

다음은 username에 대한 배열을 살펴보자. username이 없으면 배열에 username을 추가하고자 한다.

if ( users.indexOf(this.username) == -1){
  users.push(this.username);
}

위 코드는 다음과 같다. username이 -1의 users 배열의 인덱스를 가지면 username을 users 배열에 넣는다.

위 문자을 표현하는 또 다른 방법은 비트 연산자 NOT을 사용하는 것이다. 비트 연산자 NOT은 오퍼랜드의 비트를 바꾼다. 즉, -1을 0(거짓)으로 바꾼다. 이 논리는 다음처럼 간단히 다시 쓰여질 수 있다.

~users.indexOf(this.username) || users.push(this.username)

해석은 다음과 같다. username은 배열에 있다. 아니면 추가한다.

다음 코드는 x, y, w, h, placement 인수가 주어지고 가장 위와 왼쪽 값으로 위치를 반환하는 간단한 함수다.

function getOffset (x, y, w, h, placement) {
   var offset;
   switch (placement) {
      case 'bottom' :
         offset = {
            top: y+h,
            left: x + w/2
         }
         break;
     case 'top' :
         offset = {
            top: y,
            left: x + w/2
         }
         break;
     case 'left' :
         offset = {
            top: y + h/2,
            left: x
         }
         break;
     case 'right' :
         offset = {
            top: y + h/2,
            left: x+w
         }
         break;
   }
   return offset;
}

다음 함수는 같은 결과를 반환하지만 더 빠르고 더 간결하다.

function getOffset (x, y, w, h, placement) {
  return placement == 'bottom'?  { top: y + h,    left: x + w/2 } :
         placement == 'top'   ?  { top: y,        left: x + w/2 } :
         placement == 'left'  ?  { top: y + h/2,  left: x } :
                                 { top: y + h/2,  left: x + w };   
}

다음은 즉시 호출 함수 표현식(IIFE) 이다. 관례에 따라 IIFE는 다음의 2개 형태 중 하나가 될 것이다.

(function (){})()
(function (){}())

IIFE를 작성할 수 있는 몇가지 다른 방법들이 있다.

!function (){}()
~function (){}()
+function (){}()
-function (){}()
new function (){}
1, function (){}()
1&&function (){}()
var i=function (){}()

각 표현들은 더 적은 바이트, 결합 안전성,, 유효성과 같은 자신만의 특징과 장점을 가지고 있다.

관련글 : +function()의 원리
             JavaScript: 기분좋은 소스코드