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

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

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

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

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

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

바란다.

클로저(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

보통 함수들은 실행이 끝나면 함수 내부의 변수를 더이상 사용할 수가 없다.

그러나 클로저는 함수의 실행이 종료되어도, 외부 함수의 변수에 값이 저장되어 사용할 수가 있다.

변수 showNumber에는 클로저로 인해 반환한 함수가 담겨져 있어 전달 인자 8은 a 변수에 계속 보존된 채

남아 있어 다음 함수 호출 시 보존되었던 8은 계속해서 다른 전달 인자와 더해진다.

정리를 하면서 클로저에 대해 비유를 하자면 마치 강의실에서 짝사랑녀를 쳐다보는 것과 같다.

내부 함수는 외부 함수에 접근할려고 하지만, 외부 함수는 내부 함수에 접근하지 않다라,,,

이건 마치 내가 짝사랑녀를 향해 얼굴 뚫어지게 쳐다보고 대쉬를 하여도

반대로 짝사랑녀는 쳐다보지도 않고 관심조차 갖지 않는 것과 비슷하다.

이만 글을 마치도록 하겠다..

근데 갑자기 왜 눈에서 눈물이 차오르냐,,,