단원 연습 문제

3~5번 줄마다 +·* 양쪽에 오는 값을 1·2번 줄에서 찾아 적어 보세요.

두 이름이 붙은 값의 종류부터 가르세요. 5번 줄은 +를 왼쪽부터 하나씩 계산해 봅니다.

25
10
62

• 1·2번 줄: 이름 zone은 문자열 '2'에, seat는 수 5에 붙습니다.
• 3번 줄: +의 한쪽이 문자열이라 5를 글자로 바꿔 이어 붙여 '25'입니다.
• 4번 줄: *는 '2'를 수 2로 바꿔 곱해 10입니다.
• 5번 줄: 왼쪽의 seat + 1부터 계산해 수 6을 만들고, 그다음 6 + '2'는 한쪽이 문자열이라 이어 붙여 '62'입니다.

흔한 오답은 첫 줄의 7입니다. 따옴표 안의 2도 수로 더한다고 본 것입니다(문자열과 수를 가리지 않는 생각). 그렇게 보면 셋째 줄도 8이 됩니다. 셋째 줄을 512로 쓰면 문자열이 하나라도 든 식은 처음부터 이어 붙인다고 본 것입니다. +는 왼쪽부터 하나씩 계산하고, 수끼리인 5 + 1은 더합니다.

파이썬에서는 '2' * 5가 '22222' — 자바스크립트는 *가 글자를 수로 바꿔 10입니다(되풀이는 repeat).

다시 볼 레슨: 수·글자·불리언과 typeof · 문자열 잇기와 길이

2번 줄과 3번 줄의 기호를 견주어 보세요. /가 하나인지 둘인지 봅니다.

5 15
7.5

• 2번 줄: 15를 3으로 나눈 5에 이름 each가 붙습니다. 수는 한 종류라 나누어떨어지면 소수점 없이 5입니다.
• 3번 줄: //부터 그 줄 끝까지는 주석이라 실행하지 않습니다. 실행되는 것은 const bags = cookies뿐이라 bags는 15에 붙습니다. 줄 끝의 ;도 주석에 들지만, 다음 줄이 (로 시작하지 않아 문장은 이 줄에서 끝납니다.
• 4번 줄: 두 값 사이에 빈칸 하나를 넣어 5 15를 찍습니다.
• 5번 줄: /는 소수점 아래까지 나눠 7.5입니다.

흔한 오답은 첫 줄의 5 2입니다. //를 몫을 내는 기호로 본 것입니다. 몫은 Math.floor(15 / 7)로 구합니다. 3번 줄에서 오류가 난다고 봤다면 주석은 줄 머리에만 쓴다고 본 것입니다. //는 줄 가운데에 와도 그 뒤 끝까지가 주석입니다. 둘째 줄을 7로 쓰면 /가 몫을 낸다고 본 것입니다(/가 몫이라는 생각).

파이썬에서는 15 / 3이 5.0이고 //가 몫이라 5.0 2 — 자바스크립트는 수가 한 종류라 5이고, //부터 줄 끝이 주석이라 bags는 15입니다.

다시 볼 레슨: 사칙 계산과 나머지 · 프로그램은 위에서 아래로

값 두기 → 계산하기 → 찍기 차례입니다. 모둠 수는 나눈 값을 내림한 것, 남는 학생은 나머지입니다.

㉡이 아니라 ㉤을 쓰는 까닭은 무엇일까요?

• ① Math.floor()는 내린 새 값을 돌려줄 뿐이라, teams를 그 값에 다시 붙여야 7로 옮겨 가기 때문
• ② 까닭은 없다. ㉡도 teams를 7로 바꾸므로 어느 쪽을 써도 결과가 같다
• ③ 둘 다 필요 없다. ㉦에서 /가 이미 몫 7을 내기 때문

㉢ ㉦ ㉤ ㉥ ㉠ ㉣ 차례이고, 까닭은 ①입니다.

const kids = 29;
let teams = kids / 4;
teams = Math.floor(teams);
const left = kids % 4;
console.log('모둠', teams);
console.log('남는 학생', left);

모둠 7
남는 학생 1

