단원 연습 문제

makeTicket()이 끝난 뒤에도 돌려준 안쪽 함수는 자신이 만들어진 칸의 num 이름표를 기억합니다(규칙 5).

1
2

• 8번 줄: makeTicket()을 부르면 그 호출 칸에 num이 0으로 만들어지고, 안쪽 함수를 돌려줍니다.
• 9번 줄: 첫 번째 next()가 기억해 둔 num을 0에서 1로 바꾸고 1을 돌려줍니다.
• 10번 줄: 두 번째 next()가 같은 칸의 num을 1에서 2로 바꾸고 2를 돌려줍니다.

흔한 오답은 두 줄 모두 1을 쓰는 것입니다. next()를 부를 때마다 let num = 0;이 다시 실행된다고 본 것입니다. let num = 0;은 8번 줄에서 makeTicket()을 부를 때 딱 한 번만 실행됩니다.

다시 볼 레슨: 클로저: 만들어진 칸을 기억하는 함수

안쪽 함수는 bonus의 옛 값 100을 복사해 두지 않고 전역 칸의 bonus 이름표를 기억합니다. 또한 makeCalc를 두 번 불렀으므로 a와 b가 기억하는 score 칸은 서로 다릅니다.

200
400
250

• a()가 불릴 때 전역 칸의 bonus는 이미 200으로 바뀌어 있습니다. 클로저는 함수가 만들어질 때의 값을 복사해 두지 않고 그 칸의 이름을 기억합니다(규칙 5).
• 첫 번째 a()는 첫 호출 칸의 score를 0 + 200으로 바꿔 200을 찍고, 두 번째 a()는 같은 첫 칸의 score를 200 + 200으로 바꿔 400을 찍습니다.
• b()는 두 번째 makeCalc(50) 호출 칸의 score인 50에 200을 더해 250을 찍습니다.

흔한 오답은 100, 200, 150을 쓰는 것입니다. makeCalc를 부를 때 bonus가 100이었으니 100이 복사되어 박힌다고 본 것입니다(클로저가 값을 복사해 둔다는 생각).

다시 볼 레슨: 클로저: 만들어진 칸을 기억하는 함수

show에는 return이 없으므로 console.log로 찍기만 하고 undefined를 돌려줍니다. withCup은 ...order로 새 객체를 만들어 돌려주므로 원래 base 객체는 바뀌지 않습니다.

라테
undefined
머그 undefined

• 11번 줄: show(base)가 실행되며 base.menu인 라테를 먼저 찍습니다. show 안에 return이 없으므로 a에는 undefined가 붙습니다.
• 12번 줄: withCup(base)는 base의 속성을 펼친 새 객체에 cup: '머그'를 더해 돌려줍니다. base 자체에는 cup 속성이 생기지 않습니다.
• 13~14번 줄: a는 undefined이고, b.cup은 '머그', 없는 속성인 base.cup은 undefined입니다.

다시 볼 레슨: 돌려받은 값 쓰기 · 단축 속성과 나머지 모으기

new Box(2)를 두 번 불렀으므로 a와 b는 서로 다른 두 객체를 가리킵니다. 반면 const same = a;는 a가 가리키는 객체에 이름표만 하나 더 붙입니다(규칙 3).

9 2

• 6~7번 줄: new Box(2)를 부를 때마다 빈 객체가 새로 만들어지므로 a와 b는 서로 다른 두 Box 객체를 가리킵니다.
• 8~9번 줄: const same = a;는 객체를 복사하지 않고 a와 같은 첫 번째 Box 객체를 가리킵니다. same.qty = 9;로 바꾸면 a.qty도 9가 됩니다.
• 10번 줄: b는 따로 만든 두 번째 객체이므로 b.qty는 2 그대로입니다.

파이썬에서는 생성자를 def __init__(self, qty):⁠로 쓰고 Box(2)처럼 new 없이 부르지만 — 자바스크립트는 생성자 이름이 constructor이고 반드시 new Box(2)처럼 new를 붙여 부릅니다.

다시 볼 레슨: 클래스와 new · 객체를 넘기고 복사하기

메서드 안의 this는 그 메서드를 부를 때 점(.) 앞에 적힌 객체를 가리킵니다. c1.add(...)는 c1의 도장을, c2.add(1)은 c2의 도장을 바꿉니다.

