Logical operators (JavaScript)

 

출처 : https://javascript.info/logical-operators

Logical operators

 

자바스크립트의 논리 연산자

자바스크립트에는 네가지 논리 연산자가 있음.

 

|| (OR)

&&(AND)

!(NOT)

??(Nullish Coalescing)

 

여기서는 처음 세가지만 다루며 ?? 연산자는 다음 글에서 설명.

 

주의 : 이들 연산자는 "논리 연산자"라고 부르지만 불리언 값뿐만 아니라 모든 타입의 값에 적용될 수 있으며 결과 역시 어떤 타입이든 될 수 있음.

 

|| ( OR)

OR 연산자는 두 개의 세로 막대 기호를 사용하여 표현함.

 

result = a || b;

 

전통적인 OR 연산

 

전통적인 프로그래밍에서는 OR 연산자가 불리언 값만을 다루며 

인수 중 하나라도 true이면 결과는 true

모두 false일 때만 false를 반환함. 

 

예시 : 

 

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

 

피연산자가 불리언이 아닌 경우, 평가를 위해 불리언으로 변환됨. 

예를 들어 숫자 1은 true , 0은 false로 취급됨. 

 

 

if (1 || 0) { // true || false와 같이 작동
  alert( 'truthy!' );
}

 

if문에서의 사용 예 

 

주로 if문에서 여러 조건 중 하나라도 true인지 확인할 때 사용됨.

 

let hour = 9;

if (hour < 10 || hour > 18) {
  alert( 'The office is closed.' );
}

 

여러 조건을 연달아 사용할 수도 있음.

 

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( 'The office is closed.' ); // 주말인 경우
}

 

OR 연산자가 "첫 번째 trhthy 값" 찾기

 

자바스크립트의 OR 연산자는 단순한 불리언 평가를 넘어서 아래와 같이 작동함. 

 

여러 값을 OR 연산자로 연결할 경우 

 

result = value1 || value2 || value3;

 

1. 왼쪽부터 순서대로 피연산자를 평가함.

2.각 피연산자를 불리언으로변환한 후 , 만약 그 값이 truthy이면 평가를 중단하고 원래 값을 반환함.

3.모든 피연산자가 평가되었는데도 truthy 값이 없으면 마지막 피연산자를 반환함.

 

 예시 : 

 

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

 

이러한 특성을 활용하면 여러 변수나 표현식 중 실제 값이 설정된 것을 찾을 수 있음. 

예를 들어 : 

 

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

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

 

모든 값이 falsy이면 "Anonymous"가 출력됨.

 

단락 평가 

 

OR 연산자는 단락 평가(short-circuit evaluation)를 지원함.

즉 , 첫번째로 truthy인 값을 찾으면 즉시 남은 평가를 건너 뜀.

 

예시 : 

 

true || alert("not printed");   // true를 발견하면 alert 실행하지 않음
false || alert("printed");       // 첫 번째 값이 falsy이므로 alert 실행

 

때로는 이 특성을 이용해 , 왼쪽 조건이 falsy일 때만 오른쪽 표현식을 실행하기도 함. 

 

&& (AND)

AND 연산자는 두개의 앰퍼샌드(&&) 기호를 사용하여 표현함. 

 

result = a && b;

 

전통적인 AND 연산

 

전통적으로 AND 연산자는 두 피연산자가 모두 truthy일 때만 true를 반환하고 그렇지 않으면 false를 반환함.

 

예시 : 

 

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

 

if문에서의 사용 예:

 

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  alert( 'The time is 12:30' );
}

 

 

숫자 등 다른 값들도 평가 대상이 될 수 있음.

 

if (1 && 0) { // 1은 truthy, 0은 falsy로 평가됨
  alert( "won't work, because the result is falsy" );
}

 

AND 연산자가 "첫 번째 falsy 값 " 찾기

 

여러 값을 AND 연산자로 연결하면 : 

 

result = value1 && value2 && value3;

 

1.왼쪽부터 순서대로 피연산자를 평가함.

2.각 피연산자를 불리언으로 변환한 후 , 만약 그 값이 falsy이면 평가를 중단하고 원래 값(여기서의 원래 값은 원래 형태의 값을 의미)을 반환함. 

3. 모든 피연산자가 평가되었는데도 falsy 값이 없으면 마지막 피연산자를 반환함.

 

즉 AND 연산자는 첫 번째 falsy 값을 반환하거나 , 모두 truthy일 경우 마지막 값을 반환함.

 

예시 : 

 

alert( 1 && 0 );            // 0 (첫 번째 falsy 값)
alert( 1 && 5 );            // 5 (1은 truthy이므로 두 번째 값 반환)
alert( null && 5 );         // null (첫 번째 값이 falsy이므로 반환)
alert( 0 && "no matter what" ); // 0

alert( 1 && 2 && null && 3 ); // null (첫 번째 falsy인 null 반환)
alert( 1 && 2 && 3 );         // 3 (모두 truthy이므로 마지막 값 반환)

 

연산자 우선순위 

AND 연산자 (&&)는 OR 연산자 (||) 보다 우선순위가 높음.

 

AND -> OR

 

즉 , 다음 코드는 : 

 

a && b || c && d

 

마치 아래와 같이 괄호로 묶은 것과 동일하게 동작함.

 

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

 

if 대신 && 사용하기 

떄때로 AND 연산자를 if문의 짧은 형태로 사용하기도 함. 

 

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

 

if문 :

 

if (x > 0) alert( 'Greater than zero!' );

 

동일하게 작동함. 

 

하지만 가독성을 위해 조건문은 if를 사용하는 것이 좋음.

 

! (NOT)

NOT 연산자는 느낌표 (!)로 표현되며 , 단항 연산자임.

 

