[JavaScript] 논리 연산자 ( || (OR), && (AND) , ! (NOT) )

 

자바스크립트엔 3종류의 논리 연산자가 있다. 
||(OR), &&(AND), !(NOT)

 

 

---

 

 

 || (OR)  

 

친구: "짜장면 또는 짬뽕 또는 떡볶이 중에 뭐 먹을래?" 

▷ 이 중에 내가 하나라도 먹고 싶은게 있다?  긍정적 신호를 보낸다. "true!"

▷ 이 중에 하나도 먹고 싶은게 없다?  부정적 신호를 보낸다. "false!"

 

let favoriteFood = prompt("짜장면 또는 짬뽕 또는 떡볶이 중에 뭐 먹을래?","");

if (favoriteFood == "짜장면" || favoriteFood == "짬뽕" || favoriteFood == "떡볶이" ) {
  alert( `${favoriteFood}이 먹고싶어!` );
}else {
  alert("false");
}

 

"짜장면"을 입력한 경우, 첫번째 조건이 true가 돼서 if절이 실행됨

 

"짬뽕"을 입력한 경우, 두번째 조건이 true가 돼서 if절이 실행됨

 

다른 것을 입력하였을 때, 세가지 조건이 모두 false가 돼서 else절이 실행됨

 

- 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환
- OR 연산자는 불린값을 조작하는 데 쓰인다. 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다.
- 피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다.

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

if (1 || 0) {   // if( true || false ) 와 동일하게 동작한다.
  alert( 'true야!' );
}

 

 

 

 OR 연산자 ||를  if문에서 사용해보자! (중요) 

 

- 주어진 조건 중 하나라도 true면 코드 실행해줘~
 - true만 찾아내는 감별사! 
- 얘는 true를 하나라도 찾아내면 멈춰서 true를 반환해버림!

let hour = 9;

if (hour < 10 || hour > 18) {
  alert( '영업시간이 아닙니다.' );  // 영업시간이 아닙니다
}

 

 

 

 if 문안에 조건을 넣어보자 

 

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( '영업시간이 아닙니다.' ); // isWeekend가 true이기 때문에 if절이 실행됨
}

 

 

 

 첫번째 truthy를 찾는 OR 연산자 || 

 

OR 연산자와 피연산자가 여러 개인 경우

result = value1 || value2 || value3;

 

이때, OR ||연산자는 다음 순서에 따라 연산을 수행한다.

1) 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
2) 각 피연산자를 불린형으로 변환한다.
3) 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
4) 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환한다.

즉, OR "||" 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 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이므로, 마지막 값을 반환함)

 

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛

 

모든 변수가 falsy이면 "익명"이 출력되었을 것이다.

 

true || alert("not printed");
false || alert("printed");

 

첫 번째 줄의 || 연산자는 true를 만나자마자 평가를 멈추기 때문에 alert가 실행되지 않는다.
단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰인다.

 

---

 

 

 && (AND) 

 

까다로운 친구: 내 이상형은 키가 180 이상이고, 나이 28살이어야 해.

 

 let height = 180;
 let age = 28;

 if (height == 180 && age == 28) {
   alert('까다로운 친구의 이상형에 부합합니다!');
 }

 

 

 

- 피연산자 모두가 true이면 true를 반환하고, 그렇지 않으면 false를 반환

 

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

 

 

 

 AND 연산자 &&를  if문에서 사용해보자! 

 

- 주어진 조건 중 하나라도 false면 true로 안해줌! (까다로운 넉낌)
 - false만 찾아내는 감별사!
- 얘는 false를 하나라도 찾아내면 멈춰서 false를 반환해버림!

 

두 조건이 모두 참인 경우

let hour = 12;
let isWeekend = true;

if (hour == 12 && isWeekend == true) {
  alert( '약속을 잡아도 됩니다!' ); // 두 조건이 모두 true이므로, if절이 실행됨
} else {
  alert( '이 날은 시간이 안됩니다!' );
}

 

 

 

