단원 연습 문제

8번 줄의 triple(4)와 9번 줄의 show(4)가 각각 부른 자리에 어떤 값을 돌려주는지 비교해 보세요.

12
12 undefined

• 8번 줄: triple(4)를 부르면 새 칸에서 n이 4에 붙고, 2번 줄의 return이 12를 부른 자리에 돌려줍니다. 화면에는 아무것도 찍지 않고 a가 12에 붙습니다.
• 9번 줄: show(4)를 부르면 5번 줄의 console.log가 화면에 12를 먼저 찍습니다. show에는 return이 없어 undefined를 돌려주고, b는 undefined에 붙습니다.
• 10번 줄: a의 값 12와 b의 값 undefined를 빈칸 하나로 이어 찍습니다.

흔한 오답은 둘째 줄을 12 12로 쓰는 것입니다. 함수 안에서 console.log로 찍은 12가 부른 자리로도 돌아온다고 본 것입니다(찍는 것과 돌려주는 것이 같다는 생각). console.log는 화면에 쓰기만 하고, 값을 부른 자리로 돌려주는 것은 return입니다(규칙 5).

다시 볼 레슨: 함수 만들고 부르기 · 돌려받은 값 쓰기

5번 줄과 6번 줄에서 함수를 부를 때, 새 칸의 매개변수 walk와 bonus가 각각 어떤 값에 붙는지 적어 보세요.

35
NaN

• 5번 줄: 인자 세 개 가운데 앞의 두 개 30과 5에만 walk와 bonus가 차례대로 붙고, 남는 인자 100은 버려집니다. 30 + 5를 계산한 35를 돌려줍니다.
• 6번 줄: 인자를 하나만 넘겨 walk는 30에 붙고, 짝이 없는 bonus는 오류 없이 undefined에 붙습니다. 수 30에 undefined를 더하면 NaN이 됩니다.

흔한 오답은 두 줄에서 TypeError로 멈춘다고 쓰거나, 첫 줄을 135 · 둘째 줄을 30으로 쓰는 것입니다. 인자 개수가 매개변수와 다르면 오류가 난다고 본 것이거나(없으면 오류라는 생각), 남는 인자까지 저절로 더해진다고 본 것입니다(규칙 5·6).

파이썬에서는 인자 개수가 매개변수와 다르면 TypeError로 멈춥니다 — 자바스크립트는 남는 인자를 버리고, 모자란 매개변수는 undefined에 붙여 수 계산에서 NaN이 됩니다.

다시 볼 레슨: 매개변수와 인자

6번 줄이 실행되는 그때 book이 어느 값에 붙어 있는지 보세요.

100 30

• 6번 줄: 그때 book이 60이라 half(60)을 부릅니다. 새 칸에서 pages가 60에 붙고, 함수가 돌려준 30에 이름 goal을 붙입니다.
• 7번 줄: book만 100에 다시 붙습니다. goal은 30에 그대로 붙어 있고, half를 다시 부르지 않습니다.

흔한 오답은 100 50입니다. goal이 half(book)이라는 식을 저장해 두었다가 찍을 때 다시 부른다고 본 것입니다(식이 저장된다는 생각). 함수를 부르는 식도 그 줄이 실행될 때 한 번 계산되어 값 하나가 됩니다(규칙 2).

다시 볼 레슨: 변수: let으로 이름 붙이기 · 돌려받은 값 쓰기

함수나 if의 중괄호 안에서 let으로 만든 이름인지, let 없이 바깥 이름을 찾은 것인지 가려 보세요.

3번 줄의 let count는 shadow 칸에만 생기고, 7번 줄의 count는 up 칸에 없어 바깥 칸에서 찾습니다. 13번 줄의 let tag가 어느 중괄호 안에서 사는지도 봅니다.

두 줄을 찍고 15번 줄에서 멈춥니다.

215main.js:15console.log(tag);            ^ ReferenceError: tag is not defined    at main.js:15:13

• 9번 줄: shadow()를 부르면 shadow 칸에 새 이름 count가 생겨 2에 붙고 2를 찍습니다. 전역 칸의 count(10)은 그대로이고, 함수가 끝나면 shadow 칸의 count는 사라집니다.
• 10·11번 줄: up() 칸에는 count가 없어 바깥(전역) 칸의 count를 찾아 15에 다시 붙입니다(규칙 7). 11번 줄이 15를 찍습니다.
• 12~14번 줄: 15 >= 15가 참이라 if 블록 칸에 이름 tag가 생겨 '단골'에 붙지만, 14번 줄 }에서 블록이 끝나며 사라집니다(규칙 4).
• 15번 줄: 전역 칸에는 tag가 없어 ReferenceError로 멈춥니다.

