클로저(closure)

JINSUNG LEE·2021년 4월 23일

JavaScript

자바스크립트는 함수를 동적으로 생성할 수 있어 동적 타입이라고도 부르는 언어 프로그램이다.

무엇보다 함수 지향 언어인 자바스크립트는 내부 함수를 통해 외부 함수까지 접근이 가능한 특징이 있다.

이를 클로저 함수라고 부르는데 더 명확하게 정의하면

외부함수의 변수에 접근할 수 있는 내부 함수

오늘은 클로저 함수에 대해 설명하고자 한다.

참고로 스코프에 대한 지식도 필요하니 스코프에 대한 지식이 없는 사람은 사전에 참고하고 이 글을 읽기

바란다.

클로저(closure)


function addNumber(count) {

  
  return function() {
   return count++;
 };
}

let showNumber = addNumber();

console.log(showNumber()); // 0
console.log(showNumber()); // 1
console.log(showNumber()); // 2

함수 내부에서 선언한 내부 함수는 '중첩 함수'라고 부른다.

위 코드는 외부 함수의 변수에 내부 함수 변수가 접근하여 count가 후위 증가 되어 반환 되는 것을 볼 수 있다.

내부 함수(중첩 함수)의 매력은 이렇게 반환된 내부 함수를 어느 곳에서든 호출하여 사용할 수 있다.

하지만 내부 함수가 외부 함수에 접근이 가능해야 한다는 점은 유의하여야 한다.

클로저의 영역

해당 사진에서 빨간색 영역이 내부 함수이고, 파란색 영역은 외부 함수이다.

그럼 확실히 이해하였는지 영역 접근에 관해 질문을 하겠다.

외부 함수는 내부 함수에 접근이 가능한가?

아니요! 바깥 스코프는 안쪽 스코프 접근이 불가능해요

내부 함수는 외부 함수 접근이 가능한가?

네! 안쪽 스코프는 바깥 스코프 접근이 가능해요

간혹 스코프에서 같은 이름의 변수가 선언이 없으면 재할당 개념으로 "외부 함수가 내부 가는거 아니야?"

하면서 헷갈려하는 경우가 생길 수도 있다.

그럴때는 간단히 차이를 내보자면 클로저에서의 내부 함수는 return문에 둘러 싸였다는것을 명심하도록 하자!

데이터를 저장하는 클로저


const addNumber = function (a) {
 return function (b) {
  return a = a + b;
  };
}

const showNumber = addNumber(8)
showNumber(8) // 16
showNumber(10) // 26