논리 연산자
논리 연산자에 대해서 제대로 알아보지 않고 자주 활용을 했었다.
논리 연산자는 당연히 true,false를 반환해 주는 것이겠지라고 생각하고 사용하던 중 이상한 오류를 만나서 MDN_논리연산자 에서 제대로 알아봤다.
논리연산자는 보통 Boolean값과 함께 사용되며 Boolean값을 반환합니다.
하지만, &&(AND)와 ||(or)연산자는 사실 피연산자 중 하나의 값을 반환합니다.
즉, Boolean값 이외의 값과 함께 사용하면 그것을 반환할 수 있습니다.
위의 문구를 본 후, 지금까지 논리연산자를 모르고 활용했구나라는 생각이 들게 됐다.
다시는 이런 실수를 하지 않고자 논리연산자의 예시를 들면서 이해하기로 결정했다.
아래 글을 작성하다 보니 true/false로 변환 가능한 값(표현식)을 미리 알아보고 가야겠다.
true보다는 false로 변환 가능한 게 적으니 그것들만 외우면 될 것 같다.
false로 변환 가능한 값
- null
- NaN
- 0
- 빈문자열 ('',"",``)
- undefined
false로 변환 가능한 값을 알아봤으니 AND,OR연산자에 대해서 알아봅시다.
AND - &&
Syntax
expr1&&expr2
AND 연산자
- expr1(앞 피연산자)가 true로 변환이 가능할 경우 : expr2를 반환한다.
- expr1(앞 피연산자)가 false로 변환 가능할 경우 : expr1을 반환한다.
예시를 이용해서 알아보겠습니다.
true && true // true
true && false // false
false && false // false
//expr1이 true로 변환 가능해 expr2를 반환하는 경우
true && 3 //3
true && 'hello' //hello
'hello' && 'world' //world
3 && 100 // 100
3 && console.log("3 출력") // 3 출력
//expr1가 flase로 변환되는 경우 expr1을 반환
undefined && true // undefined
null && true // null
0 && true // 0
console.log('3 출력') && 3 // 3 출력 (console.log는 undefined를 반환한다.)위와 같이 boolean 값이 아닌 상황에 맞는 피연산자 값들을 반환하게 됩니다.
OR - ||
Syntax
expr1 || expr2
OR연산자
- expr1(앞 피연산자)가 true로 변환이 가능할 경우 : expr1를 반환한다.
- expr1(앞 피연산자)가 false로 변환이 가능할 경우: expr2를 반환한다.
AND에 비해 조금 헷갈립니다.
이 예시를 먼저 생각해보고 아래 예시를 살펴 봅시다.
false || undefined ???
정답 : undefined입니다.
예시를 통해 이해해 보겠습니다.
true || false // true
false || true // true
false || false // false
//expr1이 true로 변환 가능해 expr1를 반환하는 경우
'hello' || 'world' //hello
'hello' || null // hello
3 || false // 3
//expr1가 flase로 변환되는 경우 expr2을 반환
false || 'hello' //hello
null || false // false
null || undefined // undefined
false || 0 // 0 어떻게 해결해야할까?
만약 논리연산자를 이용해 Boolean 값만 출력하고 싶다면 2가지 해결방안이 있습니다.
- Boolean 함수이용하기
- 이중 부정연산자 이용하기
Boolean 함수
const isAnd = (a,b) => Boolean(a&&b)
isAnd('hello','world') //true
Boolean('hello'&&'world') //true이렇게 Boolean함수를 사용해 반환해주면 원하는 Boolean값을 반환할 수 있습니다.
이중 부정 연산자
이중 부정 연산자란 특별한 것이 아닌 부정연산자(!)를 2번 사용해 주는 것입니다.
const isAnd = (a,b) => !!(a&&b)
isAnd('hello','world') //true
!!('hello'&&'world') // true위의 2가지 방법을 이용해서 논리연산 Boolean값만 반환하게 만들 수 있습니다.
마무리
지금까지 논리연산자를 잘 알지 못한채로 사용하고 있었습니다. 사실 전에 들어본 내용이지만 흘려 넘어갔던 내용이었는데 그냥 무시하다가 에러가 발생해버렸네요.
그동안 제대로 알지 못한 채로 많은 것을 사용해왔지만, 사용하는 모든 것들에 대해 알고 사용하려는 노력을 해야 될 것 같습니다.
참조
