[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 논리 연산자

논리 연산자

출처:naver

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

연산자에 '논리’라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라

모든 타입의 값을 받을 수 있습니다. 연산 결과 역시 모든 타입이 될 수 있습니다.

 

||(OR)

 

전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰입니다.

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

 

const num1 = 10;
const num2 = 20;

let result = num1 >= 10 || num2 > 30;

console.log(result); //true

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

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

result = value1 || value2 || value3;

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

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

if문 안에 여러 가지 조건을 넣을 수 있습니다.

let hour = 12;
let isWeekend = true;

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

---

&&(AND)

두 개의 앰퍼샌드를 연달아 쓰면 AND 연산자 &&를 만들 수 있습니다.

result = a && b;

전통적인 프로그래밍에서 AND 연산자는 두 피연산자가 모두가 참일 때 true를 반환합니다.

그 외의 경우는 false를 반환하죠.

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

result = value1 && value2 && value3;

 

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

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

아래는 if문과 AND 연산자를 함께 활용한 예제입니다.

let hour = 12;
let minute = 30;

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

---

!(NOT)

논리 연산자 NOT은 느낌표 !를 써서 만들 수 있습니다.

NOT 연산자의 문법은 매우 간단합니다.

result = !value;

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

 

 

 ## 연습문제

1. 논리 연산자 기본
- 변수 `a`와 `b`에 각각 `true`와 `false`를 할당하세요.
- `a`와 `b`의 논리 AND 연산 결과를 출력하세요.
- `a`와 `b`의 논리 OR 연산 결과를 출력하세요.
- `a`의 논리 NOT 연산 결과를 출력하세요.

const a = true;
const b = false;
console.log(a && b); //false
console.log(a || b); // true
console.log(!a); // false

2. 여러 조건 결합
- 변수 `x`, `y`, `z`에 각각 임의의 숫자를 할당하세요.
- `x`가 10보다 크고 `y`가 5보다 작은지 확인하는 조건을 작성하고, 결과를 출력하세요.
- `x`가 10보다 크거나 `z`가 3보다 큰지 확인하는 조건을 작성하고, 결과를 출력하세요.
- `y`가 0이 아닌지 확인하는 조건을 작성하고, 결과를 출력하세요.

const x = 10;
const y = 20;
const z = 30;
console.log(x > 10 && y < 5); // false
console.log(x > 10 || z > 3);
console.log(y !== 0);

3. 사용자 로그인 및 권한 확인

- 변수 `isLoggedIn`과 `isAdmin`에 각각 `true` 또는 `false`를 할당하세요.
- 사용자가 로그인했는지 확인하고, 로그인했다면 "Welcome"을, 그렇지 않다면 "Please log in"을 출력하세요.
- 사용자가 관리자 권한을 가지고 있는지 확인하고, 관리자라면 "Admin access granted"를, 그렇지 않다면 "Admin access denied"를 출력하세요.
- 로그인 여부와 관리자 권한을 모두 확인하여, 로그인하고 관리자라면 "Full access granted"를, 그렇지 않다면 "Restricted access"를 출력하세요.

const isLoggedIn = true;
const isAdmin = false;

console.log(isLoggedIn ? "Welcome" : "Please log in");
console.log(isAdmin ? "Welcome" : "Please log in");
console.log(
  isLoggedIn && isAdmin ? "Full access granted" : "Restricted access"
);

4. 값의 존재 확인

- 변수 `value1`과 `value2`에 각각 임의의 값을 할당하세요. (예: 숫자, 문자열, `null`, `undefined`)
- 두 변수 중 하나라도 값이 존재하는지 확인하는 조건을 작성하고, 결과를 출력하세요.
- 두 변수 모두 값이 존재하지 않는지 확인하는 조건을 작성하고, 결과를 출력하세요.

const value1 = 124;
const value2 = null;

// 0, undefined, null, "", NAN
// 우리가 원하는건
// 0, undefined, null, "", NAN  > true, false 변환이 되는걸 원하는 것임
// ! 부정을 한번쓰면 부정  !! 두번쓰면 참 또는 거짓으로 나오게 만들어줌
console.log(!!value1 || !!value2); // 한개라도 값이 존재하면 true 아니면 false
console.log(!value1 && !value2); // 두 변수 모두 값이 없으면 true 아니면 false

5. 범위 확인
- 변수 `num`에 임의의 숫자를 할당하세요.
- `num`이 0 이상 100 이하인지 확인하는 조건을 작성하고, 결과를 출력하세요.
- `num`이 0 미만이거나 100 초과인지 확인하는 조건을 작성하고, 결과를 출력하세요.
const num = 50;
console.log(num >= 0 && num <= 100);
console.log(num < 0 || num > 100);

 

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 과정(B-log) 리뷰로 작성 되었습니다.