3. 자바스크립트 - 비교연산자(Comparisons)와 조건문(Conditional operators)

1. [JavaScript/초보자를 위한 자바스크립트] - 초보자를 위한 자바스크립트 커리큘럼
2. [JavaScript/초보자를 위한 자바스크립트] - 1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프로그래밍을 배우고 싶다면)
3. [JavaScript/초보자를 위한 자바스크립트] - 2. 자바스크립트 변수(variable)와 자료형(data type)

---

지난시간에 자바스크립트(JavaScript) 변수와 자료형을 공부했던 것에 이어서 이번에는 비교연산자와 조건문에 대해 공부해보도록 하겠습니다. '초보자를 위한 자바스크립트'에 있는 내용들은 정말 basic하고 모든 프로그래밍 언어에 존재하는 기본 문법들입니다.

 

비교연산자 조건문 퀴즈

비교연산자

 

비교연산자란 주어진 값들이 서로 같은지, 다른지, 큰지, 작은지 비교해주는 연산을 수행합니다.

비교연산자를 통해 연산된 결과값으로는 true 또는 false 즉 – 참이냐 거짓이냐 이 2가지만 존재하게 됩니다. 앞서 자료형을 학습했는데, 거기서 boolean형을 언급한 적이 있습니다. 이러한 true 또는 false의 값을 갖게 되는 것이 바로 boolean형 데이터입니다.

 

23 < 4

는 true인가요, false인가요?

아래에 23 < 4 라고 입력해서 직접 확인해보세요.

 

4는 23보다 작은 숫자이므로 결과는 false가 됩니다.

 

==	변수의 데이터 타입과 상관없이 값이 같으면 참이다.
===	변수의 데이터 타입까지 고려하여 값이 같으면 참이다.
!=	변수의 데이터 타입과 상관없이 값이 다르면 참이다.
!==	변수의 데이터 타입까지 고려하여 값이 다르면 참이다.
>	변수의 값이 더 크면 참이다. (초과)
<	변수의 값이 더 작으면 참이다. (미달)
>=	변수의 값이 더 크거나 같으면 참이다. (이상)
<=	변수의 값이 더 작거나 같으면 참이다. (이하)

비교연산자의 종류는 위와 같습니다. 그런데 여기서 ==와 ===이 어떻게 다른지 예시를 통해 살펴볼까요?

*그전에 한가지 주의할 점은 = 과 == 은 다른 종류의 연산자라는 것입니다.

=은 대입연산자로 우항의 값을 좌황에 대입해주겠다-라는 뜻이고, ==는 좌항과 우항의 값을 비교하겠다는 비교연산자입니다.

 

 

저번 시간에 언급했듯이 "문자열"은 따옴표로 둘러싸서 표기해야한다고 했습니다.

하지만 숫자는 따옴표가 필요하지 않았죠.

기억이 나지 않는다면 저번시간 내용을 복습하고 오세요 ^ㅇ^

 

1 이건 숫자 데이터 타입입니다.

'1' 이건 문자 데이터 타입입니다.

 

즉 데이터 타입이 다르다는 의미입니다. 1은 숫자이고, '1'은 문자이니까요. 

1 == '1' 은 'true'입니다.

1 === '1' 은 false입니다.

 

이제 좀 이해가 되셨나요? 

 

==와 ===가 '같은지'를 따져주는 연산자라면, != 와 !==는 반대의 의미를 갖고 있습니다. 이 연산자는 '다를 경우에' 참(true)을 반환합니다. 위에서 1 === '1'은 false라고 했습니다. 왜냐하면 1은 숫자이고, '1'은 문자여서 자료형이 다르기 때문이었습니다.

 

그렇다면

1 !== '1'

은 무슨 결과값이 나와야할까요? 한번 맞춰보세요!

 

네, 정답은~~~ true(참)입니다. 왜냐하면 1과 '1'은 다르기 때문입니다.

