자바스크립트에는 세 종류의 논리연산자 ||(OR) , &&(AND), !(NOT) 가 있다.
논리 연산자는 피연산자로 불린형 뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다.
|| (OR)
불린 값을 조작하는데 쓰인다. 인수 중 하나라도 true면 true를 반환하고, 아닐 시 false를 반환한다.
OR연산자는 이항 연산자이므로 아래와 같이 네가지 조합이 가능하다.
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false
피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다. 예를 들어, 연산 과정에서 숫자 1은 true, 0은 false로 바뀐다.
if (1 || 0) { // if( true || false ) 와 동일하게 동작합니다.
alert( 'truthy!' );
}
if문에서 주어진 조건 중 하나라도 참 인지 테스트하는 용도로 자주 사용됨.
let hour = 9;
if (hour < 10 || hour > 18) {
alert( '영업시간이 아닙니다.' );
}
let hour = 12;
let isWeekend = true;
if (hour < 10 || hour > 18 || isWeekend) {
alert( '영업시간이 아닙니다.' ); // 주말이기 때문임
}
첫 번째 truthy 찾는 OR연산자 '||'
OR의 추가기능
OR 연산자와 피연산자가 여러 개 인 경우
result = value1 || value2 || value3;
이때, OR 연산자는 다음 순서에 따라 연산을 수행한다.
가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피 연산자를 평가.
각 피연산자를 불린형으로 변환한다. 변환 후 값이 true면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환.
모든 피연산자가 false면 마지막 피연산자를 반환.
정리 하자면 OR "||" 연산자를 여러개 체이닝 하면 첫 번째 truthy 반환. 피연산자에 truthy가 하난도 없으면 마지막 피연산자 반환.
alert( 1 || 0 ); // 1 (1은 truthy임)
alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)
alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)
1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기
firstName, lastName, nickName 이란 변수가 있는데 이 값들은 모두 옵션 값이라 한다.
OR ||을 사용하면 실제 값이 들어있는 변수를 찾고 그 값을 보여줄 수 있다. 변수 모두에 값이 없으면 익명을 보여줌.
let firstName = "";
let lastName = "";
let nickName = "바이올렛";
alert( firstName || lastName || nickName || "익명"); // 바이올렛
모둔 변수가 falsy이면 "익명"이 출력됨.
2.단락 평가
OR 연산자 ||가 제공하는 또 다른 기능은 단락평가이다.
연산이 진행되는 과정에서 OR연산자가 truthy를 만나면 평가를 멈추고 true를 반환하는 과정을 말한다.
동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과를 가지는 표현식 일 때 명확히 볼 수 있다.
true || alert("not printed");
false || alert("printed");
첫 번째 줄의 || 연산자는 true를 만나자마자 평가를 멈추어 alert을 실행시키지 않는다.
단락 평가는 연산자 왼쪽 조건이 falsy일때만 명령어를 실행하고자 할 때 자주 쓰임.
'Sparta x 이노베이션 캠프 > JavaScript' 카테고리의 다른 글
TIL: 스코프 (Scope), var & let & const (0) | 2022.09.21 |
---|---|
TIL: 호이스팅이란? (0) | 2022.09.20 |
TIL : JavaScript 대괄호, 중괄호, 소괄호 사용 정리 (0) | 2022.08.25 |
TIL : JavaScript filter() (0) | 2022.08.20 |
TIL: JavaScript 구조분해할당 (1) | 2022.08.20 |