return a && b; 구문

발생일: 2009.12.06

문제:
자바스크립트에서 다음과 같은 구문을 많이 사용한다.
   var result = a || b;

a 의 값이 true 이면 result 를 a 로 설정하고, 아닐 경우 b 로 설정하라는 이야기다.
예를 들어, 크로스 브라우징을 위해 이벤트 객체를 가져올 때에도 이와 같이 설정한다.

    function test(e) {
        e = e || window.event; // e 가 존재할 경우, e로 설정하고 없을 경우 window 속성의 event 로 설정한다
        ...(중략)
    }



헌데, 몇몇 코드를 보다 보니,
   var result = a && b;

와 같은 형태도 있더란 말이다.

이건 왠지 true 만 리턴되야 할 것 같은데,.. 
음... 갑자기 헷갈린다.

해결책:
a && b 도 a || b 와 같은 맥락으로 이해하면 되겠으며,
그 전에 몇 가지 알고갈 사항이 있다.

일단 기본적으로 자바스크립트의 false 는
    false, 0, -0, null, '', undefined, NaN

을 포함한다. 이 외의 나머지 것은 모두 true 로 가정한다.

주의할 점은,
연산에 대한 결과값을 리턴을 할 때,
그 결과를 단순히 true 또는 false로 리턴하는 것이 아니라,

실제 자기 자신의 값을 리턴한다는 것이다. (예: 0, null 등)
또한, 리턴되는 값은 and/or 연산의 판정이 결정되는 시점의 값이다.
(단, and 연산이 거짓일 경우에는 무조건 false 가 리턴된다)
는 것도 알아둬야 한다.

아래 예를 보면 이해에 도움이 되겠다.
(리턴값 구별을 위해 true/false 에 대한 판정은 참, 거짓으로 표시했다)

    조건문 // (판정) 리턴값
    true && false; // (거짓) false
    0 && false; // (거짓) false --- and 연산이 참이 아닐 경우엔 무조건 false 를 리턴한다
    false && 0; // (거짓) false
    flase || 0; // (거짓) 0 --- 단순히 false 가 아니라 실제 값을 리턴한다.
    null || 0; // (거짓) 0 --- or 연산이 참이 아닐 경우엔 false 판정을 만드는 값을 리턴한다
    0 || null; // (거진) null
    true || false; // (참) true
    'abc' || false; // (참) 'abc'
    'abc' || 'bcd'; // (참) 'abc' --- 참에 대한 판정은 'abc' 일 때 일어난다.
    'abc' && 'bcd'; // (참) 'bcd' --- 참에 대한 판정은 'bcd' 일 때 일어난다.

 
   
고로, 문제점에서 얘기했던 var result = a && b; 라고 선언했다면,
result 의 값은 참일 경우 b 가 되고, 거짓일 경우 false 가 되는 거다.

아래와 같이 응용해서 사용하면 좋겠다.
    /**
      * 아이디가 elementId 인 엘리먼트의 value 값을 구한다.
      *
      * @param elementId 대상 엘리먼트의 아이디
      * @param defaultValue 기본값
      * @return 대상 엘리먼트의 value, 없을 경우 defaultValue
      */
    function getElementValue(elementId, defaultValue) {
        var el = document.getElementById(elementId);
        // el 이 존재하고 el.value가 참일 경우, el.value 를 리턴한다.
        // 그렇지 않을 경우 defaultValue를 리턴한다.
        return (el && el.value) || defaultValue;
    }


요 함수는 el 이 null 일 경우에도 문제없이 작동한다.


카테고리

분류 전체보기 (711)
About me. (6)
Daylogs (676)
영어공부 (0)
My works - 추억 (29)
비공개 (0)