면접관 앞에서 내 모습

면접관에게 이 질문을 받는다면 대답할 수 있을까? 🤔
면접에서 실제로 나올 수 있는 주제이기에 예상할 수 있는 꼬리질문까지 한번 정리해보자.

[면접 대비 예상 질문] 클로저 (closure)

클로저(closure)에 대해 설명해 보세요.

클로저는 함수와 함수가 선언된 어휘적 환경의 조합으로 외부 함수의 변수에 접근할 수 있는 내부 함수입니다.

---

어휘적 환경의 조합은 어떤 의미이죠?

어휘적 환경의 조합이란 “변수와 함수의 선언 형태의 조합”을 말하는 것인데요, 자바스크립트는 함수가 호출되는 환경과는 별개로, 기존에 선언되었던 환경을 기준으로 변수를 조회하려는 특성이 있기 때문입니다.

즉, 클로저가 생성된 시점의 유효 범위에 있는 모든 지역 변수를 사용하는 환경을 말하는 것입니다.

---

클로저의 특징을 설명해 보세요.

클로저는 캡슐화와 모듈화의 특징을 가지고 있습니다. 외부 함수의 변수가 함수 밖으로 노출되지 않아 정보의 접근을 제한해 클로저로 자바스크립트에서 캡슐화를 구현할 수 있습니다. 또한 클로저는 데이터를 보존하는 함수입니다. 외부 함수의 실행이 끝나더라도 외부 함수 안의 변수가 메모리에 저장되어 값을 기억하고 있습니다. 이러한 특징으로 클로저 모듈 패턴을 구현할 수 있습니다.

---

클로저 모듈 패턴에 대해서 설명해 보세요.

클로저에서 내부 함수를 하나만 리턴하는 것이 아니라, 객체에 여러개의 내부 함수를 리턴하도록 만든 것입니다. 외부 함수에 있는 value 변수는 스코프 규칙에 의해 값을 수정하거나 새롭게 할당할 수 없습니다. 정보의 접근을 제한하는 캡슐화의 특징을 가지고 있습니다. 클로저를 통해 불필요한 전역 변수의 사용을 줄이고 안전하게 값을 보호할 수 있습니다. 또한 counterA와 counterB의 value는 서로에게 영향을 주지 않습니다. makeCounter를 완전히 독립된 형태로 재사용할 수 있는 것입니다.

const makeCounter = () => {
	let value = 0

	return {
		increase: () => {
			value = value + 1
		},
		decrease: () => {
			value = value - 1
		},
		getValue: () => {
			getValue: () => value
		}
	}
}

const counterA = makeCounter()
const counterB = makeCounter()

---

클로저를 사용했을 때, 단점을 설명할 수 있나요?

외부 함수 스코프가 내부 함수에 의해 언제든지 참조될 수 있기 때문에, 클로저 패턴은 메모리 상에 남게 됩니다. 이는 일반 함수였다다면 실행 종료 후 자바스크립트 메모리 관리에 의해 가비지 컬렉션이 되었을 객체가 남아있게 되는 것입니다. 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수 있다고 알고 있습니다.

---

클로저의 예시를 작성할 수 있나요?

네, 예를 들어 다음과 같이 x와 y의 합을 구하는 함수가 있다고 할 때, 다음과 같이 작성할 수 있습니다.

let add = function(x) {
	let sum = function(y) {
		return x + y
	}
	return sum
}

함수 표현식으로 선언된 add 함수는 x를 매개변수로 하며, 내부 함수 sum을 반환하고 있습니다. 여기서 반환하는 함수인 sum은 외부 함수인 add의 매개변수 x에 접근할 수 있으므로 클로저 함수입니다.

let addOne = add(1)
addOne(5) // 6

addOne 함수에 전달인자로 1을 받는 add함수를 할당하면, addOne은 함수 그 자체를 재할당하기 전까지는 외부 변수x인 1에 접근할 수 없기 때문에 캡슐화를 할 수 있는 것입니다.

---

좀 더 실용적인 예시가 있으면 좋겠습니다.

클로저가 유용하게 사용되는 예는 현재 상태를 기억하고 변경된 최신 상태를 유지하는 상황입니다. 예를 들면 toggle 버튼을 구현할 때, isShow라는 함수가 있다고 가정한다면 다음과 같이 적용할 수 있습니다.

const element = document.querySelector('.element')

let toggleHandler = function(element) {
	let isShow = false
	return function() {
		element.style.display = isShow ? 'block' : 'none'
		isShow = !isShow
	}
}

toggleBtn.onclick = toggleHandler

다른 예시로, 클로저를 이용해 HTML 태그를 생성하는 경우입니다. tag를 외부 함수 변수에 담아두어 스코프 안에 가두어 둔 채 재사용을 할 수 있습니다.

const tagMaker = tag => content => `<${tag}>${content}</${tag}>`

const divMaker = tagMaker('div')
divMaker('hello') // <div>hello<div>
divMaker('code') // <div>code</div>

const anchorMaker = tagMaker('a')
anchorMaker('go') // <a>go</a>
anchorMaker('class') // <a>class</a>

---

나름 간결하게 핵심을 전달하면서 내용이 비어보이지 않도록 했는데, 흠🤔 면접때 준비한 내용을 자연스럽게 얘기할 수 있을까? 위 counter 예시는 학습에 나온 예시이기도 하고 클로저를 설명할 때 자주 소개되는 예시라고 한다.

정리하면서 조금 더 공부해보고 싶은 내용은 클로저로 구현한 커링과 IIFE(즉시실행함수호출)을 활용과 자바스크립트의 은닉화에 대해서다.

👉 리액트에서 IIFE 사용하기 | 2022.1.5 작성

출처

클로저 | 코드스테이츠 유어클래스
클로저 | MDN
클로저, 그리고 캡슐화와 은닉화 | NHN Cloud Meetup!