모던 자바스크립트 개발 [2] – 모듈 패턴, CommonJS

모듈 패턴

const ShoppingCart2 = (function () {
  const cart = [];
  const shippingCost = 10;
  const totalPrice = 237;
  const totalQuantity = 23;

  const addToCart = function (product, quantity) {
    cart.push({ product, quantity });
    console.log(
      `${quantity} ${product} added to cart (sipping cost is ${shippingCost})`
    );
  };

  const orderStock = function (product, quantity) {
    console.log(`${quantity} ${product} ordered from supplier`);
  };

  return {
    addToCart,
    cart,
    totalPrice,
    totalQuantity,
  };
})();

ShoppingCart2.addToCart('apple', 4);
ShoppingCart2.addToCart('pizza', 2);
console.log(ShoppingCart2); // {cart: Array(2), totalPrice: 237, totalQuantity: 23, addToCart: ƒ}
console.log(ShoppingCart2.shippingCost); // undefined

• 일회성 함수 IIFE를 변수에 저장하면 모듈처럼 활용할 수 있다.
• 리턴한 변수 역시 클래스의 변수인 것 처럼 업데이트하며 사용할 수 있는데, 이것은 클로저의 역할로 가능한 것이다.
• 모듈 패턴은 ES6가 등장하기 이전에 사용되었다. 하나의 파일 당 하나의 모듈을 갖게 하려면 모든 파일을 HTML 파일에 링크해야하는 한계를 가지고 있으므로(파일 순서, global scope 변수 관리 등) ES6에 모듈이 등장하게 되었다. 또한 모듈 번들러를 사용할 수 없는 점 등 모던 JS에서는 불편한 점이 있으므로 알아두는 것이 좋다.

CommonJS 모듈

// Export
export.addTocart = function (product, quantity) {
  cart.push({ product, quantity });
  console.log(
    `${quantity} ${product} added to cart (sipping cost is ${shippingCost})`
  );
};

// Import
const { addTocart } = require('./shoppingCart.js');

• CommonJS는 node.js에서 모듈을 사용하는 방식이다. 지금은 참고로 알아두자.