result = !value;

 

NOT 연산자의 동작 : 

1. 피연산자를 불리언으로 변환함.

2.그 결과의 반대 값으로 반환함.

 

예시 : 

 

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

 

 

더블 NOT(!!)

종종 !!를 사용하여 값의 불리언 변환을 명시적으로 할 수 있음.

 

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

 

첫번째 NOT은 값을 불리언으로 변환하고 반전시키며 , 두 번째 NOT는 다시 반전하여 최종적으로 단순한 불리언 값으로 만듬. 

(즉 다시 원래대로 바꿔주는 것 -> Boolean과 같은 역할)

또는 내장된 Boolean 함수를 사용할수도 있음.

 

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

 

NOT 연산자는 모든 논리 연산자 중에서 우선 순위가 가장 높아 &&나 || 보다 먼저 실행됨.

 

NOT -> AND -> OR 

 

과제

 

1. OR의 결과는 ?

 

alert( null || 2 || undefined );

 

or의 경우 첫 true를 반환하므로 2 

 

2. OR과 alert 결합

 

다음 코드의 결과는 무엇일까?

 

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

 

답은 undefined인데 왜 그런지 궁금해서 검색해봄.

 

alert(1)은 단순히 1을 화면에 출력할 뿐, 아무 값도 반환하지 않습니다.
자바스크립트에서 반환 값이 없는 함수는 기본적으로 undefined를 반환합니다.

 

그래서 첫 true인 2가 반환

 

3.AND의 결과는?

 

다음 코드의 결과는? 

 

alert( 1 && null && 2 );

 

 

NULL

 

4.AND와 alert 결합

 

다음 코드의 결과는?

 

alert( alert(1) && alert(2) );

 

1이 출력되고 첫 false 값이기 떄문에 undefined를 반환함.

 

최종적으로 undefined가 alert으로 출력됨.

 

js의 and는 true나 false만 반환하는게 아니기 때문 

그저 첫번째 false값을 반환하니 그대로 alert(undefined)가 됨.

 

5.OR,AND,OR 조합의 결과

 

다음 코드의 결과는?

 

alert( null || 2 && 3 || 4 );

 

2 && 3 -> 3 

 

null || 3 || 4 이기 때문에 OR은 첫번째 true값을 반환

-> 3

 

6.범위 내 값 확인

 

나이(age)가 14 이상 90 이하인지 확인하는 if 조건문을 작성

"포함" 이므로 14와 90도 포함됨.

 

예시 해답: 

 

if (age >= 14 && age <= 90) {
  // age가 14 이상 90 이하인 경우
}

 

7. 범위 외의 값 확인

 

나이(age)가 14이상 90이하가 아닌지 확인하는 if 조건문을 작성

 

두가지 방식으로 

 

NOT(!)을 사용하는 방식

NOT 없이 작성하는 방식

 

예시 : (1 - NOT 사용): 

 

if (!(age >= 14 && age <= 90)) {
  // age가 14 이상 90 이하가 아닌 경우
}

 

예시 : (2 - NOT 없이) : 

 

if (age < 14 || age > 90) {
  // age가 14 이상 90 이하가 아닌 경우
}

 

 

8.if문에 관한 질문

 

다음 if문에서 alert가 실행되는 순서는 무엇이고 if(...) 내부의 표현식 결과는?

 

if (-1 || 0) alert( 'first' );
if (-1 && 0) alert( 'second' );
if (null || -1 && 1) alert( 'third' );

 

첫번째 if -1 JS에서는 숫자 0 만이 false임. 아닌 모든 값은 true가 됨.

두번째 if 0 

세번째 if -1  -1과 1은 둘다 true이므로 마지막 값이 1이 반환되고 NULL 과 1중 1이 true 이므로 실행됨.

 

자바스크립트에서 falsy 값은 다음과 같이 총 7가지입니다:

• false
• 0 및 -0
• 빈 문자열 ("")
• null
• undefined
• NaN

9.로그인 확인하기

 

아래 요구사항에 맞게 코드 작성

 

 

• prompt를 사용하여 로그인(아이디)을 입력받습니다.
• 만약 입력값이 "Admin"이라면, 비밀번호를 입력받는 prompt를 실행합니다.
  • 만약 입력이 빈 문자열('')이거나 Esc를 눌러 취소했다면 “Canceled”를 출력합니다.
  • 그 외의 문자열이라면 “I don’t know you”를 출력합니다.
• 비밀번호를 확인합니다.
  • 비밀번호가 "TheMaster"와 같다면 “Welcome!”을 출력합니다.
  • 다른 문자열이면 “Wrong password”를 출력합니다.
  • 빈 문자열이나 취소된 입력의 경우 “Canceled”를 출력합니다.

 

취소를 눌렀을 때 반환되는 값은 null 이니까 

 

제작 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <script>

        let id;
        let password;

        id = prompt("아이디를 입력","아이디");

        if(id == "Admin"){
            password = prompt("패스워드를 입력","패스워드")
            if(password == "TheMaster"){
                alert("Welcome!")
            }
            else if(password == '' || password == "null") {
            alert("Canceled")
            }
            else{
                alert("Wrong password")
            }




        }
        else if(id == '' || id == "null") {
            alert("Canceled")

        }
        else{
            alert("I don't know you")
        }




    </script>
</body>
</html>

 

예시 

 

let login = prompt("Who's there?", '');

if (login === "Admin") {
  let password = prompt("Password?", '');
  if (password === "TheMaster") {
    alert("Welcome!");
  } else if (password === '' || password === null) {
    alert("Canceled");
  } else {
    alert("Wrong password");
  }
} else if (login === '' || login === null) {
  alert("Canceled");
} else {
  alert("I don’t know you");
}