• 바꿔도 되는 줄: ㉥은 ㉢ 뒤, ㉣ 앞이면 어디에 두어도 됩니다 — ㉢ ㉥ ㉦ ㉤ ㉠ ㉣ · ㉢ ㉦ ㉥ ㉤ ㉠ ㉣ · ㉢ ㉦ ㉤ ㉠ ㉥ ㉣도 맞습니다. 이름을 붙이는 줄이 그 이름을 읽는 줄보다 위에 있고(규칙 1·2), 찍는 줄이 결과의 차례대로면 맞습니다.
• 쓰지 않는 줄은 ㉡입니다. ㉤ 자리에 ㉡을 쓰면 첫 줄이 모둠 7.25로 찍힙니다. ㉡은 내린 새 값 7을 만들기만 하고 아무 이름도 붙이지 않아, teams는 7.25에 그대로 붙어 있습니다.

②는 Math.floor()를 부르기만 하면 teams가 바뀐다고 본 것입니다. 이름을 새 값으로 옮기는 것은 대입뿐입니다(규칙 3). ③은 /가 몫을 낸다고 본 것입니다(/가 몫이라는 생각). 29 / 4는 7.25입니다.

다시 볼 레슨: 사칙 계산과 나머지

5번 줄의 .length가 무엇을 세는지, 3번 줄의 \n이 몇 글자인지 보세요.

김 하나
4
5

• 2번 줄: '김' 뒤에 ' 하나'를 이은 '김 하나'에 name이 붙습니다. ' 하나'의 맨 앞 빈칸이 성과 이름 사이에 들어갑니다.
• 3번 줄: '김 하나' 뒤에 줄바꿈 글자 \n을 이은 새 값에 line이 붙습니다.
• 4번 줄: name이 붙은 '김 하나'를 찍습니다.
• 5번 줄: 한글 셋과 빈칸 하나라 4글자입니다.
• 6번 줄: '김 하나'의 4글자에 줄바꿈 글자 하나를 더해 5글자입니다.

흔한 오답은 둘째 줄의 7입니다. 한글 한 자를 두 글자로 센 것입니다. 3으로 쓰면 빈칸을 글자로 세지 않은 것입니다. 셋째 줄을 6으로 쓰면 \n을 쓴 대로 두 글자로 센 것입니다. 문자열 안의 \n은 줄바꿈 글자 하나입니다.

다시 볼 레슨: 문자열 잇기와 길이

줄마다 이름 tag와 old가 어느 값에 붙는지 이름표를 옮겨 그려 보세요.

손님
김 하나 님 6

• 1번 줄: tag가 '손님'에 붙습니다.
• 2번 줄: old를 tag가 붙은 바로 그 '손님'에 붙입니다. 이제 '손님'에는 이름표가 둘입니다.
• 3번 줄: tag만 '김 하나'에 다시 붙입니다. old는 '손님'에 그대로 붙어 있습니다.
• 4번 줄: 지금 붙은 '김 하나' 뒤에 ' 님'을 이은 새 값을 만들고, tag를 그 값에 다시 붙입니다.
• 5·6번 줄: old가 붙은 '손님'을 찍고, tag가 붙은 '김 하나 님'과 그 글자 수 6을 빈칸 하나로 이어 찍습니다. 한글 넷과 빈칸 둘입니다.

흔한 오답은 둘째 줄을 손님김 하나 님으로 시작하는 답입니다. tag를 값이 쌓이는 상자로 봐서 옛 값이 남는다고 본 것입니다(상자 생각). 첫 줄을 김 하나 님으로 쓰면 old가 이름 tag를 따라 움직인다고 본 것입니다. 다시 붙이면 그 이름의 옛 연결만 끊기고, 같은 값에 붙은 다른 이름은 그대로입니다(규칙 3).

다시 볼 레슨: 이름표 다시 붙이기와 const · 문자열 잇기와 길이

2~4번 줄의 Number()가 글마다 무엇을 만드는지 먼저 정하세요. 7번 줄은 + 양쪽 값의 종류를 봅니다.

3
NaN
30