5
1

• c1.add(3)을 부르면 this가 c1을 가리켜 c1.stamps가 3이 됩니다.
• c2.add(1)을 부르면 this가 c2를 가리켜 c2.stamps가 1이 됩니다.
• c1.add(2)는 c1.stamps를 3 + 2인 5로 바꾸고 5를 돌려주어 첫 줄에 5가 찍히고, 둘째 줄에는 c2.stamps인 1이 찍힙니다.

다시 볼 레슨: 메서드와 this

||는 왼쪽 값이 거짓 같은 값(0, '', false, null, undefined)이면 오른쪽 값을 쓰고, ??는 왼쪽 값이 null이나 undefined일 때만 오른쪽 값을 씁니다.

500
0
기본

• 2번 줄: c.cut은 숫자 0입니다. 자바스크립트에서 0은 거짓 같은 값이라 0 || 500은 오른쪽 값 500을 돌려줍니다.
• 3번 줄: ??는 null과 undefined만 비었다고 보므로 숫자 0을 그대로 살려 0을 찍습니다.
• 4번 줄: 없는 속성 c.tag는 undefined이므로 ??가 오른쪽 값 '기본'을 돌려줍니다.

다시 볼 레슨: 참 같은 값과 ??

10번 줄의 card.add()는 점 앞에 card가 있지만, 12번 줄에서 함수만 꺼내 담은 fn을 13번 줄에서 fn()처럼 점 없이 부르면 add 안의 this가 무엇이 되는지 보세요.

1을 한 줄 찍은 뒤 13번 줄(add 안 6번 줄)에서 TypeError로 멈춥니다.

1main.js:6    this.stamps += 1;    ^ TypeError: Cannot read properties of undefined (reading 'stamps')    at add (main.js:6:5)    at main.js:13:1

• 10~11번 줄: card.add()는 점 앞에 card가 있어 this가 card에 붙고, 1이 찍힙니다.
• 12~13번 줄: const fn = card.add;는 메서드 함수만 꺼내 fn에 붙입니다. fn()처럼 점 없이 부르면 add 호출 칸의 this는 undefined가 되어 undefined.stamps를 읽으려다 TypeError로 멈춥니다. 14번 줄은 실행되지 않습니다.

흔한 오답은 1 다음에 2가 찍힌다고 쓰는 것입니다. card.add가 card에서 나왔으니 fn으로 옮겨 담아도 card를 기억한다고 본 것입니다(this가 붙어 있다는 생각).

파이썬에서는 fn = card.add처럼 메서드를 변수에 담아 fn()으로 불러도 self가 card에 묶여 있어 2가 찍히지만 — 자바스크립트의 this는 함수를 부를 때 점 앞에 무엇이 적혔는지로 그때그때 정해져, 점 없이 fn()으로 부르면 this가 undefined가 됩니다.

다시 볼 레슨: this를 잃을 때

s.up()은 자식 클래스 StepCounter에서 먼저 찾고, StepCounter에 없는 s.reset()은 부모 클래스 Counter로 올라가 찾습니다.

14
0

• new StepCounter(10, 4)⁠는 super(start)로 부모 생성자를 먼저 실행해 this.count를 10으로 만들고, 이어서 this.step을 4로 만듭니다.
• s.up()은 자식 클래스 StepCounter에 다시 정의된 up()을 먼저 찾아 10 + 4인 14를 찍습니다.
• s.reset()은 StepCounter에 없으므로 부모 클래스 Counter의 reset()을 찾아 this.count를 0으로 바꿉니다.

파이썬에서는 class StepCounter(Counter):⁠와 super().__init__(start)⁠로 쓰지만 — 자바스크립트는 extends Counter를 붙이고 자식 생성자 안에서 this를 쓰기 전에 반드시 super(start)를 먼저 불러야 합니다.

다시 볼 레슨: 상속: extends와 super

filter로 stamps >= 3인 Card 객체 두 개를 먼저 거른 뒤, map으로 각 객체의 owner 문자열만 꺼내 새 배열로 바꿉니다.

[ '민지', '서연' ]

• filter((c) => c.stamps >= 3)⁠이 민지(4)와 서연(3)의 Card 객체만 남긴 새 배열을 돌려줍니다.
• 이어서 .map((c) => c.owner)가 각 카드 객체에서 이름만 꺼내 [ '민지', '서연' ] 배열을 돌려줍니다.

