자바스크립트에서 클로저를 통한 라이브러리

자바스크립트에서는 다른 프로그래머들이 사용할 수 있도록 함수 집합을 제공하는 라이브러리가 종종 생성됩니다.

이러한 라이브러리는 일반적으로 클로저를 통해 모듈로 감싸집니다. 이는 라이브러리를 연결할 때 외부 세계에 가능한 한 적은 수의 함수가 나타나도록 하기 위함입니다.

일반적으로 각 라이브러리는 외부 세계에 하나의 변수만 생성하려고 노력합니다 - 라이브러리 함수를 가진 객체입니다. 이때 라이브러리 코드 내부에서 일부 함수는 주요 함수이고, 일부는 보조 함수입니다. 분명히, 우리는 내보내는 객체를 보조 함수로 어지럽히지 않고 필요한 함수만 외부 세계로 내보내고 싶습니다.

예를 통해 살펴보겠습니다. 우리가 라이브러리로 만들고 싶은 다음 함수 집합이 있다고 가정해 봅시다:

function square(num) {
	return num ** 2;
}
function cube(num) {
	return num ** 3;
}
function avg(arr) {
	return sum(arr, 1) / arr.length;
}
function digitsSum(num) {
	return sum(String(num).split(''));
}

// 보조 함수
function sum(arr) {
	let res = 0;
	
	for (let elem of arr) {
		res += +elem;
	}
	
	return res;
}

함수들을 모듈 형태로 구성해 봅시다:

;(function() {
	function square(num) {
		return num ** 2;
	}
	function cube(num) {
		return num ** 3;
	}
	function avg(arr) {
		return sum(arr, 1) / arr.length;
	}
	function digitsSum(num) {
		return sum(String(num).split(''));
	}
	
	// 보조 함수
	function sum(arr) {
		let res = 0;
		
		for (let elem of arr) {
			res += +elem;
		}
		
		return res;
	}
})();

이제 보조 함수를 제외한 모든 함수를 내보냅니다:

;(function() {
	function square(num) {
		return num ** 2;
	}
	function cube(num) {
		return num ** 3;
	}
	function avg(arr) {
		return sum(arr, 1) / arr.length;
	}
	function digitsSum(num) {
		return sum(String(num).split(''));
	}
	
	// 보조 함수
	function sum(arr) {
		let res = 0;
		
		for (let elem of arr) {
			res += +elem;
		}
		
		return res;
	}
	
	window.math = {square, cube, avg, digitsSum};
})();

우리에게 index.html HTML 페이지가 있다고 가정해 봅시다:

<html>
	<head>
		<script>
			
		</script>
	</head>
</html>

여기에 우리 라이브러리를 연결해 봅시다:

<html>
	<head>
		<script src="math.js"></script>
		<script>
			
		</script>
	</head>
</html>

우리 라이브러리의 함수들을 사용해 봅시다:

<html>
	<head>
		<script src="math.js"></script>
		<script>
			alert(math.avg([1, 2, 3]) + math.square());
		</script>
	</head>
</html>

다음 코드가 주어졌습니다:

function avg1(arr) {
	return sum(arr, 1) / arr.length;
}

function avg2(arr) {
	return sum(arr, 2) / arr.length;
}

function avg3(arr) {
	return sum(arr, 3) / arr.length;
}

// 보조 함수
function sum(arr, pow) {
	let res = 0;
	
	for (let elem of arr) {
		res += elem ** pow;
	}
	
	return res;
}

이 코드를 모듈 형태로 구성하세요. 보조 함수를 제외한 모든 함수를 외부로 내보내세요.

underscore 라이브러리를 공부하세요. 원본 라이브러리의 5-10개의 함수를 반복하여 비슷한 라이브러리를 직접 만들어보세요.