두 조건이 모두 참이 아닌 경우 (하나가 false인 경우)

let hour = 12;
let isWeekend = false;

if (hour == 12 && isWeekend == true) {
  alert( '약속을 잡아도 됩니다!' ); // isWeekend가 false이므로, else절이 실행됨
} else {
  alert( '이 날은 시간이 안됩니다!' ); 
}

 

 

 

 

 첫번째 falsy를 찾는 AND 연산자 '&&' 

 

AND 연산자와 피연산자가 여러 개인 경우

result = value1 && value2 && value3;

 

이때, AND 연산자는 다음 순서에 따라 연산을 수행한다.

1) 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
2) 각 피연산자를 불린형으로 변환한다.
3) 변환 후 그 값이 false이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
4) 피연산자 모두를 평가한 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자를 반환한다.

즉, AND 연산자는 첫 번째 falsy를 반환한다. 피연산자에 falsy가 없다면 마지막 값을 반환한다.
위 알고리즘은 OR 연산자의 알고리즘과 유사하지만, 차이점은 AND 연산자가 첫 번째 falsy를 반환하는 반면, OR은 첫 번째 truthy를 반환한다는 것이다.

 

// 첫 번째 falsy를 반환한다.

alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5



// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시한다.

alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0

 

첫번째 falsy를 반환

alert( 1 && 2 && null && 3 ); // null

 

모두 truthy면, 마지막 피연산자가 반환된다.

alert( 1 && 2 && 3 ); // 마지막 값, 3

 

 

---

 

 

 ! (NOT) 

(1) 피연산자를 불린형(true / false)로 변환한다 
(2) (1)에서 변환된 값의 역을 반환한다 

 

alert( !true ); // false
alert( !0 ); // true

 

 

- ! (NOT)는 주로 toggle에서 많이 쓰인다. 
- 아래는 toggle을 사용한 예시이다.
- '프로필 편집 버튼'을 클릭하면 '완료 버튼'으로 바뀌고,
- 다시 '완료 버튼'을 클릭하면 '프로필 편집 버튼'으로 바뀐다.
- 즉, 편집버튼↔완료버튼 왔다갔다 하게 하기

 

const profileEditButton = document.querySelector('#edit-btn');


profileEditButton.addEventListener('click',clickEditHandler); // 버튼에 클릭이벤트를 걸어준다.


let toggle = true; // toggle의 기본값을 true로 하고, 함수를 이용해 조건문을 만든다

  //편집버튼을 누른상황 = true
  // => 완료버튼이 나타나있는 상태

  //완료버튼을 누른상황 = false
  // => 편집버튼이 나타나있는 상태
  

function clickEditHandler() {

  if (toggle) { // toggle이 true일 때 (편집버튼을 눌렀을 때)
   profileEditButton.classList.remove('profile-edit-btn') // 편집버튼 class를 없애고
   profileEditButton.classList.add('profile-complete-btn') // 완료버튼 class를 더한다.
   profileEditButton.textContent = "완료" // 텍스트도 "완료"로 바꾼다.
   toggle = !toggle; // else절을 실행하기 위해서 toggle을 false로 바꾼다.

  }else{ // 조건(toggle)이 false가 돼서 else절이 실행된다.
   profileEditButton.classList.remove('profile-complete-btn') // 완료버튼 class를 없애고
   profileEditButton.classList.add('profile-edit-btn') // 편집버튼 class를 더한다.
   profileEditButton.textContent = "프로필 편집" // 텍스트도 "프로필 편집"으로 바꾼다.
    toggle = !toggle; // 다시 if절을 실행하기 위해서 toggle을 true로 바꾼다.
  }
  }

 

프로필 편집 버튼

 

완료 버튼

 

 

 

연산자 더 알아보기 ('연산자 우선순위'에 관한 정보는 아래 게시글을 참고해주세요!)

https://dev-ini.tistory.com/45

[JavaScript] nullish 병합 연산자 '??'

 

참고 자료

https://ko.javascript.info/logical-operators