===는 자료형까지 같은 경우 참을 반환하고, !==은 다를 경우에 참을 반환합니다.

 

그리고 5 <= 5 은 참일까요, 거짓일까요?

네, 참입니다. 왜냐하면 왼쪽의 값이 오른쪽값보다 작거나 같으면 '참'을 반환하기 때문입니다.

5 <= 6 또한 참이라고 할 수 있습니다! 

 

이 비교연산자 문제에 대해선 제가 퀴즈도 많이 낼테니 문제를 풀면서 달달달 헷갈리지 않게 익혀주세요^^

---

조건문

이번엔 이 비교연산자를 활용할 수 있는 '조건문'을 배워보도록 하겠습니다.

조건문은 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것 입니다.

if조건문

if ~ else if ~ else 이런식으로 구성이 되어있습니다.

if(조건1) → 조건1일 경우 실행

else if(조건2) → 조건2일 경우 실행

else → 조건1, 조건2 둘다 해당되지 않은 나머지 경우에 실행

 

예를 들어서 우리가 성적을 계산할 때 이용할 수 있습니다.

앞서 배운 '비교연산자'를 이용하여 내 성적과 기준점수(90점)을 비교합니다. 내 성적 78점은 90점보다 작기 때문에 조건 "내성적 >= 90"을 만족하지 못하고 조건은 false를 반환합니다. 이처럼 조건이 false인 경우는 해당 조건에 만족할 경우에만 실행되는 "점수 A주기"를 실행하지 않습니다.

90점 이상은 A, 71~89점은 B, 70점 이하로는 모두 C 라고 합시다. 그럴 경우 아래와 같은 코드를 작성할 수 있습니다. scroe엔 여러분이 바라는 점수를 적어보세요. 여러분의 점수는 몇등급 인가요?

var score = 78; //내 점수
var grade;//내 성적

if(score >= 90) grade = 'A'; //90점 이상은 A

else if(score >= 71 && score <= 89) grade = 'B'; // 71~89점은 B

else grade = 'C'; //70점 이하는 C

alert("점수는 " + grade);

여기서 추가적인 부분을 설명하자면 &&은 and를 의미 [footname] 이와 같은걸 '논리연산자'라고 합니다. 조금 더 자세히 알고 싶으시다면 https://m.blog.naver.com/PostView.nhn?blogId=smilebanner88&logNo=220729516010&proxyReferer=https%3A%2F%2Fwww.google.com%2F 글을 참고해주세요. [/footname] 합니다. score >= 71 (점수가 71점이상) 이면서 score <= 89 (점수가 89점 이하) 일 경우에는 true를 반환합니다. 그러니까 즉 2가지 조건에 '모두' 만족할 경우에만 참인 것입니다. 

 

이런식으로 조건문은

if(조건) → {조건이 '참'일 경우 실행할 내용 } 

 

이런식으로 쓰시면 됩니다. 그리고 이 조건문 안에 들어가는 '조건'은 반환값이 ture 또는 false여야하기 때문에 위에서 우리가 공부한 '비교연산자'가 쓰이는 것입니다.

 

만약 처음부터 조건 자체가 'false'(거짓)이라면 아무것도 실행되지 않습니다.

우리가 위에서 했던 예시를 바탕으로 해보자면

if(23 < 4){
alert('실행될 내용');
}

이렇게 입력해보시면 아마 아무것도 실행되지 않을 겁니다. 이유는 23<4는 false이기 때문이죠. 이처럼 조건문은 조건이 거짓일 경우에는 작동하지 않습니다.

*퀴즈는 모바일에선 지원되지 않습니다.

3과 비교연산자와 조건문 퀴즈

• 30 <= 30 은 참인가 거짓인가?

거짓(false)
참(true)

• '2' === 2 는 참인가 거짓인가?

거짓(false)
참(true)

• '2' !== 2 는 참인가 거짓인가?

거짓(false)
참(true)