• 2번 줄: 글 '3'으로 수 3을 만들어 apple을 붙입니다. text는 그대로 글자 '3'에 붙어 있습니다.
• 3번 줄: '2개'는 수 뒤에 다른 글자가 섞여 수 꼴이 아니라 NaN입니다.
• 4번 줄: 빈 문자열은 0으로 읽습니다.
• 5번 줄: 3 + 0 = 3입니다.
• 6번 줄: NaN이 든 계산은 어떤 수를 더해도 NaN입니다.
• 7번 줄: text는 글자 '3'이라 +가 0을 글자로 바꿔 이어 '30'입니다.

흔한 오답은 첫 줄의 NaN입니다. 빈 글은 수로 바꿀 수 없어 NaN이 된다고 본 것입니다. 둘째 줄을 5로 쓰면 Number()가 앞의 수만 읽는다고 본 것입니다. 앞의 수만 읽는 것은 parseInt()입니다. 셋째 줄을 3으로 쓰면 2번 줄이 text까지 수로 바꿨다고 본 것입니다(문자열과 수를 가리지 않는 생각). Number()는 새 수를 만들 뿐 글을 고치지 않습니다.

다시 볼 레슨: 글자를 수로: Number와 NaN

넷 다 2단원 레슨의 예제에 나온 이름입니다. 그 일을 하던 예제 코드 한 줄을 떠올려 보세요.

넷 가운데 둘은 이름 뒤에 괄호를 붙여 부르는 함수입니다. 하나는 값 앞에 붙여 쓰는 낱말이고, 하나는 문자열 뒤에 점을 찍어 읽는 정보입니다.

받는 답: (가) typeof · (나) length · (다) Number · (라) String

• 같은 답으로 치는 꼴: 점까지 붙인 .length, 값까지 넣어 쓴 typeof x · s.length · Number('20') · String(4500), 괄호까지 붙인 Number() · String().
• 틀리는 꼴 length() — (나)에: .length는 부르는 함수가 아니라 이미 있는 값이라, 괄호를 붙이면 TypeError로 멈춥니다(… is not a function).
• 틀리는 꼴 len · int · str — (나)·(다)·(라)에: 자바스크립트에 없는 이름이라 ReferenceError로 멈춥니다(len is not defined).
• 틀리는 꼴 String — (다)에: 거꾸로, 수로 글자를 만드는 이름입니다. (라)에 쓴 Number도 같은 까닭으로 틀립니다. 대소문자가 다른 number도 없는 이름이라 ReferenceError입니다.
• 틀리는 꼴 console.log — (가)에: 값을 찍을 뿐 종류는 알려 주지 않습니다. 글자 '20'과 수 20은 똑같이 20으로 찍힙니다.

파이썬에서는 len(s) · int('20') · str(4500) — 자바스크립트는 s.length · Number('20') · String(4500)이고, len · int · str은 없는 이름입니다.

다시 볼 레슨: 수·글자·불리언과 typeof · 문자열 잇기와 길이 · 글자를 수로: Number와 NaN

3번 줄의 length 뒤에 붙은 괄호를 보세요. 그다음 2번 줄이 실행되는지 봅니다.

③ — 실행 결과는 이렇습니다.

아이스티 4main.js:3console.log(menu.length() + 1);                 ^ TypeError: menu.length is not a function    at main.js:3:18

2번 줄은 쉼표로 넘긴 두 값 사이에 빈칸을 넣어 아이스티 4를 찍습니다. 3번 줄은 이미 있는 값 4인 menu.length에 괄호를 붙여 불러 TypeError로 멈춥니다. 실행 중 오류라 앞에서 찍은 아이스티 4는 남고, 4번 줄은 실행되지 않습니다. 결과 끝의 at main.js:3:18이 실행 중 오류의 표시입니다.

• ① 글자 수도 괄호를 붙여 부른다고 봤습니다. .length는 문자열이 가진 정보라 괄호 없이 씁니다.
• ② 실행 중 오류를 문법 오류처럼 봤습니다. 쓰는 법에는 맞아 실행이 시작되고, 부를 수 없다는 것은 3번 줄을 실행할 때 알게 됩니다.
• ④ 오류가 난 줄만 건너뛴다고 봤습니다. 실행은 오류가 난 그 줄에서 멈춥니다(규칙 1).