다시 볼 레슨: 클래스와 new · map·filter·find

멈춘 자리는 6번 줄이지만, this가 왜 undefined가 되었는지는 at 줄을 따라 10번 줄(fn())과 15번 줄(runTwice(card.add))을 함께 봐야 합니다. 15번 줄에서 함수를 넘길 때 점(.)을 살려 부르도록 화살표 함수로 감싸 보세요.

15번 줄을 runTwice(() => card.add());⁠로 고칩니다.

class StampCard {
  constructor() {
    this.stamps = 0;
  }
  add() {
    this.stamps += 1;
  }
}

이어서 고친 15번 줄을 넣어 실행합니다.

function runTwice(fn) {
  fn();
  fn();
}

const card = new StampCard();
runTwice(() => card.add());
console.log(card.stamps);

2

오류는 6번 줄에서 났지만 고칠 곳은 메서드를 떼어 넘긴 15번 줄입니다. runTwice(card.add)처럼 메서드만 떼어 넘기면 10번 줄에서 점 없이 fn()으로 불려 add 안의 this가 undefined가 됩니다. () => card.add()처럼 화살표 함수로 감싸 넘기면 fn()이 불릴 때마다 그 안에서 점과 함께 card.add()를 실행하므로 this가 card에 붙습니다.

• 흔한 오답은 15번 줄을 runTwice(card.add());⁠로 고치는 것입니다. 이렇게 쓰면 card.add()를 그 자리에서 한 번 실행해 돌려준 값(undefined)을 runTwice에 넘기게 되어, 10번 줄에서 fn is not a function TypeError가 납니다.

파이썬에서는 runTwice(card.add)라고 그대로 넘겨도 card가 묶여 넘어가 잘 돌아가지만 — 자바스크립트에서 메서드를 콜백으로 넘길 때는 () => card.add()처럼 화살표 함수로 감싸 점(.)을 살려 줍니다.

다시 볼 레슨: this를 잃을 때

메서드 안에서 객체의 속성을 읽거나 바꿀 때는 반드시 앞에 this.를 붙여 this.pt, this.name으로 씁니다.

모범 답입니다.

class Card {
  constructor(name, pt) {
    this.name = name;
    this.pt = pt;
  }
  earn(n) {
    this.pt += n;
    return this.pt;
  }
  label() {
    return this.name +
      ': ' + this.pt;
  }
}

이어서 인스턴스를 만들어 확인합니다.

const c =
  new Card('민지', 100);
console.log(c.earn(50));
console.log(c.label());

150
민지: 150

• 다르게 써도 되는 곳: label() 안에서 + 연산자로 this.name과 this.pt를 이어 붙여도 됩니다.
• 흔한 오답:
  • earn(n)에서 this.pt += n;만 쓰고 return this.pt;를 빠뜨리면 첫 줄에 undefined가 찍힙니다.
  • this.pt 대신 this. 없이 pt라고만 쓰면 생성자 매개변수 pt는 이미 사라진 뒤라 ReferenceError로 멈춥니다.

다시 볼 레슨: 클래스와 new · 메서드와 this

makeLimiter(max) 안에 let used = 0;을 만들고, (n) => { ... } 화살표 함수를 돌려줍니다. 안쪽 함수에서 used += n; 뒤에 if (used > max)로 한도를 넘었는지 확인해 used = max;로 맞춘 뒤 return used;를 씁니다.

모범 답입니다.

function makeLimiter(max) {
  let used = 0;
  return (n) => {
    used += n;
    if (used > max) {
      used = max;
    }
    return used;
  };
}
const add = makeLimiter(5);
console.log(add(3));
console.log(add(4));
console.log(add(2));

3
5
5

• 다르게 써도 되는 곳: if (used > max) 대신 삼항 연산자를 써도 되고, 누적 변수 이름은 total처럼 달라도 됩니다.
• 흔한 오답:
  • let used = 0;을 안쪽 화살표 함수 안에 두면 부를 때마다 0으로 다시 시작해 3, 4, 2가 찍힙니다.
  • makeLimiter가 함수를 돌려주지 않고 숫자를 바로 돌려주면 add(3)에서 add is not a function TypeError가 납니다.

다시 볼 레슨: 클로저: 만들어진 칸을 기억하는 함수