09. 비교 연산자

09-1. 비교 연산자

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

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

09-2. 일치 연산자(===)

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

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

왼쪽은 문자열이 담긴 answer 변수이고, 오른쪽은 텍스트인 문자열 입니다. 이렇게 String끼리 비교할 수도 있고, 숫자와 String을 비교할 수도 있습니다.

if (fullName === familyName + " " + "개발") {
}

if (fullName === familyName + " " + firstName) {
}

if (totalCost === 81.50 + 135) {
}

if (totalCost === average + 135) {
}

잠시 앞의 Assignment 를 보겠습니다.

console.log("2 더하기 2는 " + (2 + 2));

컴퓨터는 왼쪽부터 코드를 실행하기 때문에 묶어주어야 했죠. 다음의 조건문의 조건 부분을 볼까요?

fullName === familyName + " " + "개발"

위의 코드는 우측에 () 괄호로 묶어주지 않았습니다. 그렇다고 "fullName === familyName" 먼저 계산 후, 뒤의 " " + "개발" 를 이어서 진행하는 것은 아닙니다. 비교연산자가 있을 때는, 비교연산자 기준으로 왼쪽/오른쪽 나눠서 코드를 실행하게 됩니다.


09-3. 불일치 연산자(!==)

이렇게 같은지를 비교하는 것이 아니라 !== 를 사용해서 서로 '같지 않음'을 비교할 수도 있습니다.

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

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

09-4. 동등 연산자(==)

==는 동등 비교연산자(equality operator)입니다. '첫 번째 내용에 나왔는데 중복인가?' 하시겠지만, 차이점이 있습니다. 첫 번째는 =가 3개인 === 였고, 지금은 == 2개 입니다. ===는 엄격한(identity/strict) 비교연산자 이고, ==느슨한 비교연산자 입니다.

이제까지 텍스트는 String형이며, ""(쌍따옴표)로 표시한다고 하였고, 숫자는 Number형으로 "" 없이 숫자 그대로 사용합니다. 그런데 컴퓨터가 쌍따옴표로 되어있는 숫자를 만나면, '아.. 숫자긴 한데, 쌍따옴표로 감싸져있고, 텍스트(String)구나' 하고 알게 됩니다. 그래서 JavaScript에서는 느슨한 동등 비교가 가능합니다.

아래와 같이 == 로 비교하면 "3"과 3은 참입니다.

if ("3" == 3) {
  return true;
}

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

if ("3" === 3) {
  return false;
}

Assignment

index.js를 보고 아래 조건에 맞는 함수를 구현해주세요.

  • 우리나라는 20살 부터 술을 마실 수 있습니다. 우리나라 사람들이 가장 즐겨마시는 술은 소주 입니다.
  • canIDrinkSoju 함수 안에 비교 연산자를 사용하여 다음의 경우들이 구현될 수 있도록 해주세요.
    • age 가 20살 보다 어리면: "애야 가서 공부나 해라!" 리턴
    • age 가 50살 이상이면: "건강을 위해서 술은 적당히 마시세요!" 리턴
    • 그 외의 경우에는: "소주에는 곱창 어떠신가요?" 리턴

// Assignment - 다음 함수 안에 코드를 구현하세요
function canIDrinkSoju(age) {
  if(age < 20){
    return "애야 가서 공부나 해라!";
  }else if(age >= 50){
    return "건강을 위해서 술은 적당히 마시세요!";
  }else{
    return "소주에는 곱창 어떠신가요?";
  }
}
profile
방향성을 찾고싶은 프론트엔드개발자

0개의 댓글