흔한 오답은 둘째 줄을 7이나 10으로 쓰거나, 마지막 줄에 단골을 쓰는 것입니다. 3번 줄의 let count = 2가 바깥 count를 바꿨다고 본 것이거나, 중괄호 안에서 만든 이름이 밖에서도 남는다고 본 것입니다(들여쓰기가 덩어리라는 생각).

파이썬에서는 함수 안에서 global 없이 바깥 이름에 대입할 수 없고, if 안에서 만든 이름이 밖에서도 보입니다 — 자바스크립트는 지금 칸에 없는 이름을 바깥 칸에서 찾아 바꾸며, 중괄호 안에서 let·const로 만든 이름은 그 중괄호 밖에 없습니다.

다시 볼 레슨: 블록과 함수 안의 이름

2번 줄의 백틱 문자열에서 {price} 앞에 $가 있는지 보고, 5번 줄의 raw가 글자인지 수인지 보세요.

커피: {price}원
4000500
4500

• 6번 줄: 백틱 문자열에서 ${item} 자리에만 '커피'가 들어가고, $가 빠진 {price}는 글자 그대로 남아 커피: {price}원을 돌려줍니다.
• 7번 줄: raw가 글자 '4000'이라 +가 수 500을 글자로 바꿔 이어 붙인 '4000500'이 됩니다.
• 8번 줄: Number(raw)가 만든 수 4000에 500을 더해 4500을 찍습니다.

흔한 오답은 첫 줄을 커피: 4000원, 둘째 줄을 4500으로 쓰는 것입니다. 백틱 안에서는 중괄호만 써도 값이 들어간다고 본 것이고, 따옴표로 감싼 '4000'도 수처럼 더해진다고 본 것입니다(문자열과 수를 가리지 않는 생각).

파이썬에서는 f-문자열이 f'{item}: {price}원'처럼 중괄호만 씁니다 — 자바스크립트 템플릿 문자열은 ${price}처럼 $까지 써야 값이 들어가고, $를 빼면 오류 없이 {price}가 그대로 찍힙니다.

다시 볼 레슨: 템플릿 문자열로 출력 꾸미기 · 글자를 수로: Number와 NaN

매개변수 기본값 = 2가 언제 쓰이는지 떠올려 보세요. 인자가 없거나 undefined일 때만 쓰입니다.

라테 2
커피 0
녹차 null

부르기마다 새 칸에서 매개변수가 붙는 값입니다.

• 5번 줄: 둘째 인자를 넘기지 않아 shot이 기본값 2에 붙습니다.
• 6번 줄: 0은 거짓 같은 값이지만 undefined가 아니라서 기본값을 쓰지 않고 0에 그대로 붙습니다.
• 7번 줄: null도 undefined가 아니라서 기본값을 쓰지 않고 null에 그대로 붙습니다.

흔한 오답은 둘째 줄이나 셋째 줄의 숫자를 2로 쓰는 것입니다. 0이나 null을 넘겨도 기본값 2가 쓰인다고 본 것입니다. 매개변수 기본값은 인자를 생략했거나 undefined를 넘겼을 때만 쓰입니다(규칙 5).

다시 볼 레슨: 기본값 매개변수

(가)·(나)는 기본값을 고를 때 비교했던 두 연산자이고, (다)는 소문자 영단어 값, (라)는 글자 두 개로 된 화살표 기호입니다.

받는 답: (가) || · (나) ?? · (다) undefined · (라) =>

• 같은 답으로 치는 꼴: 없습니다. 기호와 철자 그대로 씁니다.
• 틀리는 꼴 ?? — (가)에, || — (나)에: 두 연산자가 뒤바뀐 것입니다. || 연산자는 0이나 ''도 거짓 같은 값으로 보고 오른쪽으로 넘어가 0을 지우지만, ?? 연산자는 null과 undefined일 때만 오른쪽 기본값을 씁니다.
• 틀리는 꼴 null·None — (다)에: null은 비어 있음을 직접 적어 넣을 때 쓰는 값이고, 파이썬의 None은 자바스크립트에 없습니다.
• 틀리는 꼴 -> — (라)에: 자바스크립트 화살표 함수는 등호(=)로 시작하는 => 기호를 씁니다.

