문자열은 글자를 차례로 늘어놓은 값입니다. +로 두 문자열을 이어 새 문자열을 만들고, .length로 글자 수를 셉니다. 수를 글자로 적은 새 문자열은 String()으로 만듭니다.
주문 문구 '커피 두 잔'은 메뉴 이름 뒤에 수량 문구를 이어 붙여 만듭니다. 입력 칸에 친 글이 너무 길지 않은지는 글자 수로 봅니다. 그런데 수에 글자 수를 물으면 오류도 없이 엉뚱한 값이 나옵니다. 이 레슨은 문자열을 잇고 세는 법과, 수를 글자로 바꾸는 법을 봅니다.
1잇기: +는 새 문자열을 만든다
두 문자열 사이의 +는 앞 문자열의 글자 뒤에 뒤 문자열의 글자를 차례로 이어 새 문자열 하나를 만듭니다.
const drink = '커피';
const msg = drink + ' 두 잔';
console.log(msg);
console.log(drink + '두 잔');
console.log(drink);커피 두 잔
커피두 잔
커피+는 빈칸을 넣어 주지 않습니다. 2번 줄은 ' 두 잔'의 맨 앞에 빈칸이 있어 '커피 두 잔'이 되고, 4번 줄은 빈칸 없이 붙어 '커피두 잔'이 됩니다.
이어 붙인 결과는 새 값입니다. 오른쪽이 새 문자열 하나로 계산되고 이름 msg가 그 값에 붙을 뿐이라(규칙 2), 5번 줄의 drink는 그대로 '커피'입니다.
이 단원 첫 레슨에서 본 것처럼 +의 한쪽만 문자열이어도 다른 쪽을 글자로 바꿔 잇습니다. +가 여럿이면 왼쪽부터 하나씩 계산합니다. 아래 두 줄은 무엇을 찍을까요?
const a = 4000;
const b = 500;
console.log(a + b + '원');
console.log('합계 ' + a + b);실행 결과 보기
4500원
합계 4000500예상과 다르면 그곳이 배울 곳입니다. 3번 줄은 왼쪽의 a + b부터 계산해 수 4500을 만들고, 그다음 '원'과 이어 '4500원'입니다.
4번 줄은 '합계 ' + a부터 계산해 문자열 '합계 4000'이 됩니다. 그 뒤의 + b는 문자열 뒤에 500을 잇게 되어 '합계 4000500'입니다. 더한 값을 이으려면 '합계 ' + (a + b)처럼 괄호로 먼저 더합니다.
2.length로 글자 수 세기
문자열 뒤에 .length를 붙이면 그 문자열의 글자 수가 나옵니다.
const word = '커피 두 잔';
console.log(word.length);
console.log('a b'.length);
console.log(''.length);6
3
0한글 한 자는 한 글자이고, 빈칸도 한 글자입니다. '커피 두 잔'은 한글 넷과 빈칸 둘이라 6입니다. 따옴표 사이에 아무것도 없는 빈 문자열 ''은 0입니다.
.length는 문자열 값이 가진 정보(속성, property)라서 괄호를 붙이지 않습니다. 괄호를 붙이면 멈춥니다.
const word = '커피';
console.log(word.length());main.js:2console.log(word.length()); ^ TypeError: word.length is not a function at main.js:2:18TypeError 줄부터 읽습니다. word.length is not a function은 'word.length는 함수(function)가 아니다', 곧 부를 수 없는 것을 불렀다는 뜻입니다.
괄호 ()는 console.log()처럼 부를 때 붙입니다. .length는 부를 것이 아니라 이미 있는 값 2라서, ^가 가리키는 length 자리에서 멈췄습니다.
3수를 글자로: String()
가격 4000의 자릿수를 세려고 수에 바로 .length를 붙이면 무엇이 찍힐까요?
const price = 4000;
console.log(price.length);
const text = String(price);
console.log(text.length);
console.log(price);실행 결과 보기
undefined
4
4000예상과 다르면 그곳이 배울 곳입니다. 2번 줄은 오류 없이 undefined를 찍습니다. undefined는 '아직 아무 값도 정해지지 않았다'는 뜻의 값입니다. 수에는 글자 수라는 정보가 없어서 없는 것을 읽은 셈인데, 자바스크립트는 이때 멈추지 않고 undefined를 줍니다.
String()은 괄호 안의 값을 글자로 적은 새 문자열을 만들어 돌려줍니다. String(4000)은 글자 네 개짜리 문자열 '4000'입니다. 그래서 4번 줄은 4를 찍습니다.
5번 줄처럼 price는 그대로 수 4000에 붙어 있습니다. 3번 줄의 String()이 만든 새 문자열 '4000'에 이름 text를 붙였을 뿐입니다.
잇기만 할 때는 +가 수를 글자로 바꿔 주지만, 바꾼 글자에 따로 이름을 붙여 쓸 때는 String()으로 만듭니다.
4줄바꿈 글자 \n
문자열 안에 역슬래시(\)와 n을 붙여 쓴 \n은 줄바꿈 글자 하나를 뜻합니다. console.log는 이 글자를 만나면 줄을 바꿔 찍습니다.
console.log('커피\n라테');
console.log('a\nb'.length);커피
라테
3'a\nb'는 a, 줄바꿈, b 세 글자라 2번 줄이 3을 찍습니다. 쓸 때는 두 글자(\와 n)지만 문자열 안에서는 한 글자입니다.
예제
영수증 한 줄을 만들고 글자 수를 셉니다. 가격은 String()으로 글자를 만들어 잇고, 머리 줄은 \n으로 바꿔 한 번에 찍습니다.
const item = '커피';
const price = 4000;
const text = String(price);
const line = item + ' ' + text;
console.log(line);
console.log(line.length);
console.log('주문\n' + line);커피 4000
7
주문
커피 40004번 줄은 메뉴와 가격 사이에 빈칸 ' '을 직접 끼워 넣습니다. +는 빈칸을 저절로 넣지 않기 때문입니다.
6번 줄의 7은 한글 둘, 빈칸 하나, 숫자 넷을 센 값입니다. 7번 줄은 '주문' 뒤의 \n에서 줄이 바뀌어 두 줄로 찍힙니다.
자주 틀리는 곳
틀린 생각: .length는 눈에 보이는 글자만 센다.
빈칸은 보이지 않아 글자 수에서 빼기 쉽고, 한글은 영어 글자보다 넓어 두 글자로 세기 쉽습니다. 그러나 .length는 화면 폭이 아니라 글자를 하나씩 셉니다. 'a b'.length는 a, 빈칸, b를 세어 3이고, '안녕'.length는 2입니다.
맞는 규칙: .length는 빈칸까지 글자를 하나씩 세고, 한글 한 자도 영어 한 자처럼 한 글자로 셉니다.
틀린 생각: 수에도 .length가 있어 자릿수를 세어 준다.
문자열에 .length가 있으니 걸음 수 12350에도 자릿수 5가 나올 것 같지만, 수에는 글자 수라는 정보가 없습니다.
const steps = 12350;
console.log(steps.length);
const text = String(steps);
console.log(text.length);undefined
52번 줄은 오류 없이 undefined를 찍고, 4번 줄은 String()이 만든 글자 '12350'을 세어 5입니다.
맞는 규칙: 수·문자열에 없는 정보를 읽으면 자바스크립트는 멈추지 않고 undefined를 줍니다. 수의 자릿수가 필요하면 String()으로 글자를 만든 뒤 .length로 셉니다.
틀린 생각: \n은 역슬래시와 n, 두 글자다.
코드에는 두 글자로 쓰니 글자 수도 2일 것 같지만, '\n'.length는 1입니다.
맞는 규칙: 문자열 안의 \n은 쓸 때만 두 글자이고, 값으로는 줄바꿈 글자 하나입니다. console.log는 그 글자에서 줄을 바꿉니다.
확인 문제
1. 예제의 2번 줄을 const price = 12000;으로 바꿨습니다. 무엇이 찍힐까요? 네 줄을 글자 그대로 쓰세요.
const item = '커피';
const price = 12000;
const text = String(price);
const line = item + ' ' + text;
console.log(line);
console.log(line.length);
console.log('주문\n' + line);힌트
3번 줄이 만드는 글자 '12000'의 글자 수부터 세 보세요.
정답
커피 12000
8
주문
커피 12000line은 '커피 12000'이라 한글 둘, 빈칸 하나, 숫자 다섯을 세어 8입니다. 마지막 줄은 \n에서 줄이 바뀌어 두 줄입니다.
흔한 오답은 둘째 줄의 7입니다. 예제의 글자 수를 그대로 쓴 것입니다. 가격의 자릿수가 하나 늘었습니다.
2. 가격 4000의 자릿수 4가 찍히도록 빈칸을 채우세요.
const price = 4000;
const text = ____;
console.log(text.length);힌트
3번 줄이 글자 수를 세려면 text가 어떤 종류의 값에 붙어 있어야 할까요?
정답
String(price)입니다.
const price = 4000;
const text = String(price);
console.log(text.length);4price + ''처럼 빈 문자열을 이어 글자를 만들어도 4가 찍혀 맞습니다. '4000'을 직접 써도 4가 찍히지만, 1번 줄의 price를 바꾸면 따라 바뀌지 않습니다.
흔한 오답은 price입니다. 수에도 글자 수가 있다고 본 것입니다. 그러면 text가 수 4000에 붙어 3번 줄이 undefined를 찍습니다.
3. 이틀 동안 걸은 걸음 수를 찍습니다. 무엇이 찍힐까요? 두 줄을 글자 그대로 쓰세요.
const mon = 3000;
const tue = 2000;
console.log('걸음 ' + mon + tue);
console.log(mon + tue + '걸음');힌트
+를 왼쪽부터 하나씩 계산하세요. 맨 왼쪽 두 값이 글자인지 수인지에 따라 첫 +가 하는 일이 갈립니다.
정답
걸음 30002000
5000걸음3번 줄은 '걸음 '과 3000을 먼저 이어 문자열이 되고, 그 뒤에 2000을 또 이어 붙입니다. 4번 줄은 수끼리 먼저 더해 5000을 만든 뒤 '걸음'과 잇습니다.
흔한 오답은 첫 줄의 걸음 5000입니다. 수끼리는 언제나 먼저 더한다고 본 것입니다(문자열과 수를 가리지 않는 생각). 더한 값을 이으려면 '걸음 ' + (mon + tue)처럼 괄호로 묶습니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
예제(영수증 한 줄)를 main.js에 저장해 돌립니다. 그다음 6번 줄의 line.length를 line.length()로 바꾸면 무슨 일이 일어날지 먼저 적고, 바꿔 돌려서 오류 메시지의 TypeError 줄과 맞춰 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.