๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ

๐Ÿ“„ Counter

Question Descriptionโ€‹

์นด์šดํ„ฐ๋ฅผ ์ƒ์„ฑํ•˜๊ณ , add()์™€ minus() ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ์นด์šดํ„ฐ ๊ฐ’์„ ์ฆ๊ฐ€ ๋˜๋Š” ๊ฐ์†Œ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

1. JavaScript Versionโ€‹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter</title>
</head>
<body>
    <p>Count: <span id="count">0</span></p>
    <button id="addBtn">Add</button>
    <button id="minusBtn">Minus</button>

    <script src="counter.js"></script>
</body>
</html>

const createCounter = () => {
  let count = 0;
  const $countEl = document.querySelector('#count');

  const add = () => {
    count++;
    $countEl.textContent = count;
  };

  const minus = () => {
    count--;
    $countEl.textContent = count;
  };

  return { add, minus };
};

const counter = createCounter();

document.querySelector('#addBtn').addEventListener('click', counter.add);
document.querySelector('#minusBtn').addEventListener('click', counter.minus);

2. TypeScript Versionโ€‹

ํŒฉํ† ๋ฆฌ ํ•จ์ˆ˜ createCounter๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์นด์šดํ„ฐ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๊ณ , add()์™€ minus() ๋ฉ”์„œ๋“œ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. count ๋ณ€์ˆ˜๋Š” private ๋ณ€์ˆ˜๋กœ ์„ค์ •ํ•˜์—ฌ ์™ธ๋ถ€์—์„œ ์ง์ ‘ ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.

type CounterType = {
  add: () => void;
  minus: () => void;
};

const createCounter = (): CounterType => {
  let count: number = 0;

  const add = () => {
    count++;
    console.log(count);
  };

  const minus = () => {
    count--;
    console.log(count);
  };

  return { add, minus };
};

const counter = createCounter();
counter.add(); // 1
counter.add(); // 2
counter.minus(); // 1