Closure 클로저

💡클로저란

클로저는 주변의 상태 (lexical environment)의 참조와 함께 번들로 묶인 함수의 조합입니다. 즉, 클로져는 우리에게 inner함수에서 outer함수의 스코프에 접근을 가능하게 해줍니다. 자바스크립트에서 클로저는 함수가 생성될 때마다 생성됩니다.

아래는 클로저를 설명하는 여러 문서에서 참고한 것이다.

 

함수와 함수가 선언된 어휘적(lexical) 환경의 조합

• 클로저는 함수를 지칭하고 또 그 함수가 선언된 환경과의 관계라는 개념이 합쳐진것이다.

클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는(폐쇄)것에 있다.

• 외부함수 스코프에서 내부함수 스코프로 접근 불가능하다.
• 내부함수에서는 외부함수 스코프에서 선언된 변수에 접근 기능하다.
• 따라서 내부 함수는 외부함수에 선언된 변수에 접근 가능하다.

함수가 호출되는 환경과 별개로, 기존에 선언되어 있던 환경(어휘적 환경)을 기준으로 변수를 조회한다.

• 외부함수의 실행이 종료된 후에도, 클로저 함수는 외부함수의 스코프, 즉, 함수가 선언된 어휘적 환경에 접근할 수 있습니다.
• 외부 함수 스코프가 내부함수에 의해 언제든지 참조될 수 있다.
• 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있습니다.

상위 스코프의 식별자를 포함하여 쓰여있는 내부 함수 코드 자체를 어휘적 환경(lexical environment)라고 부를 수 있다.

 

 

🐸 : 사실 처음 읽어보면 하나도 이해가 안될꺼에요, 저도 그랬습니다,,, 게다가 execution context에 대한
사전 지식이 없으면 더 힘들꺼에요 하지만 천천히 읽어내려가보면 감은 잡으실 수 있을거에요

---

클로저 예시

흔히 함수( outer() ) 내에서 함수를 정의( inner() )하고 사용하면 클로저라고 한다.

하지만 대개는 정의한 함수를 리턴하고 사용은 바깥에서 하게된다.

예시를 보며 단계별로 이해해가자.

 

아래 코드를 보면

<script>
  let n0 = 'n0';
  function fn1() {
    let n2 = 'n2';
    console.log(n0, n1, n2)
  }

  function fn2() {
    let n1 = 'n1';
    console.log(n0, n1)
    fn1();
  }
  fn2();
</script>

fn2 함수안에서 fn1 함수를 호출했다 하더라도

fn1에서는 fn2함수안에 있는 n1변수에 접근할 수 없다.

 

그 이유는 자바스크립트가 정적 스코프를 따르기 때문이다.

❗❗Point
만약 어디에서 호출했느냐에 따라서 접근 범위가 달라진다면 그것을
동적 스코프 라고 한다(Dynamic scope)

자바스크립트는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는
정적 스코프이다(Lexical scope or Static scope)

자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프

🐸 : 처음 동적 스코프와 정적 스코프의 정의를 들었을때 이해가 안갔기 때문에 저같은 사람이 있으리라 생각하고
       조그마한 예시를 통해 아래에서 조금 더 자세히? 설명 해드리겠읍니다!! 

---

👉🏻추가설명

🔍정적 스코프

var n1 = 1;
function foo() {
   var n1 = 10;
   bar();
}

function bar() {
   console.log(n1);
}

foo();

 

위에서 함수의 스코프를 결정하는 방식이 호출시점이 아닌 선언시점이라고 했는데

 

누군가는 foo()함수 안에 있는 n1 변수가 10이고 bar()함수의 console.log(x)가

foo()함수안에서 실행되면서 10이 출력되는 것이 아닌가 하고 헷갈리기 쉽다.

 

하지만 다시한번 말그대로 함수의 선언시점에 스코프를 결정한다고 했으니,

bar함수를 아직 어디선가 bar() ( =이런식으로) 호출하기 전의 작성만(=선언)한 시점으로 돌아가보면

bar 함수 시점에서는 bar함수안의 로컬 변수로x는 없으니 전역변수인 가장 윗줄의 var n1 = 1 을 참고하여

1이 결과값으로 출력되게 된다.

 

🔍동적 스코프

위의 예시를 보면 동적 스코프에 해석을 대입시키는 것은 어렵지 않을 것이다.

어디에서 호출했느냐에 따라서 접근 범위가 달라진다면 그것을 동적 스코프 라고 했으니

 

만약 자바스크립트가 동적 스코프를 사용한다면, 호출 위치에 따라 범위가 지정되니

foo()함수 안에서 호출된 4번째줄에 bar()는 foo() 함수 내부에 var n1 = 10으 영향을 받아

1이 아닌 10이 결과값으로 나왔을 것이다.

 

---

👈🏻다시 돌아와서

아래는 클로저 함수의 예시이다.

let n0 = 'n0';
function fn1() {
  function fn2() {
    let n2 = 'n2';
    console.log(n0, n1, n2);
  }
  let n1 = 'n1';
  console.log(n0, n1)
  fn2();
}

fn1();

이렇게 위와 같이 함수를 함수안에 정의하면 그함수의 부모함수의 스코프에 접근할 수 있다라는 것을

보여준다.

 

한번더 정리해서
말하자면 클로저란 내부 함수가 정의될 떄 외부 함수의 환경을 기억하고 있는 내부 함수를 말한다.

 

외부 함수 안에서 선언된 내부 함수는 그 외부 함수의 지역 변수나

함수에 접근하여 사용할 수 있습니다.

 

❗❗Point

클로저 = 폐쇄하다,동봉하다

함수가만들어지는 시점에서 부모함수가 가지고있는 스코프 유효범위 변수들을 동봉해서 가지고있다는 뜻이다.
언제든지 호출하면 부모함수의 스코프 범위에 접근할 수 있다.

 

 

크롬 개발자 도구를 통해 선언된 스코프를 살펴보면 Closure (fn1) 안에 n1 : "n1"이 들어있는 것을 볼 수 있다.

이렇게 함수를 함수안에 정의하면 그함수{ fn2() }의 부모함수의{ fn1() } 의스코프에 클로저 함수를 통해

접근할 수 있다라는 것을 알 수 있다.

 

자바스크립트가 아닌 다른 언어의 경험으로
outer실행되는 순간 끝나면 내부의 변수들은 사라진다고 생각 하지만 값이 찍힌다.
생성한 시점의 스코프 체인을 계속 들고 있는다  = 클로저의 특징

📋정리
클로저란 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다. 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수이다. 전역 변수의 사용을 억제하고, 정보를 은닉하기 위해 사용한다.