파이썬에서는 len(menu) — 자바스크립트는 괄호 없는 menu.length입니다(괄호를 붙이면 TypeError).

다시 볼 레슨: 문자열 잇기와 길이 · 오류 메시지 읽기

이름 bonus가 몇 번 줄에서 처음 나오는지 보세요.

4번 줄 앞에 이름을 만드는 낱말이 있는지 보세요.

350 한 줄을 찍고 4번 줄에서 멈춥니다.

350main.js:4bonus = points * 2;      ^ ReferenceError: bonus is not defined    at main.js:4:7

• 1·2번 줄: points가 300에 붙었다가, 300 + 50으로 만든 350에 다시 붙습니다. 2번 줄은 이미 있는 이름이라 let 없이 다시 붙입니다.
• 3번 줄: 350을 찍습니다.
• 4번 줄: let 없는 bonus = …는 이미 있는 이름 bonus를 다시 붙이라는 문장인데, 그런 이름이 없어 ReferenceError로 멈춥니다. 5번 줄은 실행되지 않습니다.

흔한 오답은 350 다음 700까지 쓴 답입니다. =만 쓰면 새 이름이 생긴다고 본 것입니다. 이름은 let·const가 만듭니다(규칙 2). 4번 줄을 const bonus = points * 2;⁠로 고치면 700이 찍힙니다.

파이썬에서는 bonus = points * 2가 이름 bonus를 만듭니다 — 자바스크립트는 let·const 없이 쓴 새 이름이 ReferenceError입니다.

다시 볼 레슨: 변수: let으로 이름 붙이기

틀린 값이 처음 생긴 줄을 찾고, 그 줄에 쓰인 이름이 몇 번 줄에서 어떤 값에 붙었는지 봅니다.

2번 줄을 const before = Number(text);⁠로 고칩니다.

const text = '120';
const before = Number(text);
const today = 35;
const total = before + today;
console.log('읽은 쪽', total);

읽은 쪽 155

틀린 값은 5번 줄에서 보였지만 처음 생긴 곳은 4번 줄이고, 까닭은 2번 줄에 있습니다. 2번 줄이 수를 만들지 않아 before가 글자 '120'에 그대로 붙었고, 그래서 4번 줄의 +가 35를 글자로 바꿔 이어 붙였습니다. 글을 수로 바꿔 계산하는 네 걸음 가운데 '2. 수로 바꾸기'가 빠진 것입니다. 자바스크립트는 여기서 오류를 내지 않으니, 찍힌 값이 이상하면 그 값이 처음 생긴 줄부터 거슬러 올라갑니다.

• 다르게 고쳐도 되는 곳: 4번 줄에서 Number(before) + today⁠로 더해도 155가 찍힙니다. 다만 before는 여전히 글자에 붙어 있어, 다른 줄에서 계산할 때마다 또 수를 만들어야 합니다. 2번 줄에 parseInt(text)나 text * 1을 써도 이 글에서는 155가 찍힙니다. 이 과목은 무엇을 하는지 드러나는 Number()를 씁니다.
• 흔한 오답은 4번 줄의 두 값 차례를 바꾸는 것입니다. 수가 앞에 오면 더할 것 같지만, +는 한쪽이 글자면 차례와 상관없이 이어 붙입니다(문자열과 수를 가리지 않는 생각).

const text = '120';
const before = text;
const today = 35;
const total = today + before;
console.log('읽은 쪽', total);

읽은 쪽 35120

다시 볼 레슨: 글자를 수로: Number와 NaN · 수·글자·불리언과 typeof

합계는 두 값을 더한 것, 잔돈은 10000에서 합계를 뺀 것입니다. 천 원짜리 장 수는 잔돈을 1000으로 나눠 소수점 아래를 내린 것입니다.

모범 답입니다.

