Module Patternμ΄λ?
- λͺ¨λ ν¨ν΄μ ES6 module μ΄μ λΆν° μ€λ«λμ μ¬μ©λμ΄μ¨ ν¨ν΄μ
λλ€.(μμ§ μ¬μ©ν μλ μμ΅λλ€.)
- λͺ¨λ μ€ν¬λ¦½νΈλ₯Ό HTMLμ μ°κ²°ν©λλ€.
- λ¨μ
- HTMLμμ λΆλ¬μ€λ orderκ° μ€μν©λλ€.
- λͺ¨λ λ³μκ° global scopeμμ μ½μ μ μλλ‘ μμ±ν΄μΌ ν©λλ€.
- λͺ¨λ λ²λ€λ¬κ° νλλ‘ λ²λ€λ§ν μ μμ΅λλ€.
- λͺ¨λ μλ°μ€ν¬λ¦½νΈ κ°λ°μ μμ΄μ λͺ¨λ λ²λ€λ¬μ μν μ΄ μ€μν©λλ€.
- λͺ¨λ ν¨ν΄μ λͺ©ν
- κΈ°λ₯μ μΊ‘μν
- private λ°μ΄ν°λ₯Ό 보μ
- 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κ°