조건 자리에 true·false가 아닌 값이 오면 자바스크립트는 그 값을 참이나 거짓으로 칩니다. 거짓으로 치는 값을 거짓 같은 값(falsy), 나머지를 참 같은 값(truthy)이라고 부릅니다. ?? 연산자는 값이 null이나 undefined일 때만 기본값을 고릅니다.
앞 레슨에서 x === 1 || 2의 조건이 늘 참이었던 것은 2가 참 같은 값이기 때문입니다.
이 규칙은 '비었으면 이 값'처럼 기본값을 고를 때 쓰이는데, 0이나 빈 문자열까지 지워 버리는 함정이 있습니다.
1조건 자리의 값은 참이나 거짓으로 친다
if의 조건 자리나 ! 연산자 뒤에 수·문자열 같은 값이 오면, 자바스크립트는 그 값을 참이나 거짓으로 칩니다.
거짓 같은 값은 아래 여덟이고, 나머지 값은 모두 참 같은 값입니다.
| 거짓 같은 값 | 뜻 |
|---|---|
false | 거짓 |
0 | 수 0 |
'' | 빈 문자열(글자가 하나도 없는 문자열) |
NaN | 수로 나타낼 수 없는 계산 결과 |
null | 값이 없다고 일부러 적은 값 |
undefined | 아직 아무 값도 정해지지 않은 값(없는 자리의 글자 등) |
-0 · 0n | 이 과목에서는 쓰지 않는 수 |
글자가 하나라도 있는 문자열은 '0'이나 빈칸 하나 ' '이어도 참 같은 값입니다.
const memo = '';
if (memo) {
console.log(memo);
} else {
console.log('메모 없음');
}메모 없음memo는 빈 문자열이라 거짓 같은 값이고, else 덩어리가 실행됩니다.
2비었으면 다른 값을 고르는 ||
앞 레슨에서 본 대로 || 연산자는 왼쪽이 참 같은 값이면 왼쪽을, 거짓 같은 값이면 오른쪽 값을 돌려줍니다. 그래서 '비었으면 이 값'을 고를 때 씁니다.
const name = '';
console.log(name || '손님');손님입력 칸에 이름을 넣지 않아 빈 문자열이면 오른쪽 '손님'을 돌려줍니다. 이렇게 값이 없을 때 대신 쓰는 값을 기본값(default value)이라고 합니다.
30과 빈 문자열까지 지우는 ||
재고를 셌더니 0개입니다. 아래 코드는 무엇을 찍을까요? 답을 정한 뒤 펼쳐 보세요.
const stock = 0;
console.log(stock || '모름');실행 결과 보기
모름예상과 다르면 그곳이 배울 곳입니다.
0은 거짓 같은 값이라 || 연산자가 오른쪽 '모름'을 돌려줍니다. 0개라는 제 값이 기본값에 지워졌습니다.
|| 연산자는 0·빈 문자열처럼 제 값일 수 있는 것도 '없음'으로 칩니다. 0이나 빈 문자열이 뜻 있는 값이면 다음 절의 ?? 연산자를 씁니다.
4null과 undefined일 때만 고르는 ??
?? 연산자(자료에 따라 널 병합 연산자라고도 부릅니다)는 왼쪽이 null이나 undefined일 때만 오른쪽 값을 돌려주고, 그 밖에는 왼쪽 값을 그대로 둡니다.
const stock = 0;
console.log(stock ?? '모름');
const word = 'cat';
console.log(word[5] ?? '없음');0
없음0은 null·undefined가 아니라서 0이 그대로 남습니다. word[5]는 없는 자리라 undefined이고, 그래서 '없음'을 돌려줍니다.
두 연산자를 견주면 이렇습니다. a가 왼쪽 값, b가 기본값입니다.
왼쪽 값 a | a || b | a ?? b |
|---|---|---|
0 | b | 0 |
'' | b | '' |
null · undefined | b | b |
'커피'(참 같은 값) | '커피' | '커피' |
예제
카페 주문 화면의 세 줄을 찍습니다. 주문이 비었는지, 메모가 있는지, 재고가 몇 개인지를 저마다 맞는 방법으로 묻습니다.
const orders = [];
const memo = '';
const stock = 0;
if (orders.length === 0) {
console.log('주문 없음');
}
console.log(memo || '메모 없음');
console.log(stock ?? '모름');주문 없음
메모 없음
0orders는 7단원에서 배울 배열이고,[]는 빈 배열입니다. 배열이 비었는지는 담긴 값의 수.length로 묻습니다(4번 줄).- 빈 메모는 '없음'으로 쳐도 되니
||연산자로 기본값을 고릅니다(7번 줄). - 재고 0은 제 값이니
??연산자로undefined·null일 때만 기본값을 고릅니다(8번 줄).
과목 끝의 할 일 앱에서도 빈 배열은 참 같은 값이라 목록이 비었는지는 todos.length === 0으로 묻고, 비었으면 안내 글을 보입니다.
자주 틀리는 곳
틀린 생각: 빈 배열은 거짓 같은 값이다.
비어 있으니 '없음'처럼 보입니다. 그러나 아래 코드는 주문이 하나도 없는데 주문 있음을 찍습니다.
const orders = [];
if (orders) {
console.log('주문 있음');
} else {
console.log('주문 없음');
}주문 있음빈 배열은 거짓 같은 값 여덟에 들지 않아 참 같은 값입니다.
맞는 규칙: 배열은 비어 있어도 참 같은 값입니다. 비었는지는 orders.length === 0처럼 길이로 묻습니다.
틀린 생각: '0'이나 빈칸 하나 ' '도 거짓 같은 값이다.
0과 빈 문자열이 거짓 같은 값이니 닮은 두 값도 그럴 것 같습니다. 그러나 둘 다 글자가 하나 있는 문자열입니다.
const qty = '0';
const memo = ' ';
if (qty && memo) {
console.log('둘 다 참');
}둘 다 참맞는 규칙: 문자열은 글자가 하나도 없을 때만 거짓 같은 값입니다. 입력 칸에서 온 글자는 trim()으로 빈칸을 떼거나 Number()로 수를 만든 뒤 묻습니다.
틀린 생각: || 연산자로 고른 기본값은 값이 없을 때만 쓰인다.
'비었으면 1잔'처럼 읽힙니다. 그러나 0잔을 주문했는데 1잔이 됩니다.
const qty = 0;
console.log(qty || 1);
console.log(qty ?? 1);1
0맞는 규칙: || 연산자는 거짓 같은 값이면 모두 기본값으로 바꿉니다. 0이나 빈 문자열을 지키려면 null·undefined일 때만 바꾸는 ?? 연산자를 씁니다.
확인 문제
1. 예제의 2번 줄을 const memo = '0';으로 바꿨습니다. 무엇이 찍히는지 줄마다 그대로 쓰세요.
const orders = [];
const memo = '0';
const stock = 0;
if (orders.length === 0) {
console.log('주문 없음');
}
console.log(memo || '메모 없음');
console.log(stock ?? '모름');힌트
7번 줄에서 '0'이 거짓 같은 값 여덟에 드는지 보세요.
정답
주문 없음
0
0'0'은 글자가 하나 있는 문자열이라 참 같은 값입니다. 그래서 7번 줄의 || 연산자가 왼쪽 '0'을 돌려주고, console.log가 따옴표 없이 0을 찍습니다. 8번 줄은 예제와 같습니다.
흔한 오답은 둘째 줄의 메모 없음입니다. 따옴표 안의 0도 수 0처럼 거짓 같은 값이라고 본 것입니다.
2. 주문이 비었으면 주문 없음을 찍고, 재고는 0이어도 그대로 찍되 null·undefined일 때만 모름을 찍으려 합니다. 빈칸 둘을 채우세요.
const orders = [];
const stock = 0;
if (orders.length ___ 0) {
console.log('주문 없음');
}
console.log(stock ___ '모름');힌트
첫 빈칸은 길이가 0과 같은지 묻는 연산자, 둘째 빈칸은 null·undefined일 때만 기본값을 고르는 연산자입니다.
정답
차례로 === 연산자와 ?? 연산자이고, 주문 없음과 0이 찍힙니다.
다르게 써도 되는 곳: 길이는 0보다 작아지지 않으니 첫 빈칸에 <= 연산자를 써도 같습니다.
흔한 오답은 둘째 빈칸의 || 연산자입니다. 0이 거짓 같은 값이라 재고 0개가 모름으로 바뀝니다.
3. 성적 앱이 아직 넣지 않은 점수를 null로 적습니다. 무엇이 찍히는지 줄마다 쓰세요.
const math = 0;
const art = null;
console.log(math || '미입력');
console.log(math ?? '미입력');
console.log(art ?? '미입력');힌트
줄마다 왼쪽 값이 거짓 같은 값인지, null·undefined인지를 따로 보세요.
정답
미입력
0
미입력3번 줄은 0이 거짓 같은 값이라 '미입력'을 돌려줍니다. 4번 줄은 0이 null·undefined가 아니라 0이 남습니다. 5번 줄은 null이라 '미입력'입니다.
흔한 오답은 첫 줄의 0입니다. ||·?? 연산자가 같은 일을 한다고 본 것입니다. 0점도 점수이니 이 앱에는 ?? 연산자가 맞습니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
4절 코드(네 줄)를 main.js에 저장해 돌립니다. 그다음 2·4번 줄의 ?? 연산자를 || 연산자로 바꾸면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.