// 1. 글 받기
let milk = '3200';
let egg = '4500';
// 2. 수로 바꾸기
milk = Number(milk);
egg = Number(egg);
// 3. 계산하기
const total = milk + egg;
const change = 10000 - total;
let bills = change / 1000;
bills = Math.floor(bills);
// 4. 찍기
console.log('합계', total);
console.log('잔돈', change);
console.log('천 원', bills);

합계 7700
잔돈 2300
천 원 2

'6400'과 '2900'이면 total은 9300, change는 700, bills는 0.7에 붙었다가 내린 0입니다.

• 다르게 써도 되는 곳: '2. 수로 바꾸기'에서 만든 수에 새 이름을 붙여도 되고(const price = Number(milk);), 합계 줄에서 Number(milk) + Number(egg)⁠로 바로 더해도 됩니다. 천 원짜리는 Math.floor(change / 1000) 한 줄로 구해도 됩니다.
• 찍은 화면이 위와 같고 둘째 시험 값('6400' · '2900')도 맞으면 맞습니다.
• 흔한 오답 하나는 '2. 수로 바꾸기'를 빠뜨리는 것입니다. +가 두 글을 이어 붙이고, 빼기는 그 글을 수로 바꿔 오류 없이 엉뚱한 수를 만듭니다(문자열과 수를 가리지 않는 생각).

let milk = '3200';
let egg = '4500';
const total = milk + egg;
const change = 10000 - total;
console.log('합계', total);
console.log('잔돈', change);

합계 32004500
잔돈 -31994500

• 다른 흔한 오답은 Math.floor()로 내리지 않는 것입니다. 그러면 천 원 2.3이 찍히고, 둘째 시험 값에서는 천 원 0.7이 찍힙니다(/가 몫이라는 생각).

다시 볼 레슨: 글자를 수로: Number와 NaN · 사칙 계산과 나머지

하위 목표 셋의 주석(1. 값 두기 · 2. 계산하기 · 3. 찍기)을 먼저 쓰고, 그 아래를 채웁니다.

모범 답입니다.

// 1. 값 두기
const latte = 4500;
const cups = 2;
const cookie = 2000;
const count = 3;
// 2. 계산하기
const drinks = latte * cups;
const snack = cookie * count;
const total = drinks + snack;
// 3. 찍기
console.log('라테:', drinks);
console.log('쿠키:', snack);
console.log('합계:', total);

라테: 9000
쿠키: 6000
합계: 15000

cups를 3으로 바꾸면 drinks가 13500, total이 19500이 됩니다.

• 다르게 써도 되는 곳: '1. 값 두기'의 네 줄은 차례를 바꿔도 됩니다. drinks 없이 latte * cups를 찍는 줄과 합계 줄에 바로 써도 같습니다. '라테: ' + drinks와 `라테: ${drinks}`(3단원에서 배우는 템플릿 문자열)도 같은 줄을 찍습니다.
• 찍은 화면이 위와 같고 잔 수를 3으로 바꾼 결과도 맞으면 맞습니다. 잔 수를 3으로 바꿔도 결과가 그대로라면, 9000처럼 손으로 계산한 값을 적은 것입니다. 계산은 자바스크립트에게 맡깁니다.
• 흔한 오답 하나는 콜론 뒤 빈칸입니다. console.log는 쉼표 자리에 빈칸을 하나 넣으므로 '라테: '처럼 빈칸을 더 적으면 빈칸이 둘이 되고, +로 이으면서 빈칸을 빼면 붙어 버립니다.

const drinks = 9000;
console.log('라테: ', drinks);
console.log('라테:' + drinks);

라테:  9000
라테:9000

• 다른 흔한 오답은 합계 줄을 total = drinks + snack;⁠처럼 const 없이 쓰는 것입니다. 그런 이름이 없어 ReferenceError로 멈춥니다(total is not defined). 합계 줄을 '1. 값 두기'보다 위에 써도 아직 쓸 수 없는 이름을 읽어 멈춥니다(Cannot access 'drinks' …). 이름은 만든 뒤에야 읽을 수 있습니다(규칙 1·2).

다시 볼 레슨: 변수: let으로 이름 붙이기 · console.log로 출력하기 · 사칙 계산과 나머지