[TIL] 자바스크립트 기초문법 - 비교 연산자(<, >, <=, >=, ==, !=)와 조건문(if, switch)

비교연산자는 주로 조건문에서 많이 사용하는데 비교연산자에 대해서 처음 공부하는 것이라면 헷갈릴 수 있는 부분도 존재하니 반드시 체크해두어야 나중에 문제가 생길일이 없을 것 같다.

비교연산자 식은 true, false 값을 반환

기본적으로 console에 비교연산자를 활용한 식을 적어보면 true 또는 false 값을 반환한다.

console.log(8 > 4) // true
console.log(8 == 4) // false
console.log(8 != 4) // true

여기서 한가지 주의해야할 것 중 하나는 == 연산자인데 기본적을 =은 할당을 의미하기에 우리가 평소 알고 있는 것처럼 같다를 의미하지 않는다. 그래서 같다를 의미하는 연산자로 ==를 사용하는데 ==과 ===의 차이를 알아두는 것이 좋다.

== (동등 연산자)과 ===(일치 연산자) 의 차이

== 은 각각의 타입에 상관 없이 값이 같으면 true 를 반환하는데 즉, 문자열 5와 숫자 5가 같다고 인식하며, true 값을 반환한다는 것이다. 동등 연산자를 사용하면 나중에 어떤 버그를 발생시킬지 모르기 때문에 타입까지 같이 비교하 수 있는 일치 연산자(===)를 사용하는 것이 좋다.

const a = 5;
const b = '5';

console.log(a == b) // true
console.log(a === b) // false

비교연산자가 사용되는 조건문(if문)

비교연산자는 주로 조건문 내에서 사용되는데 조건문 안에서 true. false 값을 반환하며 이를 이용해 원하는 값을 찍어낼 수 있다. 아래와 같이 수학점수가 50점 이하일 때의 조건문을 예로 넣어놨다. 아래와 같이 prompt를 통해 입력받은 값이 50 이하일 때 재시험 대상이라는 안내문구를 띄워주도록 했다.

const mathScore = prompt('수학 점수를 입력해주세요.')

if(mathScore <= 50) {
  alert('재시험 대상입니다.')
}

여기서 50 이하일 때의 조건이 아닌 다른 조건을 추가하고 싶다면 else if를 사용하면 되고 그 나머지의 것들은 else를 사용하면 된다. 아래의 조건은 수학점수가 90점보다 높을 때는 잘했어요! 라는 문구를 띄워주고, 70점 보다 높고 90 이하일 때는 조금 더 분발하세요, 그 아래의 점수는 재시험 대상입니다라는 문구를 띄워주도록 했다.

const score = (mathScore) => {
  if(mathScore > 90) {
    alert('잘했어요!')
  } else if(mathScore > 70) {
    alert('조금 더 분발하세요.')
  } else {
    alert('재시험 대상입니다!')
  }
}

score(40)
score(58)
score(85)
score(100)

이렇게 비교연산자와 조건문에 대해서 다시 정리를 해보았는데 잘만 활용하면 필요한 알림창을 제대로 띄워줄 수 있기 때문에 많이 사용할 수밖에 없다.

비교연산자가 사용되는 조건문(switch문)

switch문은 if문을 사용하면 많이 사용할 일은 없지만 그래도 어떤 형태로 사용되는지를 알아보았다. 아래와 같이 코드를 작성했을 때는 원하는 값을 얻지 못했는데 switch문 같은 경우는 원하는 조건 아래의 코드를 모두 실행하기에 break를 걸어주어야한다.

// 코드가 원하는대로 실행되지 않는 문제

let subject = prompt('어떤 수업 시간인가요?'); // 수학

switch(subject){
  case '국어' :
    console.log('국어 시간입니다.');
  case '수학' :
    console.log('수학 시간입니다.');
  case '영어' :
    console.log('영어 시간입니다.');
  }
  
  // 수학 시간입니다.
  // 영어 시간입니다.
  

// break를 통해 원하는 값만 얻기

let subject = prompt('어떤 수업 시간인가요?'); // 수학

switch(subject){
  case '국어' :
    console.log('국어 시간입니다.');
    break;
  case '수학' :
    console.log('수학 시간입니다.');
    break;
  case '영어' :
    console.log('영어 시간입니다.');
    break;
  }
  
  // 수학 시간입니다.

여기에 더하여 if문의 경우에는 else를 통해 조건이 맞지 않을 때를 나타내주었는데 switch문은 default를 통해 조건이 맞지 않을 때를 표현해줄 수 있다.

let subject = prompt('어떤 수업 시간인가요?'); // 음악

switch(subject){
  case '국어' :
    console.log('국어 시간입니다.');
    break;
  case '수학' :
    console.log('수학 시간입니다.');
    break;
  case '영어' :
    console.log('영어 시간입니다.');
    break;
  default :
    console.log('제대로 입력해주세요.')
}

// 제대로 입력해주세요.

---

회고

오늘은 기본적인 비교 연산자와 함께 조건문을 간단히 살펴봤는데 평소에 if문만 사용하지 switch문을 사용한 적은 단 한번도 없었다. 그래서 잊고 있었는데 switch문을 통해서도 조건문을 만들 수 있다는 것을 다시한번 짚어보게 된 것 같다. switch문의 존재는 알고 있었지만 어떻게 사용하는지는 몰랐는데 이번 기회에 사용 방법을 다시한번 알게 된 것 같다.

 

자바스크립트 기초 문법 - 함수, 조건문, 반복문