Module Pattern

모듈이란?

• 코드의 일부를 독립된 형태로 분리한 것
• 모듈은 하나의 클래스로 구성되거나 특정 목적을 가진 복수의 함수(라이브러리)로 구성된다.
• export, import 지시자를 사용해 모듈을 내보내거나 불러올 수 있다.

//test.js
export function print() {
	console.log('hello');
}

• export된 print()는 외부로 보낼 수 있음.

//main.js
import {print} from './test.js';
print();

모듈 패턴?

• 모듈 패턴은 외부에서 클래스의 상태나 동작에 접근하지 못하도록 캡슐화한다.
• 이는 public, private과 같은 접근 권한 설정이 가능하다.
• 해당 패턴을 사용해 접근 권한 설정을 하면 내부 로직이 전역 스코프로 유출되는 것을 막을 수 있으며, 함수명이 같아도 충돌이 발생하지 않는다.

🤔 자바스크립트에는 private이 없는데 어떻게 권한 설정을 하는가?

1. 클로저와 객체리터럴

1-1. 클로저 사용하기

• 클로저는 중첩함수에서 외부 함수가 종료되어도 내부 함수에서 외부 함수에 접근할 수 있는 환경을 말한다.
• 클로저를 사용하게 되면 바깥에서 내부함수를 호출할 수 없기에 private 설정이 가능하다.
• 쉽게 말하면, 상태와 동작을 캡슐화시켜 private로 할 수 있다는 것.

function outer(){
	const inner = function () {
    	console.log('hello')
    };
    inner();
};
inner(); // inner is not defined

1-2. object literal 사용하기

• 클로저 방식을 이용해 private한 함수를 선언할 때, 객체 리터럴 방식을 사용할 수 있다.
• 여기서 객체 리터럴이란, 생성자함수(new)로 객체를 생성하지 않고, 객체의 속성과 값을 바로 적는 것이다.
• 객체 리터럴 방식을 이용해 private inner()를 만든 코드.

const outer = {
  	inner() {
      	console.log('hello');
    }
}
outer.inner(); // hello
inner(); // inner() is not defined

2. IIFE(즉시실행함수)로 구현하기

즉시실행함수란?

왜 모듈패턴에서 IIFE를 사용하는가?

• IIFE 내부에 선언된 함수는 외부에서 호출할 수 없다.
• 이는 특정 동작을 private로 정의할 수 있음을 의미하고, 또한 IIFE는 선언과 동시에 실행되므로 동일한 함수명을 만들어도 충돌이 발생하지 않는 장점이 있다.

3. ES2019, Class와 #으로 구현하기

• JS Class 속성은 public이므로 외부에서 값을 읽거나 수정할 수 있다.
• ES2019에서 #이 추가되면서 class에서 private 설정이 가능해졌다.
• private로 설정하고 싶은 변수 앞에 `#을 붙이면 외부에서 해당값에 접근할 수 없게 된다

  class Food {
  	#foodList = ['orange', 'apple']
  	get getFood() {
  		return this.#foodList;
  	}
  }
  const food = new Food();
  console.log(food.getFood); 
  console.log(food.#foodList) // 접근 x