closer 내 맘~🎶 아니고, Closure( 클로저)

클로저

• 함수 내부에 만든 지역 변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태.

function 외부함수() {
    var 변수;
     function 내부함수(){
         변수 A 사용;  
     }
}

• 클로저는 문법일까요? 아니요
• 변수 A는 클로저 현상에 의해 외부함수() 호출이 끝나더라도 사라지지 않고 값을 유지.

---

function addCount() {
  var count = 0;
  return ++count;
}

console.log(addCount()) ; // 1
console.log(addCount()) ; // 1
console.log(addCount()) ; // 1

• 함수를 호출할 때마다 1씩 증가하는 API
• 1만 출력 되네 왜?
  함수가 끝나고 다시 실행하게 되면 var count는 0으로 초기화되어증감연산자를 통해 1이 리턴이 된다.

---

function cloCount() {
  var count = 0;

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

var counter = cloCount();

console.log(addCount()) ; // 1
console.log(addCount()) ; // 2
console.log(addCount()) ; // 3

코드 직독직해

1. cloCount( )함수가 호출되면 지역변수 0이 초기화 할당 만들어짐.
2. 내부에 addCount( )함수가 만들어지고 cloCount( )함수는 종료.
3. counter( )가 실행되면 addcount( )함수가 실행되면서 증감 연산자에 의해서 count값이 0 에서 1 로 증가. // 1 출력
4. counter( )가 실행되면 count값이 증가. // 2 , 3 출력

• 변수가 메모리에서 제거되지 않고 계속해서 값을 유지하는 상태를 클로저라고 부르며 내부에 있는 함수를 클로저 함수라고 함.

---

1. var myHome = Korea(); 를 통해서 home 함수를 반환

• 일반적으로 함수가 종료되면 메모리에서 소멸

2. 클로저는 이러한(외부 변수와 같은) 환경 자체를 통째로 기억하는 공간을 형성한다.

클로저를 사용하면 좋은 점

✅ 연관 있는 변수와 기능(중첩 함수)을 하나의 함수로 묶어 독립적으로 실행 시킬 수 있다.

✅ 함수 내부에 데이터가 만들어지기 때문에 함수 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있다.

→ 객체 지향 프로그래밍에서는 private 데이터라고 부른다.

왜 사용하는 거야?

✅  사용하는 이유 ( 장점 )

(1) 데이터를 보존할 수 있다.

• 클로저는 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다.

const adder = function(x) {
     return function(y) {
          return x + y;
     }            
} //adder(x)(y)로 사용 할 수 있다.
const add5 = adder(5)
add5(7) // 12 (7+5)
// adder라는 함수 밖으로 나왔어도 외부 함수의 x 변수를 이용해 5를 할당할 수 있다.
// 이는 어휘적 환경을 메모리에 저장하기 때문에게 가능하다.
add5(10) // 15 (5+10)

---

(2) 정보의 접근 제한 (캡슐화 : 중요한 데이터를 보존, 보호하는 것)

• ‘클로저 모듈 패턴’을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다. 이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.

const makeResult = () => {
  let value = 0;
  return {
          increase: () => {
                 value = value + 1
          },
          decrease: () => {
                 value = value - 1
          },
          getResult: () => value
   }
}
const make1 = makeResult();

• 데이터 보존을 통해 value = 0 사용가능

• make1은 Increase, decrease, getResult를 가진 객체가 됨.

• 만약 클로저 함수를 이용하지 않았다면? 함수 내부에 value를 두지 못하고, value는 전역변수가 된다.

• 전역변수가 된다고?
  → 부수 효과로 인해서 의도치 않게 변경될 수 있어!

• 내부에 value 변수를 선언하여 함수를 변경하지 않는 이상 쉽게 value를 바꿀 수 없다!
  → 클로저를 이용해서 전역변수의 사용을 줄이고,
  스코프를 이용해서 value의 값을 보호할 수 있다!

(3) 모듈화에 유리하다.

• 클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 잇다.
• 함수의 재사용성을 극대화 함수 하나를 독립적인 부품의 형태로 분리하는 것을 모듈화라고 한다.
• 클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 클로저는 모듈화에 유리하다.

const make1 = makeResult();
make1.increase();
make1.increase();
make1.decrease();
make1.getResult(); // 1

const make2 = makeResult();
make2.decrease();
make2.decrease();
make2.decrease();
make2.getResult(); // -3

• make1과 make2가 함수의 vlaue값에 영향을 미치지 않기 때문에 재사용할 수 있다.

클로저 사용할 때 자주 발생할 수 있는 실수

var funcs = [];

for(var i = 0; i < 3; i++){
 funcs[i] = function() {return i;}; 
 }
 
 for(var j =0; j < funce.length; j++){
   consoe.log(funcs[j]());
 } 

코드 직독직해
1) 첫번째 for문의 코드 블록 내 함수가 funcs 배열의 요소로 추가된다.
2) 두번째 for문의 코드 블록 내에서 funcs 배열의 요소로 추가된 함수를 호출한다.
3) 0,1,2를 반환할까요? 아니요.

