자바스크립트에서 클로저를 통한 모듈 설정 전달

다음과 같은 모듈이 있다고 가정해 보겠습니다:

;(function(root, type, amount) {
	let parent = document.querySelector(root);
	
	for (let i = 1; i <= amount; i++) {
		let elem = document.createElement(type);
		parent.append(elem);
	}
})('#parent', 'p', 5);

보시다시피, 이 모듈에는 세 가지 설정이 전달됩니다: 부모 요소의 선택자, 생성할 요소의 유형, 그리고 요소의 수입니다.

일반적으로 이러한 설정은 객체 형태로 만듭니다:

let config = {
	root:  '#parent',
	type:  'p',
	amount: 5
}

이제 우리 객체를 모듈의 매개변수로 전달해 보겠습니다:

;(function(config) {
	let parent = document.querySelector(config.root);
	
	for (let i = 1; i <= config.amount; i++) {
		let elem = document.createElement(config.type);
		parent.append(elem);
	}
})(config);

설정 객체를 구조 분해 할당하는 것이 더 일반적으로 받아들여집니다:

;(function({root, type, amount}) {
	let parent = document.querySelector(root);
	
	for (let i = 1; i <= amount; i++) {
		let elem = document.createElement(type);
		parent.append(elem);
	}
})(config);