(Javascript) 논리 연산자 &&과 ||의 단축 평가
논리 연산자 &&와 ||는 boolen이 아닌 피연산자와도 사용할 수 있다.
boolen이 아닌 피연산자를 이용할 때, 반환값을 boolen로 변환하지 않고, 그대로 반환한다.
이 때문에 처음 논리연산자와 단축평가를 접하면 아주 헷갈린다.
따라서 이번 포스팅에서는 논리연산자 &&와 ||에 대해 설명하고,
피연산자 값에 따라 달라지는 반환값을 정리하고자 한다.
Falsy와 Truthy 값
각 논리 연산자를 설명하기 전에 Falsy와 Truthy가 무엇인지 설명하고자 한다.
논리 연산자에 boolen이 아닌 피연산자를 추가하면,
논리 연산자는 해당 피연산자를 boolen으로 변환하려고 시도한다.
이때 아래에 해당하면 논리연산자는 해당 피연산자를 false로 취급한다.
아래 값들은 falsy값이라 불리며, 아래에 해당하지 않는 경우 true로 취급된다.
- null
- NaN
- 0
- 빈 문자열 ("", '')
- undefined
AND 연산자 &&
논리연산자 &&는 피연산자 중 하나라도 false 또는 falsy일 경우 false로 판별되기 때문에,
false 또는 falsy인 값을 발견할 때, 그 즉시 멈추고 해당 피연산자를 반환한다.
만약 false 또는 falsy 값을 발견할 수 없다면 마지막 피연산자를 반환한다.
//boolen 피연산자
true && true; // true
false && true; //false
true && false; //false
false && false; //false
//falsy & truthy 피연산자
"cat" && "dog" // "dog"
"" && "dog"; //""
"cat" && "" // ""
"" && false; //""
OR 연산자 ||
논리연산자 ||는 피연산자 중 하나라도 true 또는 truthy일 경우 true으로 판별되기 때문에,
true 또는 truthy인 값을 발견할 때, 그 즉시 멈추고 해당 피연산자를 반환한다.
만약 true 또는 truthy 값을 발견할 수 없다면 마지막 피연산자를 반환한다.
//boolen 피연산자
true || true; // true
false || true; //true
true || false; //true
false || false; //false
//falsy & truthy 피연산자
"cat" || "dog" // "cat"
"" || "dog"; //"dog"
"cat" || "" // "cat"
"" || false; //false
우선순위
참고로 &&와 ||의 연산자를 같이 사용한다고 할 때
&&이 ||보다 우선순위가 높기에 &&이 먼저 실행된다.
요약
위 예시를 봐도 헷갈린다면
&&(AND)는 false 탐색기로 첫 번째로 발견한 false 또는 falsy값을 반환하고
||(OR)는 true 탐색기로 첫 번째로 발견한 true 또는 truthy값을 반환한다고 외우면 조금 쉬운 것 같다.