논리 연산자 : ||, &&, !

0. 기본정보

#스파르타코딩클럽 #부트캠프 #주말자습
- 학습주제: JavaScript 문법

- 학습내용: 논리 연산자(||, &&, !)

- 참고자료: 모던 자바스크립트 https://ko.javascript.info/logical-operators#ref-847
- 학습일: 2024. 5. 11.

---

 

논리연산자 종류: ||(OR), &&(AND), !(NOT)

논리연산자 정의: 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있음. 연산 결과 역시 모든 타입이 될 수 있음

cf. falsy값 : false, 0, "", null, undefined, NaN

 

1) OR 논리연산자 (||)

전통적인 방식(=피연산자가 불린형인 경우)

- 인수 중 하나라도 true 이면 true를 반환하고, 그렇지 않으면 false를 반환함

- OR 연산자는 이항 연산자로 아래와 같이 네 가지 조합이 가능함

console.log( true || true );   // true
console.log( false || true );  // true
console.log( true || false );  // true
console.log( false || false ); // false

- 피연산자가 모두 false 인 경우를 제외하고 연산 결과는 항상 true

- 아래는 OR 연산자는 if문에서 자주 사용되므로 예시이므로 잘 익혀두자!

let hour = 9;

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

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  console.log( '영업시간이 아닙니다.' ); // 주말이기 때문임
} // '영업시간이 아닙니다.'

 

논리 연산자 OR의 '추가' 기능

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

result = value1 || value2 || value3;

 

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

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

여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것!!

 

1) 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기

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

console.log( firstName || lastName || nickName || "익명"); // 바이올렛

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

 

2) 단락 평가

OR(||)은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈추는데, 이런 프로세스를 '단락평가'라고 말함

true || console.log("not printed");
false || console.log("printed");

- 위 예시를 실행하면 두 번째 메시지만 출력될 것!

- 첫 번째 줄의 ||연산자는 true를 만나자마자 평가를 멈추기 때문에 console.log가 실행되지 않음

- 단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰임

---

2) AND 논리연산자 (&&)

전통적인 방식(=피연산자가 불린형인 경우)

cf. falsy값 : false, 0, "", null, undefined, NaN

두 피연산자가 모두가 참일 때 true 반환. 그 외의 경우는 false

 반환

console.log( true && true );   // true
console.log( false && true );  // false
console.log( true && false );  // false
console.log( false && false ); // false

- 아래는 if문 활용 예시

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  alert( '현재 시각은 12시 30분입니다.' );
}

 

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

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

result = value1 && value2 && value3;

AND 연산자 &&는 아래와 같은 순서로 동작

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

OR 연산자와의 차이점: AND 연산자가 첫 번째 falsy를 반환하는 반면, OR은 첫 번째 truthy를 반환함

- 아래는 예시

// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
console.log( 1 && 0 ); // 0
console.log( 1 && 5 ); // 5

// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
console.log( null && 5 ); // null
console.log( 0 && "아무거나 와도 상관없습니다." ); // 0

- 피연산자가 여러 개인 경우

console.log( 1 && 2 && null && 3 ); // null
console.log( 1 && 2 && 3 ); // 마지막 값, 3

 

🚨&&의 우선순위가 ||보다 높다 🚨

따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작한다!!

---

3) NOT 논리연산자 (!)

console.log( !true ); // false
console.log( !0 ); // true

NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행함

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

NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있음!

console.log( !!"non-empty string" ); // true
console.log( !!null ); // false

• 첫 번째 NOT 연산자는 피연산자로 받은 값을 불린형으로 변환한 후 이 값의 역을 반환함
• 두 번째 NOT 연산자는 첫 번째 NOT 연산자가 반환한 값의 역을 반환함

 내장 함수 Boolean을 사용하면 !!을 사용한 것과 같은 결과를 도출할 수 있음

console.log( Boolean("non-empty string") ); // true
console.log( Boolean(null) ); // false

NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 ||보다 먼저 실행 됨