다시 볼 레슨: 참 같은 값과 ?? · 매개변수와 인자 · 화살표 함수와 함수 값

1번 줄의 double과 11번 줄의 half가 각각 어떤 문법으로 만들어졌는지 비교하고, 7~9번 줄의 화살표 함수 몸에 중괄호가 있는지 보세요.

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

8undefinedmain.js:11console.log(half(4));            ^ ReferenceError: Cannot access 'half' before initialization    at main.js:11:13

• 1번 줄: function double 선언은 실행 전에 미리 함수 값으로 만들어져 있어, 선언 줄보다 위에서 불러도 8을 돌려줍니다.
• 7~10번 줄: triple은 화살표 뒤에 중괄호를 썼는데 return이 없습니다. 중괄호 몸은 일반 함수와 같아서 return이 없으면 undefined를 돌려줍니다.
• 11번 줄: const half는 12번 줄에서야 값에 붙으므로, 11번 줄에서는 '아직 못 씀' 상태라 ReferenceError로 멈춥니다.
• ② 화살표 함수는 중괄호를 써도 저절로 값을 돌려준다고 본 것이고, const로 만든 화살표 함수도 선언 줄 위에서 부를 수 있다고 본 것입니다. 식 하나만 돌려줄 때는 (n) => n * 3처럼 중괄호 없이 쓰고, 부르는 줄은 선언 줄 아래에 둡니다.
• ③ function 선언도 선언 줄 아래에서만 부를 수 있다고 본 것입니다.

다시 볼 레슨: 화살표 함수와 함수 값

10번 줄의 clap과 11번 줄의 clap()이 twice에 무엇을 넘기는지 비교해 보세요.

11번 줄은 괄호가 붙은 clap()을 그 자리에서 먼저 부르고, 그 함수가 돌려준 값(undefined)을 twice의 action에 넘깁니다.

짝이 세 번 찍힌 뒤 2번 줄에서 멈춥니다.

짝짝짝main.js:2  action();  ^ TypeError: action is not a function    at twice (main.js:2:3)    at main.js:11:1

• 10번 줄: 괄호 없이 이름 clap만 써서 함수 값을 그대로 넘깁니다. twice 칸의 action이 clap을 가리키고, 2번 줄과 3번 줄에서 한 번씩 불려 짝을 두 줄 찍습니다.
• 11번 줄: 인자 자리의 clap()에 괄호가 붙어 있어 twice에 넘어가기 전에 먼저 불립니다. 여기서 세 번째 짝이 찍히고, clap에는 return이 없어 undefined가 twice로 넘어갑니다.
• twice의 2번 줄: undefined에 붙은 action을 action()으로 부르려다 함수가 아니라서 TypeError로 멈춥니다.

흔한 오답은 짝이 네 번 찍힌다고 쓰거나, 짝이 두 번만 찍히고 바로 멈춘다고 쓰는 것입니다. 함수를 넘길 때도 괄호를 붙여야 한다고 본 것이거나(넘길 때도 괄호를 붙인다는 생각), 11번 줄에서 clap()이 먼저 실행되며 찍는 세 번째 짝을 놓친 것입니다(규칙 5).

다시 볼 레슨: 함수를 넘기기 · 함수 만들고 부르기

5번 줄에서 fee(4) 자리에 어떤 값이 돌아와 + 3000과 계산되었길래 NaN이 되었는지 보세요.

2번 줄의 console.log(km * 800);⁠을 return km * 800;으로 고칩니다.

function fee(km) {
  return km * 800;
}

const total = fee(4) + 3000;
console.log(total);

6200

NaN은 6번 줄에서 찍혔지만 처음 틀린 값이 생긴 곳은 2번 줄입니다. 고치기 전의 fee는 2번 줄에서 3200을 화면에 찍기만 하고 undefined를 돌려줘, 5번 줄의 식이 undefined + 3000이 되어 total이 NaN에 붙었습니다. return으로 바꾸면 fee(4) 자리에 3200이 놓여 3200 + 3000을 계산합니다(규칙 5).

• 다르게 고쳐도 되는 곳: return 800 * km;도 같습니다. console.log를 남긴 채 그 아래에 return km * 800;을 더하면 NaN은 사라지지만 3200이 한 줄 더 찍혀 나와야 할 화면과 다릅니다.
• 흔한 오답은 5번 줄의 + 3000을 지우는 것입니다. NaN은 사라지지만 요금 대신 undefined가 찍힙니다. 화면에 3200이 보이니 그 값이 total로 돌아온다고 본 것입니다(찍는 것과 돌려주는 것이 같다는 생각).

