자바스크립트의 값에는 종류가 있습니다. 3과 3.5는 수(number), 따옴표로 감싼 '3'은 문자열(string, 글자), true·false는 참·거짓을 나타내는 불리언(boolean)입니다. 같은 +도 값의 종류에 따라 더하기가 되기도 하고 이어 붙이기가 되기도 합니다.
화면에 찍힌 3만 봐서는 수인지 글자인지 알 수 없습니다. console.log가 문자열의 따옴표를 찍지 않기 때문입니다.
종류를 놓치면 4000원짜리 커피에 500원을 더했는데 4500이 아닌 엉뚱한 수가 찍힙니다. 자바스크립트는 이때 오류로 멈추지 않고 값의 종류를 바꿔 가며 계산을 이어 가서, 틀린 값이 조용히 만들어집니다.
이 레슨은 앞 단원에서 본 = 오른쪽의 값이 어떤 종류인지, 종류가 계산을 어떻게 바꾸는지 봅니다.
이 단원(수와 글자)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.
파이썬을 배웠다면 — 이 단원에서 다른 곳
파이썬을 배웠다면 이 단원에서 다른 곳: '3' * 3의 값 — 이 레슨 그림에서 먼저 맞혀 보세요(문자열 되풀이는 repeat). //는 주석이고, -7 % 2는 -1, 6 / 2는 3입니다 — 사칙 계산과 나머지. len()·int()가 없고 길이는 괄호 없는 .length입니다 — 문자열 잇기와 길이 · 글자를 수로: Number와 NaN.
1값의 세 종류: 수·문자열·불리언
자바스크립트는 값마다 종류를 붙여 둡니다. 먼저 쓰는 종류는 셋입니다.
| 종류 | 자바스크립트 이름 | 값의 예 | 알아보는 법 |
|---|---|---|---|
| 수 | number | 3 · 3.5 · -7 | 따옴표 없이 쓴 수 |
| 문자열 | string | '3' · '커피' | 따옴표로 감싼 글자 |
| 불리언 | boolean | true · false | 따옴표 없이 쓴 두 낱말 |
따옴표 안에 숫자만 있어도 문자열입니다. '3'은 수 3이 아니라 글자 3 한 개입니다.
작은따옴표 대신 큰따옴표로 감싼 "3"도 같은 문자열입니다. 이 과목은 작은따옴표를 씁니다.
수는 한 종류뿐입니다. 소수점이 없는 3도, 있는 3.5도 모두 number입니다.
불리언 값은 true(참)와 false(거짓) 둘뿐이고, 4단원에서 갈래를 고를 때 씁니다. 따옴표로 감싼 'true'는 불리언이 아니라 글자입니다.
종류는 이름이 아니라 값이 가진 것입니다. const x = '3';은 이름 x를 문자열 값 '3'에 붙입니다.
2typeof로 종류 확인하기
종류가 궁금하면 값 앞에 typeof를 붙여 찍어 봅니다.
console.log(3);
console.log('3');
console.log(typeof 3);
console.log(typeof '3');
console.log(typeof true);3
3
number
string
boolean1번 줄과 2번 줄은 똑같이 3을 찍지만, 하나는 수이고 하나는 글자입니다.
typeof 3은 3의 종류 이름을 글자 'number'로 돌려주고, console.log가 그 글자를 찍습니다.
typeof는 값 앞에 붙여 쓰는 낱말이라 괄호가 없어도 됩니다. 식의 종류를 보려면 typeof (3 + 4)처럼 식을 괄호로 묶습니다.
값이 없음을 나타내는 undefined·null도 값의 종류입니다. 다만 typeof null은 'object'라고 답하는데, 자바스크립트 첫 판의 실수가 고치지 못한 채 굳은 것입니다.
3종류가 계산을 정한다
=는 오른쪽을 먼저 계산해 값 하나를 만들고 이름을 붙입니다(규칙 2). 이때 자바스크립트는 값의 종류를 보고 할 일을 고릅니다. 그림의 코드입니다.
const a = '3' + '4';
const b = 3 + 4;
const c = '3' + 4;
const d = '3' * 3;
console.log(a, b, c, d);34 7 34 9같은 기호가 종류에 따라 다른 일을 합니다.
| 식 | 값 | 종류 | 하는 일 |
|---|---|---|---|
3 + 4 | 7 | number | 더하기 |
'3' + '4' | '34' | string | 이어 붙이기 |
'3' + 4 | '34' | string | 수 4를 글자 '4'로 바꿔 이어 붙이기 |
'3' * 3 | 9 | number | 글자 '3'을 수 3으로 바꿔 곱하기 |
'커피' * 2 | NaN | number | 수로 바꿀 수 없어 '수가 아님' |
+는 양쪽 가운데 하나라도 문자열이면 다른 쪽도 글자로 바꿔 이어 붙입니다. 빼기 -·곱하기 *·나누기 /는 거꾸로 문자열을 수로 바꿔 계산합니다.
'커피'처럼 수로 바꿀 수 없는 글자는 NaN이 됩니다. NaN은 Not-a-Number, 곧 '수가 아님'을 뜻하는 값입니다. 자세한 것은 글자를 수로: Number와 NaN 레슨에서 봅니다.
4오류 없이 틀린 값이 생긴다
글자와 수가 섞여도 자바스크립트는 멈추지 않아, 종류를 놓친 곳이 오류 메시지로 드러나지 않습니다. 가격을 따옴표로 감싸 두고 500원을 더하거나 두 잔 값을 찍으면 무엇이 찍힐까요?
const price = '4000';
console.log(price + 500);
console.log(price * 2);실행 결과 보기
4000500
8000예상과 다르면 그곳이 배울 곳입니다. price가 붙은 값은 따옴표로 감싼 문자열 '4000'입니다. 2번 줄의 +는 500을 글자로 바꿔 이어 붙여 '4000500'을 만듭니다. 3번 줄의 *는 '4000'을 수로 바꿔 곱해 8000입니다.
두 줄 모두 오류 없이 찍혔지만 2번 줄은 틀린 값입니다. 수로 계산하려면 따옴표 없이 const price = 4000;으로 씁니다.
찍힌 값이 이상하면 typeof로 종류부터 찍어 봅니다. typeof (price + 500)은 'string'이라, 더하기가 아니라 잇기가 일어났다고 알려 줍니다.
예제
카페 주문 한 줄을 찍습니다. 메뉴 이름은 글자, 잔 수와 가격은 수입니다.
const item = '커피';
const price = 4000;
const count = 2;
const total = price * count;
console.log(item, count, total);
console.log(typeof total);커피 2 8000
number4번 줄의 price * count는 수끼리 곱해 8000이고, 이름 total이 그 값에 붙습니다.
5번 줄처럼 console.log에 쉼표로 값을 넘기면 종류가 섞여도 바뀌지 않고, 빈칸을 끼워 차례로 찍힙니다.
자주 틀리는 곳
틀린 생각: 글자와 수를 섞어 계산하면 오류가 나서 바로 알 수 있다.
계산이 안 되는 값이면 멈출 것 같지만, 4절처럼 '4000' + 500은 오류 없이 '4000500'이 됩니다. +는 한쪽이 글자면 다른 쪽도 글자로 바꿔 잇고, 그 틀린 값이 조용히 다음 줄로 넘어갑니다.
맞는 규칙: +는 양쪽 가운데 하나라도 문자열이면 이어 붙이고, 틀린 값이 생겨도 멈추지 않습니다. 수로 계산할 값은 따옴표 없이 쓰고, 결과가 이상하면 typeof로 종류를 찍어 봅니다.
틀린 생각: 글자에 수를 곱하면 결과도 글자다.
+가 글자를 잇듯 *도 글자를 되풀이할 것 같지만, *는 글자를 수로 바꿔 곱합니다.
console.log('3' * 3);
console.log('커피' * 2);
console.log(typeof ('3' * 3));9
NaN
number1번 줄은 '3'을 수 3으로 바꿔 9를 내고, 2번 줄의 '커피'는 수로 바꿀 수 없어 NaN이 됩니다. 3번 줄처럼 결과의 종류는 수입니다.
맞는 규칙: 자바스크립트는 -·*·/를 만나면 문자열을 수로 바꿔 계산하고, 바꿀 수 없으면 NaN을 만듭니다. 글자를 이어 붙이는 기호는 + 하나뿐입니다.
틀린 생각: 화면에 같게 찍힌 두 값은 종류도 같다.
console.log는 문자열의 따옴표를 찍지 않아 글자 34와 수 34가 똑같아 보입니다. 그래도 두 값의 종류는 다릅니다.
console.log('34', 34);
console.log(typeof '34');
console.log(typeof 34);34 34
string
number1번 줄은 34를 두 번 찍었지만, 2번 줄과 3번 줄의 typeof는 앞의 34가 string, 뒤의 34가 number라고 알려 줍니다.
맞는 규칙: 종류는 화면의 글자가 아니라 값이 가진 것이라, 찍힌 모양으로는 가릴 수 없습니다. 종류가 궁금하면 typeof로 찍어 봅니다.
확인 문제
1. 예제의 3번 줄을 const count = '2';로 바꿨습니다. 무엇이 찍힐까요? 두 줄을 글자 그대로 쓰세요.
const item = '커피';
const price = 4000;
const count = '2';
const total = price * count;
console.log(item, count, total);
console.log(typeof total);힌트
4번 줄의 기호가 +인지 *인지 보세요.
정답
커피 2 8000
numbercount가 글자 '2'여도 4번 줄의 *는 '2'를 수 2로 바꿔 곱합니다. 그래서 total은 수 8000이고, 화면은 예제와 똑같습니다.
흔한 오답은 둘째 줄의 string입니다. 글자가 섞이면 결과도 글자라고 본 것입니다(문자열과 수를 가리지 않는 생각). 글자로 바뀌는 것은 +일 때뿐입니다.
2. 다음 코드가 34와 6을 두 줄로 찍도록 빈칸에 들어갈 값을 쓰세요.
const x = ____;
console.log(x + 4);
console.log(x * 2);힌트
2번 줄의 +가 더하기가 아니라 잇기가 되려면 x가 어떤 종류여야 할까요?
정답
'3'입니다. 큰따옴표 "3"도 같은 글자 '3'이라 맞습니다.
const x = '3';
console.log(x + 4);
console.log(x * 2);34
6x가 글자여야 + 4가 이어 붙이기가 되고, * 2는 '3'을 수로 바꿔 6을 냅니다.
흔한 오답은 따옴표 없는 3입니다. 그러면 2번 줄이 수끼리 더해 7을 찍습니다.
3. 수학 점수는 글자로, 영어 점수는 수로 적혀 있습니다. 무엇이 찍힐까요? 세 줄을 글자 그대로 쓰세요.
const math = '90';
const eng = 85;
const sum = math + eng;
console.log(sum);
console.log(math - eng);
console.log(typeof sum);힌트
3번 줄과 5번 줄은 기호만 다릅니다. 기호마다 글자를 어떻게 다루는지 3절 표에서 보세요.
정답
9085
5
string3번 줄의 +는 85를 글자로 바꿔 '90' 뒤에 이어 '9085'를 만들고, 이름 sum이 그 글자에 붙습니다. 5번 줄의 -는 '90'을 수 90으로 바꿔 빼서 5입니다. 6번 줄은 sum이 붙은 값의 종류라 string입니다.
흔한 오답은 첫 줄의 175입니다. 따옴표 안의 90도 수로 더한다고 본 것입니다(문자열과 수를 가리지 않는 생각).
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
3절의 코드(다섯 줄)를 main.js에 저장해 돌립니다. 그다음 4번 줄의 '3' * 3을 '3' + 3으로 바꾸면 5번 줄이 무엇을 찍을지 먼저 적고, 바꿔 돌려서 맞춰 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.