(JS) Closure 클로저 (2019/10/21)(보충필요!)

개념

---

내부함수가  외부함수에 접근 할 수 있는 것을 클로저 라고 한다.

원래는 외부 함수의 실행이 끝나면 외부 함수가 소멸되어 내부 함수가 외부 함수의 변수에 접근할 수 없습니다. 

하지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조

 

 

사용방법

---

const btn = document.getElementById('btn');

function increa(){
  let count = 0;
  return function(){
    count++;
    console.log(count)
  }
}

let add = increa();

btn.addEventListener('click',add);

let add = increa()

btn.addEventListener('click',add)

let add = function(){

   count++;

   console.log(count);

}

가 된다. 

btn.addEventListener 이벤트로 add()가 실행되는데

이때, add에서 count를 increa함수에서 찾는다.

add 입장에서는 increa를 글로벌 스코프로 생각한다?!

 

그래서 클릭 할때마다 count는 1씩 증가하고 increa 함수 안에 선언된 let count 의 값이 저장되어 누적된다.

 

closure를 사용하는 이유

---

Javascript의 변수들은 기본적으로 public으로 되어 있습니다. 

객체 지향 중에서 지향하는 캡슐화의 형태로 만들려면 클로저를 사용해야 합니다. 

외부에서 title이라는 변수에는 접근할 수 없지만, 내부에선 접근이 가능하기 때문입니다. 

그리고 다른 범위에서 title이라는 변수를 선언했다 하더라도 outer함수의 title과 겹칠 위험이 있기 때문에 클로저를 사용해야 합니다.

 

 

closure의 조건

---

1. 내부 함수가 익명 함수로 되어 외부 함수의 return값으로 사용되어야 합니다.

2. 반환되는 내부 함수는 외부 함수의 실행환경에서 실행됩니다.

3. 내부 함수에서 사용되는 변수는 외부 함수의 변수 스코프에 있어야 합니다.