[JavaScript] The Modern JavaScript Tutorial - (2-11) Logical operators

자바스크립트에는 세 종류의 논리 연산자 ||, &&, !가 있다.

|| (OR)

result = a || b;

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

즉, 피연산자가 모두 false인 경우를 제외하고는 연산 결과가 항상 true이다.

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

피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다.

if (1 || 0) {       // if (true || false)
    alert('truthy!');
}

OR 연산자 ||는 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의 '추가' 기능에 대해 알아보자.

result = value1 || value2 || value3;

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

반환값은 형 변환을 하지 않은 원래 값이다.

1 || 0;     // 1 (1은 truthy)
null || 1;  // 1 (1은 truthy)
null || 0 || 1; // 1
undefined || null || 0; // 0 (모두 falsy이므로, 마지막 값 반환)

 

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

let firstName = "";
let lastName = "";
let nickName = "SuperCoder";

alert(firstName || lastName || nickName || "Anonymous");    // SuperCoder

 

단락 평가

OR 연산자 ||가 제공하는 또 다른 기능은 '단락 평가(short circuit evaluation)'이다.

||는 왼쪽부터 시작해서 오른쪽으로 평가를 진행하며, truthy를 만나면 그 이후의 값들은 건들지 않고 평가를 멈추게 된다. 이를 '단락 평가'라고 한다.

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

 

&& (AND)

AND 연산자는 두 피연산자가 모두 참일 때 true를 반환하고, 그 외에는 false를 반환한다.

true && true;   // true
false && true;  // false
true && false;  // false
false && false; // false

let hour = 12;
let minute = 30;

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

if (1 && 0) {   // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 된다.
    alert("if문 안에 falsy가 들어가 있기 때문에 alert은 실행되지 않는다.")
}

 

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

result = value1 && value2 && value3;

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

⇒ 첫 번째 falsy를 반환하고, 피연산자에 falsy가 없다면 마지막 값을 반환한다.

⇒ AND 연산자는 첫 번째 falsy, OR 연산자는 첫 번째 truthy를 반환한다.

result = value1 && value2 && value3;

// 첫 번째 피연산자가 truthy라면, AND는 두 번째 피연산자를 반환한다.
1 && 0;     // 0
1 && 5;     // 5

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

1 && 2 && null && 3;    // null
1 && 2 && 3;            // 마지막 값, 3

 

&&의 우선순위는 ||보다 높다

a && b || c && d == (a && b) || (c && d)

 

if를 ||나 &&로 대체하지 말자

let x = 1;
(x > 0) && alert('Greater than zero!');
if (x > 0) alert('Greater than zero!');

AND 연산자를 if문을 줄이는 용도로 사용하기도 하지만, if문을 사용한 코드가 무엇을 구현하고자 하는지 명확하게 드러내며 가독성도 좋다.

 

! (NOT)

result = !value;

!true;  // false
!0;     // true

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

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

!!"non-empty string";   // true
!!null;                 // false

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

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

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

 

과제

다음 OR 연산의 결과는?

alert(null || 2 || undefined);     // 2

 

OR 연산자의 피연산자가 alert이라면?

alert(alert(1) || 2 || alert(3));   // 1??

1, 2가 차례대로 출력된다.

alert 메서드는 값을 반환하지 않는다. 즉, undefined를 반환한다.

왼쪽부터 평가하기 때문에 alert(1)을 검사하게 되고, 이때 alert(1)이 뜨게 된다.

alert(1)의 반환값은 undefined이기 때문에 다음 2를 평가하게 되고, 2는 truthy value이기 때문에 2를 반환하며 해당 OR 연산이 종료된다.

 

다음 AND 연산의 결과는?

1 && null && 2;     // null

 

AND 연산자의 피연산자가 alert이라면?

alert(alert(1) && alert(2));    // 1 undefined

 

OR AND OR

alert(null || 2 && 3 || 4);     // null || 3 || 4 -> 3

 

사이 범위 확인하기

• 나이가 14세 이상, 90세 이하에 속하는지 확인하는 if문 작성하기

let age = prompt("당신의 나이는?", "");

if (age >= 14 && age <= 90)
{
    alert("14세 이상, 90세 이하");
}

 

바깥 범위 확인하기

let age = prompt("당신의 나이는?", "");

if (!(age >= 14 && age <= 90))
{
    alert("14세 미만, 90세 초과");
}

if (age < 14 || age > 90)
{
    alert("14세 미만, 90세 초과");
}

 

'if'에 관한 고찰

if (-1 || 0) alert('first');        // -1(truthy) -> first
if (-1 && 0) alert('second');
if (null || -1 && 1) alert('third');// -1, 1(truthy) -> third

 

로그인 구현하기

let id = prompt("사용자 이름을 입력하세요.", "");

if (id == "Admin") {
    let pw = prompt("비밀번호를 입력하세요.", "");

    if (pw == "TheMaster") {
        alert("환영합니다!");
    } else if (pw == "" || pw == null) {
        alert("취소되었습니다.");
    } else {
        alert("인증에 실패하였습니다.");
    }
} else if (id == "" || id == null) {
    alert("취소되었습니다.");
} else {
    alert("알 수 없는 사용자입니다.");
}

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial