Javascript Exercise [Comparison operator- replit 7 : 비교 연산자]

Seong Ho Kim·2023년 10월 2일

Javascript Exercise Assignment 07 - [비교연산자]

1) 비교 연산자 - (==,!=,===,!===) / (>,<,<=,>=)

(1) 비교 연산자(>,>=,<,<=)란?

09-1. 비교 연산자
비교 연산자는 연산자 양쪽에 있는 두 값, 즉 좌항과 우항을 비교하는 연산자 입니다.

- 비교 연산자의 종류에는 동치 연산자(==, ===, !=, !==)와 관계 연산자(>, <, >=, <=)가 있습니다.
- 관계 연산자(>, <, >=, <=)는 문자열(사전순으로 비교)과 숫자(크기로 비교) 데이터 타입을 비교할 때 사용됩니다.
- 동치 연산자(==, ===, !=, !==)는 다양한 타입의 데이터들을 서로 비교하는 경우에 사용됩니다.

(2) 일치 연산자(===)란?

09-2. 일치 연산자(===)
조건문 등에서 자주 사용 되는 동치 연산자에 대해 살펴봅시다. 
if 문 예제에서 사용했던 === 연산자 기억하시나요? === 연산자는 
연산자 양쪽에 있는 두 값을 비교하는 비교연산자 중 하나 입니다.

=== 연산자는 값과 타입이 같은지를 비교하는 동등 비교 연산자(equality operator) 입니다.
(cf. === 엄격(일치) 비교 vs. == 추상(동등) 비교)
console.log(answer === "비밀");

왼쪽은 문자열이 담긴 answer 변수이고, 오른쪽은 텍스트인 문자열 입니다. 
다음은 문자열끼리 비교하는 또다른 예시입니다. 

예시)
const fullName = "김 개발";
const familyName = "김";
const firstName = "개발";

console.log(fullName === familyName + " " + "개발"); //결과값: true
console.log(fullName === familyName + " " + firstName); //결과값: true

컴퓨터는 왼쪽부터 차례로 코드를 실행하기 때문에 필요한 순간에 연산을 괄호로 묶어주어야 했습니다. 
만일 묶지 않으면 숫자 연산을 의도한 부분이 문자열로 잘못 연산되는 경우를 초래하게 되었죠.
이전 단원에서 다루었던 다음의 예시 코드가 각기 다른 결과를 반환하였던 원인도 바로 그 때문이었습니다.

console.log("2 더하기 2는 " + 2 + 2); // 결과값: "2 더하기 2는 22"
console.log("2 더하기 2는 " + (2 + 2)); // 결과값: "2 더하기 2는 4"

(3) 불일치 연산자(!==)란?

09-3. 불일치 연산자(!==)
!== 를 사용해서 서로 '같지 않음'을 비교할 수도 있습니다.

if (answer !== "비밀") {
  alert("틀렸습니다.");
}

answer 값이 "비밀" 이 아니면, 다음 구문을 실행합니다. 
즉 answer에 "비미", "secret", "빌미" 등 다른 값이 들어있으면 
해당 조건은 "참"이 되므로 다음 구문을 실행하게 되는 것입니다.

(4) 동등 연산자(==)란?

09-4. 동등 연산자(==)
==는 동등 비교연산자(equality operator)입니다. 
'첫 번째 내용에 나왔는데 중복인가?' 하시겠지만, 차이점이 있습니다. 

첫 번째는 =가 3개인 === 였고, 지금은 == 2개 입니다. 
===는 엄격한(identity/strict) 비교연산자 이고, 
==는 느슨한 비교연산자 입니다.

이제까지 텍스트는 문자열 유형으로, ""(쌍따옴표)를 사용하여 표시한다고 하였습니다. 
숫자는 Number형으로 "" 없이 숫자 그대로 사용합니다. 

그런데 컴퓨터가 쌍따옴표로 되어있는 숫자를 읽게 되면,
'숫자이긴 하지만 쌍따옴표로 감싸져있기 때문에 문자열(String) 
데이터 타입처럼 보이는 숫자(integer)'로 인식하게 됩니다. 

그래서 JavaScript에서는 느슨한 동등 비교가 가능합니다.
아래와 같이 "3"과 3을 == 로 비교하면 true라는 결과가 출력됩니다.

console.log("3" == 3); // true

아래와 같이 === 을 사용하면 false가 출력됩니다. 
두 값의 type이 다르기 때문입니다. (문자열 vs 숫자)

console.log("3" === 3); // false

Assignment

1. 우리나라는 20살 부터 술을 마실 수 있습니다. 
canIBuyAlcohol 함수 안에 비교 연산자를 사용하여 
다음의 경우들이 구현될 수 있도록 해주세요.

- age 가 20살 보다 어리면: "미성년자는 주류를 구매할 수 없습니다." 의 경고 문구 반환
- age 가 50살 이상이면: "고연령대의 잦은 음주는 건강을 해칩니다." 의 경구 문구 반환
- 그 외의 경우에는: "성인이므로 주류 구매가 가능합니다." 의 문구 반환

Assignment - Javascript Code

function canIBuyAlcohol(age) {
  if (age < 20) {
    return "미성년자는 주류를 구매할 수 없습니다."
  } else if (age >= 50) {
    return "고연령대의 잦은 음주는 건강을 해칩니다."
  } else {
    return "성인이므로 주류 구매가 가능합니다."
  }
}
const result01 = canIBuyAlcohol(19);
console.log(result01); // 미성년자는 주류를 구매할 수 없습니다.
const result02 = canIBuyAlcohol(50);
console.log(result02); // 고연령대의 잦은 음주는 건강을 해칩니다.
const result03 = canIBuyAlcohol(21);
console.log(result03); // 성인이므로 주류 구매가 가능합니다.
profile
안녕하세요 Junior UIUX Designer 입니다 😊

0개의 댓글