티스토리 뷰
발생일: 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 로 가정한다.
주의할 점은,
문제:
자바스크립트에서 다음과 같은 구문을 많이 사용한다.
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로 리턴하는 것이 아니라,
실제 자기 자신의 값을 리턴한다는 것이다. (예: 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'
아래 예를 보면 이해에 도움이 되겠다.
(리턴값 구별을 위해 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 일 경우에도 문제없이 작동한다.
'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 일 경우에도 문제없이 작동한다.
반응형
댓글
공지사항