JS LAB
    JS 6.5 · 6부. 객체지향과 모던 JS

    알아두면 좋은 최신 문법

    ?. 와 ?? , 단축 속성, Map 과 Set 을 봅니다.

    예상 학습 시간 16분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 중급
    개념 설명

    자주 보게 될 것들

    여기까지 배운 것으로 대부분을 만들 수 있습니다. 다만 남의 코드를 읽다 보면 아직 보지 못한 기호가 나옵니다. 그 가운데 가장 자주 나오는 넷을 봅니다.

    • ?. — 없는 것을 읽어도 오류가 나지 않게 합니다.
    • ?? — 값이 정말로 없을 때만 기본값을 씁니다.
    • 단축 속성 — 이름이 같으면 한 번만 적습니다.
    • Map · Set — 객체·배열로는 불편한 자리에 씁니다.
    최소 예제 · 편집 가능

    없어도 오류가 나지 않게

    3.6 에서 없는 속성의 속성을 읽으면 오류가 났습니다. ?. 를 쓰면 그 자리에서 멈추고 undefined 를 돌려줍니다.

    script.js 
    const user = { name: "홍길동", address: { city: "서울" } };
const guest = { name: "손님" };

console.log(user.address?.city);
console.log(guest.address?.city);
console.log(guest.greet?.());
console.log(guest.tags?.[0]);
    출력
    서울 undefined undefined undefined

    메서드에는 ?.(), 배열 자리에는 ?.[ ] 로 적습니다. 없는 것을 부르거나 꺼내도 조용히 undefined 입니다.

    ?. 없이 적으면 아래 오류가 납니다. 4.2 에서 본 것과 같습니다.

    script.js 
    const guest = { name: "손님" };

console.log("여기까지는 나옵니다");
console.log(guest.address.city);
    출력 · 크롬
    여기까지는 나옵니다 TypeError: Cannot read properties of undefined (reading 'city')
    출력 · 파이어폭스
    여기까지는 나옵니다 TypeError: can't access property "city", guest.address is undefined
    상세 사용법

    0과 빈 글자를 지키는 기본값

    || 로 기본값을 주면 거짓으로 다뤄지는 값까지 함께 바뀝니다(1.7). ?? 는 null 과 undefined 일 때만 바꿉니다.

    script.js 
    const count = 0;
const text = "";
const missing = undefined;

console.log(count || 10);
console.log(count ?? 10);

console.log(text || "기본값");
console.log(text ?? "기본값");

console.log(missing ?? "기본값");
    출력
    10 0 기본값 기본값

    재고 0 이 10 이 되는 것은 버그입니다. 숫자와 글자를 다루는 자리에는 ?? 를 쓰세요. 넷째 줄은 빈 글자가 그대로 나와 빈 줄로 보입니다.

    상세 사용법

    이름이 같으면 한 번만

    script.js 
    const name = "홍길동";
const age = 27;

const long = { name: name, age: age };
const short = { name, age };

console.log(long);
console.log(short);

const key = "city";
const dynamic = { [key]: "서울" };

console.log(dynamic);
    출력
    { name: "홍길동", age: 27 } { name: "홍길동", age: 27 } { city: "서울" }

    마지막은 속성 이름을 변수로 정하는 방법입니다. 대괄호로 감쌉니다 — 3.6 의 대괄호 표기법과 같은 생각입니다.

    상세 사용법

    Set — 겹치지 않는 모음

    script.js 
    const tags = new Set(["연필", "공책", "연필"]);

console.log(tags.size);
console.log(tags.has("연필"));

tags.add("지우개");
tags.delete("공책");

console.log([...tags]);

const numbers = [1, 2, 2, 3, 3, 3];

console.log([...new Set(numbers)]);
    출력
    2 true ["연필", "지우개"] [1, 2, 3]

    같은 값을 두 번 넣어도 하나입니다. 마지막 줄처럼 배열에서 겹친 것을 걷어내는 데 가장 많이 사용합니다.

    상세 사용법

    Map — 무엇이든 열쇠로

    script.js 
    const prices = new Map();

prices.set("연필", 1000);
prices.set("공책", 2000);

console.log(prices.size);
console.log(prices.get("연필"));
console.log(prices.has("가위"));
console.log([...prices.keys()]);

prices.forEach((price, name) => console.log(`${name}: ${price}`));
    출력
    2 1000 false ["연필", "공책"] 연필: 1000 공책: 2000

    객체와 다른 점이 셋입니다. 넣은 차례가 지켜지고, 개수를 size 로 바로 알 수 있고, 열쇠로 글자가 아닌 것도 쓸 수 있습니다.

    대부분은 객체로 충분합니다. 열쇠가 계속 늘고 줄어드는 자리에서 Map 이 편합니다.

    흔한 실수

    처음에 자주 걸리는 것

    1. ?. 를 모든 자리에 붙입니다

    없을 수도 있는 자리에만 붙이세요. 어디에나 붙이면 값이 없는데도 조용히 지나가, 정작 잘못된 자리를 찾기 어려워집니다.

    2. || 로 숫자에 기본값을 줍니다

    재고 0, 점수 0, 빈 글자가 모두 기본값으로 바뀝니다. ?? 를 사용하세요.

    3. Map 에 점 표기법을 씁니다

    map.연필 은 동작하지 않습니다. Map 은 get 과 set 으로만 다룹니다.

    실습 문제

    파트 6 미니 실습 — 장바구니 모듈

    6부에서 배운 것을 모아 봅니다 난이도 상

    상품을 담는 Cart 클래스를 만드세요. 아래를 모두 지켜야 합니다.

    • 담긴 목록은 밖에서 손댈 수 없게 감춥니다(6.1).
    • 같은 이름은 한 번만 담깁니다(Set).
    • 이름별 가격은 Map 에 담습니다.
    • 총액을 돌려주는 get 을 둡니다.
    • 없는 상품을 지워도 오류가 나지 않아야 합니다.
    이름은 Set 하나로 충분합니다. 가격은 Map 에 두고 총액은 [...set] 을 reduce 하면 됩니다(3.4).
    class Cart { #names = new Set(); #prices = new Map(); add(name, price) { this.#names.add(name); this.#prices.set(name, price); return this.#names.size; } remove(name) { this.#names.delete(name); this.#prices.delete(name); } get total() { return [...this.#names] .reduce((sum, name) => sum + (this.#prices.get(name) ?? 0), 0); } get names() { return [...this.#names]; } } const cart = new Cart(); cart.add("연필", 1000); cart.add("공책", 2000); cart.add("연필", 1000); cart.remove("없는것"); console.log(cart.names); console.log(cart.total);

    여기까지 하면 파트 6 이 끝납니다. 다음 파트에서는 오류를 읽고 고치는 방법을 봅니다.

    요약

    이 단원의 정리

    • ?. 는 없는 것을 읽어도 undefined 를 돌려줍니다.
    • ?? 는 null · undefined 일 때만 기본값을 씁니다.
    • 이름이 같으면 { name, age } 로 한 번만 적습니다.
    • Set 은 겹치지 않는 모음입니다. 배열에서 겹친 것을 걷어낼 때 씁니다.
    • Map 은 차례가 지켜지고 size 가 있으며 열쇠를 가리지 않습니다.