4) for문의 변수 선언문에서 var키워드로 선언한 i변수는 블록 레벨 스코프가 아닌 함수 레벨 스코프 -> 전역변수
5) funcs 배열의 요소로 추가한 함수를 호출하면 전역 변수 i를 참조하여 i의 값 3이 출력된다.
6) 클로저를 사용하기위해 바르게 동작하는 코드를 만들어봅니다.

7) 전역 변수 i에 현재 할당되어 있는 값을 인수로 전달받아 매개변수 id에 할당한 후 중첩 함수를 반환하고 종료된다.
-> 반환한 함수는 funcs 배열에 순차적으로 저장.
8) 즉시 실행 함수가 반환한 중첩 함수는 자신의 상위 스코프를 기억하는 클로저이다.
-> 매개변수 id는 중첩 함수에 묶여있는 자유 변수가 되어 그 값이 유지.

• 함수 레벨 스코프 특성으로 인해 for문의 변수 선언문에서 var 키워드로 선언한 변수가 전역 변수가 되기 때문에 발생하는 현상

9) ES6의 let 키워드를 사용해보자.

10) for문의 변수 선언문에서 let 키워드로 선언한 변수를 사용하면 for 문의 코드 블록이 반복 실행될 때마다 for문 코드 블록의 새로운 렉시컬 환경이 생성된다.
11) 이때 함수의 상위 스코프는 for문의 코드 블록이 반복 실행될 때마다 식별자의 값을 유지해야한다.
-> for문이 반복될 때마다 독립적인 렉시컬 환경을 생성하여 식별자의 값을 유지.

• for 문의 변수 선언문에서 let 키워드로 선언한 초기화 변수를 사용한 for문은 코드 블록이 반복 실행될 때마다 for문 코드 블록의 새로운 렉시컬 환경을 생성.
• let, const 키워드를 사용한 반복문은 반복을 실행할 때마다 새로운 렉시컬 환경을 생성하여 상태를 저장한다.
• 반복문의 코드 블록 내부에 함수 정의가 없는 반복문이 생성하는 새로운 렉시컬 환경은 반복 직후, 아무도 참조하지 않기 때문에 ( --------------)의 대상이 된다.

클로저에 대한 말말말

✅ 반환된 내부함수가 자신이 선언되었을대의 환경인 스코프를 기억하여 자신이 선언되었을때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수.

→ 자신이 생성될때의 환경을 기억하는 함수 .

→(코어) 어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상.

→ 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

→ 자바스크립트의 고유한 개념이 아니라, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성.

---

클로저에 대한 생각

🤨 코어자바스크립트 공부를 하면서 클로저를 딱 보았을 때 드는 생각은
오마이걸의 클로저 노래였다. 노래는 흥얼거릴정도로 가사가 바로 익혀졌지만
코어자바스크립트의 클로저는 바로 익혀지지는 않았지만 다른 사람들에게 설명을 해주기 위해
구글에 검색하며 다른 분들의 설명을 반복해서 듣고 보고 하다보니 노래 만큼 친숙해지고 있음을 느낄 수 있었다.
(대한민국이라는 외부함수와 서울이라는 내부함수? 강남땅이라는 전역변수에 세운 건물이라는 내부 함수 등등 여러가지에 비유를 하며 이해하고자 노력해보았다!)

---

참고
클로저란 무엇일까?
클로저 MDN
백고등어 개발 블로그
상권's TIL
이미지 Judy