[18일차] Javascript And(&&), OR(||)

서론

And와 OR은 ture와 false값을 반환하는 논리연산자이다. And일때는 모든 명제가 참이여야 참을 반환하고 OR일때는 참인 명제가 하나라도 있으면 참을 반환한다. 학교에서도 수학시간에 잠깐 배운 개념이라서 다들 익숙할 듯 하다. 오늘은 이 논리 연산자가 javascript에서는 어떻게 작동하는지를 이야기 하려고 한다.

본론

Javascript And(&&), OR(||)

javascript에서의 And와 OR은 반드시 true, false의 boolean값만 반환하는 것이 아니고, boolean타입이 아니더라도 모든 타입에 연산이 가능하고 피 연산자의 값 중 하나를 반환하기도 한다.

연산자	표현식	예시	설명
AND	&&	example1 && example2	참이면 example2를 반환 거짓이면 example1을 반환
OR	||	example1 || example2	참이면 example1을 반환 거짓이면 example2를 반환
NOT	!	!example1	example1이 참이면 false를 반환 거짓이면 true를 반환

삼항연산자같이 반환값이 boolean일 필요가 없을때 많이 사용된다.

우선순위

&&가 ||보다 우선순위가 높아 먼저 실행된다.

truthy와 falsy

MDN공식문서에서 truthy와 falsy는 '참 같은 값'과 '거짓 같은 값'으로 번역되어있다.
거짓같은 값이 아니면 모두 참 값이라고 하는데 거짓 같은 값은 다음과 같다.

• false;
• null;
• NaN;
• 0;
• empty string ("" or '' or ``);
• undefined.

And에서는 첫번째 falsy값을 바로 반환한다. 참일 경우에는 위의 표와 같은 결과를 반환한다.

//exp1 && exp2
'exp1' && 'exp2' //return exp2
''     && 'exp2' //return ''
'exp1' && ''     //return ''
false  && ''     //return false

OR에서는 exp1의 값이 truthy라면 exp1을 반환하고 아니라면 exp2를 반환한다.

//exp1 || exp2
'exp1' || 'exp2'      // 'exp1'
false  || 'exp2'      // 'exp2'
'exp1' || false       // 'exp1'
''     || false       // false
false  || ''          // ''

null이나 undefined기타 등등 falsy한 값을 제대로 체크하지 않으면 NullpointerException과 같은 오류를 맞닥뜨릴 수 있다. 그러므로 falsy를 배제하는 방법으로 Not(!)연산자를 사용한다.

참고

https://mariusschulz.com/blog/the-and-and-or-operators-in-javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND