비교 연산자(comparison operator)는 두 값을 견주어 true(참)나 false(거짓) 값 하나를 만듭니다. 나이가 20 이상인지, 고른 메뉴가 커피인지처럼 '그런가?'를 묻는 일은 모두 비교로 시작합니다.
다음 레슨의 if는 이 true·false를 보고 실행할 줄을 고릅니다.
이 단원(조건)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.
파이썬을 배웠다면 — 이 단원에서 다른 곳
파이썬을 배웠다면 이 단원에서 다른 곳: 덩어리는 들여쓰기가 아니라 중괄호가 정하고 그 안의 let 이름은 밖에 없음(규칙 4 — if와 else) · 소문자 true·false와 배열끼리의 ===(이 레슨) · elif·and·or가 없음(else if로 여러 갈래 · &&·||·!) · 빈 배열은 참(참 같은 값과 ??).
1비교식은 true나 false로 접힌다
age >= 20은 'age가 20 이상인가?'를 묻는 식입니다.
이 줄이 실행되면 먼저 이름 age 자리에 지금 붙어 있는 값이 들어가고(18 >= 20), 두 값을 견주어 false 하나로 접힙니다.
그래서 같은 식이라도 실행하는 때의 값에 따라 결과가 다릅니다.
let age = 18;
console.log(age >= 20);
age = 25;
console.log(age >= 20);false
trueage가 18일 때 비교 연산자 여섯의 값입니다.
| 연산자 | 묻는 것 | age가 18일 때 |
|---|---|---|
=== | 같은가 | age === 18 → true |
!== | 다른가 | age !== 18 → false |
< | 왼쪽이 작은가 | age < 20 → true |
> | 왼쪽이 큰가 | age > 20 → false |
<= | 왼쪽이 작거나 같은가 | age <= 18 → true |
>= | 왼쪽이 크거나 같은가 | age >= 20 → false |
true와 false는 값의 종류가 boolean인 참·거짓 값(불리언)입니다. 비교의 결과도 값이라서 이름을 붙일 수 있습니다.
const age = 18;
const adult = age >= 20;
console.log(adult);false2번 줄은 오른쪽 age >= 20이 먼저 false로 접히고, 그 값에 이름 adult가 붙습니다(규칙 2).
이렇게 참·거짓 값에 붙인 이름은 다음 레슨부터 조건 자리에 그대로 씁니다.
참·거짓 값은 소문자로 씁니다. 대문자로 시작하면 값이 아니라 만든 적 없는 이름으로 읽힙니다.
const ok = True;main.js:1const ok = True; ^ ReferenceError: True is not defined at main.js:1:12…Error: 줄부터 읽습니다. True is not defined는 'True가 정의되어 있지 않다', 곧 그런 이름이 없다는 뜻입니다.
그 위의 main.js:1과 ^가 1번 줄의 True를 가리킵니다.
2등호 하나는 붙이고, 셋은 묻는다
수학에서 등호(=)는 '같다'이지만 자바스크립트에서 등호 하나는 대입입니다. 왼쪽 이름을 오른쪽 값에 붙입니다.
'같은가?'를 묻는 것은 등호 셋 ===이고, 묻기만 할 뿐 이름을 붙이지 않습니다.
| 쓴 것 | 읽는 법 | 하는 일 |
|---|---|---|
x = 7 | x를 7에 붙인다 | 이름 x가 7을 가리킨다 |
x === 7 | x가 7과 같은가? | true나 false를 만든다 |
아래 코드는 무엇을 찍을까요? 답을 정한 뒤 펼쳐 보세요.
let x = 5;
x === 7;
console.log(x);실행 결과 보기
5예상과 다르면 그곳이 배울 곳입니다.
2번 줄 x === 7은 'x가 7과 같은가?'를 물어 false를 만들고, 그 값에 아무 이름도 붙이지 않은 채 버립니다.
x를 7에 붙이는 줄은 x = 7;입니다(규칙 2).
if의 조건 자리에 등호 셋 대신 하나를 쓰면 어떻게 되는지는 다음 레슨에서 봅니다.
3등호 둘은 종류를 바꿔 견준다
같은지 묻는 연산자는 하나 더 있습니다. 등호 둘 ==입니다.
=== 연산자는 값의 종류까지 같아야 true이고, == 연산자는 종류가 다르면 한쪽을 바꾼 뒤 견줍니다.
console.log(10 === '10');
console.log(10 == '10');
console.log(0 == '');false
true
true== 연산자는 글자 '10'을 수 10으로 바꿔 견줍니다. 0과 빈 문자열 ''까지 같다고 하니 어느 값끼리 같은지 따로 외워야 합니다.
그래서 이 과목은 늘 ===·!== 연산자를 씁니다. ==·!= 연산자는 남의 코드에서 만나면 '종류를 바꿔 견주는구나' 하고 읽기만 합니다.
4글자는 첫 글자부터 견준다
문자열끼리도 견줄 수 있습니다. === 연산자는 빈칸 하나까지 글자가 모두 같아야 true입니다.
크기 비교(<·> 연산자 등)는 사전처럼 첫 글자부터 견주다가, 처음 다른 글자에서 답을 정합니다.
한글은 가나다 차례, 숫자 글자는 0부터 9까지 차례로 앞에 오는 글자가 작습니다.
console.log('라테' < '커피');
console.log('10' < '9');
console.log('10' < 9);true
true
false2번 줄은 수 10과 9가 아니라 첫 글자 '1'과 '9'를 견줍니다. '1'이 앞이라 둘째 글자 '0'은 보지도 않고 true입니다.
3번 줄처럼 한쪽이 수면 글자 '10'을 수 10으로 바꿔 10 < 9를 견주어 false입니다.
어느 쪽이든 오류가 나지 않습니다. 입력 칸처럼 바깥에서 온 글자는 Number()로 수를 만든 뒤 견줍니다.
예제
카페 메뉴의 값을 견줍니다. +·* 같은 계산은 비교보다 먼저 합니다.
그래서 4번 줄은 coffee * 2가 8000이 된 뒤 8000 > 7000을 견주어 true입니다.
const coffee = 4000;
const latte = 4500;
console.log(coffee < latte);
console.log(coffee * 2 > 7000);
console.log(coffee !== 4000);true
true
false자주 틀리는 곳
틀린 생각: === 연산자도 등호 하나처럼 이름을 값에 붙인다.
등호 하나와 셋은 모양이 비슷합니다. 그러나 아래 price는 const 이름인데도 오류 없이 4000에 붙어 있습니다. 2번 줄은 묻기만 했기 때문입니다.
const price = 4000;
price === 4500;
console.log(price);4000맞는 규칙: === 연산자는 두 값이 같은지 물어 true·false를 만들 뿐, 이름을 붙이지 않습니다. 이름을 값에 붙이는 것은 = 같은 대입입니다(규칙 2).
틀린 생각: == 연산자로 견줘도 === 연산자와 결과가 같다.
등호 둘도 같은지 묻는 것처럼 보입니다. 그러나 재고 0과 빈 문자열도 같다고 합니다.
const stock = 0;
console.log(stock == '');
console.log(stock === '');true
false맞는 규칙: == 연산자는 종류가 다르면 한쪽을 바꿔 견줍니다. 같은지는 늘 ===, 다른지는 늘 !== 연산자로 묻습니다.
틀린 생각: 따옴표 안의 수도 수로 견준다.
따옴표 안에 숫자만 있으면 수처럼 보입니다.
console.log('3000' < '500');
console.log(3000 < 500);true
false1번 줄은 첫 글자 '3'과 '5'를 견주어 true입니다.
맞는 규칙: 따옴표 안은 글자라서 첫 글자부터 견줍니다. 수로 견주려면 Number()로 수를 만든 뒤 견줍니다.
틀린 생각: 담긴 값이 같은 두 배열은 === 연산자로 견주면 true다.
7단원에서 배울 배열(array)은 대괄호 안에 값을 차례로 담은 값입니다. [1, 2]를 두 번 쓰면 담긴 값이 같은 배열이 둘 생깁니다.
console.log([1, 2] === [1, 2]);false맞는 규칙: 배열끼리 견주면 === 연산자는 담긴 값이 아니라 같은 배열 하나인지를 묻습니다. 이 규칙은 8단원의 '객체를 넘기고 복사하기'에서 객체로 다시 봅니다.
확인 문제
1. 예제의 coffee를 3500으로 바꿨습니다. 무엇이 찍히는지 줄마다 그대로 쓰세요.
const coffee = 3500;
const latte = 4500;
console.log(coffee < latte);
console.log(coffee * 2 > 7000);
console.log(coffee !== 4000);힌트
이름 자리에 값을 넣고, 계산을 먼저 한 뒤 견줍니다.
정답
true
false
true4번 줄은 7000 > 7000이 되어 false입니다. 두 값이 같으면 크지 않습니다.
흔한 오답은 4번 줄의 true입니다. > 연산자를 '크거나 같다'로 읽은 것입니다. 같을 때도 true가 되게 하려면 >= 연산자를 씁니다.
2. 실행하면 true가 찍히도록 빈칸 셋에 등호 하나(=)나 셋(===)을 쓰세요.
let price ___ 4500;
const same ___ price ___ 4500;
console.log(same);힌트
값에 이름을 붙이는 자리인지, 같은지 묻는 자리인지 가립니다.
정답
차례로 등호 하나 · 하나 · 셋입니다.
let price = 4500;
const same = price === 4500;
console.log(same);true1번 줄은 price를 4500에 붙입니다. 2번 줄은 오른쪽 price === 4500이 먼저 true로 접히고, 그 값에 same이 붙습니다.
흔한 오답은 1번 줄에 등호 셋을 쓰는 것입니다(=== 연산자도 이름을 붙인다는 생각). 그러면 1번 줄이 문법 오류(SyntaxError)가 되어 한 줄도 실행되지 않습니다.
3. 걸음 수 앱이 입력 칸에서 받은 걸음 수를 목표와 견줍니다. 무엇이 찍히는지 줄마다 쓰세요.
const steps = '9000';
console.log(steps < 10000);
console.log(steps < '10000');
console.log(steps === 9000);힌트
줄마다 <·=== 연산자의 양쪽이 글자인지 수인지부터 보세요.
정답
true
false
false2번 줄은 한쪽이 수라서 '9000'을 수로 바꿔 9000 < 10000을 견줍니다.
3번 줄은 글자끼리라 첫 글자 '9'와 '1'을 견주고, '1'이 앞이라 false입니다.
4번 줄의 === 연산자는 종류를 바꾸지 않아 글자와 수가 같지 않습니다.
흔한 오답은 3번 줄의 true입니다. 따옴표 안의 수를 수로 견준 것입니다(문자열과 수를 가리지 않는 생각).
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
확인 문제 3의 코드(네 줄)를 main.js에 저장해 돌립니다. 그다음 4번 줄의 등호 셋을 둘로 바꾸면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.