[JavaScript]클로저(Closure)

클로저란?

오늘은 클로저에 대해서 정리하고자 합니다. 클로저란 지난번 포스팅한 실행 컨텍스트와 그 하위 컴포넌트인 렉시컬 환경과 연관이 있습니다. 클로저는 상위 스코프의 변수에 접근이 가능한 코드 어디에서나 항상 사용되고 있습니다.

렉시컬 환경의 조합으로 인하여 "외부 함수의 변수에 접근할 수 있는 내부 함수"를 클로저 함수라고 합니다.

클로저 함수의 예를 들어봅시다. 아래의 코드를 보면 adder는 x라는 매개변수를 받아 y를 매개변수를 받아 x와 y의 함을 구하는 함수를 반환합니다.
여기서 중요한 점은 함수를 반환한다는 것 입니다.. 그로 인해 adder 함수는 실행이 끝난 이후에도 x값을 유지한체 매개변수 y를 받는 함수로 작용할 수 있습니다.

const adder = x => y => x + y;  
const add = adder(5)

adder(5)(10) // 20
add(10) // 20

이러한 클로저 함수의 특정을 활용하는 방법으로 인하여 클로저 모듈 패턴이 있습니다. 아래의 코드를 보면 클로저를 이용해 여러가지 내부함수를 객체에 담아 반환하는 함수가 있습니다. 이 코드 내의 value 값은 counter1 또는 counter2 처럼 객체가 제공하는 메서드를 통해서만 조작이 가능합니다. 이것을 정보의 접근 제한(캡슐화)라고 합니다. 이렇게 클로저를 이용하면 전역 변수를 만들지 않고 내부에서 변수 값을 다룰 수 있습니다.

const makeCounter = () => {
	let value = 0;
	
	return {
		increase: () => {
			value = value + 1
		},
		decrease: () => {
			value = value - 1
		},
		getValue: () => value
	}
}

const counter1 = makeCounter();
const counter2 = makeCounter();

counter1.increase(); // 1
counter1.increase(); // 2
counter1.decrease(); // 1
counter2.decrease(); // -1
counter2.increase(); // 0
counter1.getValue(); // 1
counter2.getValue(); // 1

정리

이러한 로직을 사용하는 이유는 바로 전역 변수를 많이 선언하지 않기 위함입니다. 프로젝트를 진행하게 되면 다양한 사람들이 만든 코드를 결합하여 하나의 프로덕트를 만들게 되고 이런 경우에 전역 변수명이 겹치거나, 코드에 의해 예상하지 못한 변수 값이 할당되기도 합니다. 이것을 'Side Effect'라 한다.

Side Effect를 줄이기 위해서 위해서 클로저를 활용해 불필요한 전역 변수 사용을 줄이고 스코프를 이용해 값을 안전하게 다루는 연습이 필요할 것입니다.