module-pattern.md

🏑

Module Patternμ΄λž€?

  • λͺ¨λ“ˆ νŒ¨ν„΄μ€ ES6 module 이전뢀터 μ˜€λž«λ™μ•ˆ μ‚¬μš©λ˜μ–΄μ˜¨ νŒ¨ν„΄μž…λ‹ˆλ‹€.(아직 μ‚¬μš©ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.)
    • λͺ¨λ“  슀크립트λ₯Ό HTML에 μ—°κ²°ν•©λ‹ˆλ‹€.
    • 단점
      • HTMLμ—μ„œ λΆˆλŸ¬μ˜€λŠ” orderκ°€ μ€‘μš”ν•©λ‹ˆλ‹€.
      • λͺ¨λ“  λ³€μˆ˜κ°€ global scopeμ—μ„œ 읽을 수 μžˆλ„λ‘ μž‘μ„±ν•΄μ•Ό ν•©λ‹ˆλ‹€.
      • λͺ¨λ“ˆ λ²ˆλ“€λŸ¬κ°€ ν•˜λ‚˜λ‘œ λ²ˆλ“€λ§ν•  수 μ—†μŠ΅λ‹ˆλ‹€.
        • λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ κ°œλ°œμ— μžˆμ–΄μ„œ λͺ¨λ“ˆ λ²ˆλ“€λŸ¬μ˜ 역할이 μ€‘μš”ν•©λ‹ˆλ‹€.
  • λͺ¨λ“ˆ νŒ¨ν„΄μ˜ λͺ©ν‘œ
    1. κΈ°λŠ₯을 μΊ‘μŠν™”
    2. private 데이터λ₯Ό 보유
    3. public APIλ₯Ό 곡개
      • function을 μ‚¬μš©ν•©λ‹ˆλ‹€.

IIFE, μ¦‰μ‹œ 호좜 ν•¨μˆ˜ ν‘œν˜„μ‹

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

  • ν•œ 번만 μƒμ„±λ˜λŠ” ν•¨μˆ˜
  • λ‹€μŒκ³Ό 같이 μ‹€ν–‰ν•©λ‹ˆλ‹€.
(function () {
  console.log("hi");
})();

Module Pattern μ˜ˆμ‹œ

  • IIFE(μ¦‰μ‹œ 호좜 ν•¨μˆ˜ ν‘œν˜„μ‹)의 리턴에 μžˆλŠ” λ³€μˆ˜κ°’μ— 계속 μ ‘κ·Όν•  수 μžˆλŠ” 이유
    • β‡’ ν΄λ‘œμ €
    • ν•¨μˆ˜λŠ” μƒμ„±λœ κ³³ birthplace에 μžˆλŠ” λ³€μˆ˜μ— μ ‘κ·Όν•  수 μžˆμŠ΅λ‹ˆλ‹€.
const ShoppingCart = (function () {
  let shippingCost = 3500;
  let cart = [];
  let totalCost = 30000;
  const totalQty = cart.length;

  const addToCart = (product, quantity) => {
    cart.push({ product, quantity });
    const price = 100 * quantity + shippingCost;
    totalCost += price;

    console.log(
      `${quantity} ${product} added to cart,
cost: ${price}, 
total cost: ${totalCost}`
    );
  };

  const orderStock = () => {
    cart = cart.map((item) =>
      // (item) => console.log(item)
      console.log(`${item.product} ${item.quantity}개 μ£Όλ¬Έ μ™„λ£Œ`)
    );
    cart = [];
  };

  return {
    addToCart,
    orderStock,
    cart,
    totalCost,
    totalQty,
  };
})();

ShoppingCart.addToCart("사탕", 4);
ShoppingCart.addToCart("햄버거", 3);

// closure
console.log(ShoppingCart); // λ°˜ν™˜ν•œ λ³€μˆ˜λ“€μ— μ ‘κ·Όν•  수 있음
ShoppingCart.orderStock(); // μ•„μ΄ν…œ μ£Όλ¬Έ
console.log(ShoppingCart.totalQty); // μ•„μ΄ν…œ: 0개

image