다시 볼 레슨: 돌려받은 값 쓰기 · 함수 만들고 부르기 · 값을 찍어 보며 고치기

금액은 한 잔 값 × 잔 수이고, 깎을지는 잔 수(>= 4)로 정합니다.

모범 답입니다.

// 1. 받을 값 정하기
function order(price, cups) {
  // 2. 계산하기
  if (cups >= 4) {
    price = price - 500;
  }
  const won = price * cups;
  // 3. 돌려주기
  return won;
}

console.log(order(4500, 2));

9000

console.log(order(4000, 4));⁠를 더하면 새 칸에서 price가 4000에, cups가 4에 붙습니다. 4 >= 4가 참이라 price가 3500에 다시 붙고, 3500 * 4인 14000을 돌려줍니다.

• 다르게 써도 되는 곳: 금액을 먼저 let won = price * cups;⁠로 계산한 뒤 네 잔 이상이면 won = won - 500 * cups;⁠로 빼도 됩니다. 갈래마다 return을 따로 써도 되고, 화살표 함수 (price, cups) => { ... }⁠로 써도 됩니다. 매개변수 이름은 달라도 되지만 차례는 한 잔 값, 잔 수입니다.
• 찍은 화면이 위와 같고 둘째 시험 값에서도 9000과 14000이 나오면 맞습니다.
• 흔한 오답:
  • return 대신 console.log(won);을 쓰면 9000 다음 undefined가 한 줄 더 찍힙니다(찍는 것과 돌려주는 것이 같다는 생각).
  • 조건을 cups > 4로 쓰면 네 잔에서 깎지 않아 둘째 줄이 16000이 됩니다. 두 잔인 처음 시험 값에서는 드러나지 않아 둘째 시험 값으로 봅니다.
  • 9000을 손으로 계산해 return 9000;으로 쓰면 둘째 줄도 9000이 찍힙니다. 금액은 받은 매개변수로 계산합니다.

다시 볼 레슨: 함수 만들고 부르기 · 매개변수와 인자 · 돌려받은 값 쓰기

하위 목표 셋으로 나눠 씁니다 — 1. 받을 값 정하기(item과 기본값이 1인 잔 수 매개변수) · 2. price와 sale을 차례로 불러 결제 금액 구하기 · 3. 템플릿 문자열로 영수증 문장을 만들어 돌려주고, 두 주문을 찍기.

모범 답입니다.

function price(n) {
  return 4000 * n;
}
function sale(won) {
  if (won >= 10000) {
    return won - 1000;
  }
  return won;
}
function bill(item, n = 1) {
  const won = sale(price(n));
  return `${item} ${won}원`;
}
console.log(bill('커피'));
console.log(bill('커피', 3));

커피 4000원
커피 11000원

bill('커피')는 둘째 인자를 생략해 n이 기본값 1에 붙고, price(1)인 4000을 sale(4000)에 넘겨 4000을 돌려받습니다. bill('커피', 3)은 price(3)인 12000을 sale(12000)에 넘겨 1000원 할인된 11000을 돌려받습니다. 잔 수를 2로 바꾸면 8000원이라 할인이 적용되지 않고 커피 8000원이 찍힙니다.

• 다르게 써도 되는 곳: let won = price(n); 다음 줄에 won = sale(won);처럼 두 줄로 나눠 써도 되고, bill을 화살표 함수로 써도 됩니다. 매개변수 이름은 qty = 1 · cups = 1처럼 달라도 됩니다.
• 찍은 화면이 위와 같고 둘째 시험 값에서도 커피 4000원과 커피 8000원이 나오면 맞습니다.
• 흔한 오답:
  • 잔 수 매개변수에 기본값 = 1을 빠뜨리면 첫 줄이 커피 NaN원으로 찍힙니다(모자란 인자는 undefined).
  • sale(won)이 돌려준 값을 쓰지 않고 sale(won);만 쓰면 할인된 값이 버려져 3잔이 커피 12000원으로 찍힙니다.
  • bill 안에서 return 대신 console.log를 쓰고 밖에서도 console.log(bill(...))⁠로 찍으면 줄마다 undefined가 더 찍힙니다.

다시 볼 레슨: 돌려받은 값 쓰기 · 기본값 매개변수 · 함수 만들고 부르기