feat: 승현-클로저.md

Author: SeungHyune

Diff for: week07_클로저/승현-클로저.md

@@ -0,0 +1,281 @@
+# 24장 클로저
+
+## 24.4 클로저의 활용
+
+> 클로저는 상태를 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용됩니다.
+    
+    
+아래 간단한 예제 코드를 통해 안전하게 유지해야 할 상태에 대해서 알아보겠습니다.
+```js
+// 카운트 상태 변수
+let num = 0;
+
+// 카운트 상태 변경 함수
+const increase = function() {
+  // 카운트 상태를 1만큼 증가 시킵니다.
+  return ++num;
+}
+
+console.log(increase()); // 1
+console.log(increase()); // 2
+console.log(increase()); // 3
+```
+위 코드는 오류를 발생시킬 가능성을 내포하고 있는 좋지 않은 코드입니다.
+
+이유가 무엇일까요?!
+1. 카운트 상태는 increase 함수가 호출되기 전까지 변경되지 않고 유지되어야 합니다.
+2. 이를 위해 카운트 상태는 increase 함수만이 변경할 수 있어야 합니다.
+
+하지만 카운트 상태는 전역 변수를 통해 관리되고 있기 때문에 언제든지 변수에 접근할 수 있고 변경할 수 있습니다. 이는 의도치 않게 상태가 변경될 수 있다는 것을 의미합니다. 이는 예상치 못한 오류로 이어질 수 있습니다.
+
+<br>
+
+이번에는 위에서 발생한 문제를 해결할 수 있는(의도치 않는 상태 변경을 방지할 수 있는) 예제 코드를 살펴보겠습니다.
+```js
+// 카운트 상태 변경 함수
+const increase = (function () {
+  // 카운트 상태 변수
+  let num = 0;
+
+  return function() {
+    // 카운트 상태를 1만큼 증가 시킵니다.
+    return ++num;
+  }
+}())
+
+console.log(increase()); // 1
+console.log(increase()); // 2
+console.log(increase()); // 3
+```
+1. 위 코드가 실행되면 increase 변수에 즉시 실행 함수가 실행되어 함수가 반환됩니다.
+2. increase 함수를 실행 시키면 반환된 함수가 실행됩니다. 이 함수는 자신이 정의된 위치에 의해 결정된 상위 스코프의 렉시컬 환경을 기억하는 클로저입니다.
+3. increase 함수를 실행 시키면 가장 먼저 함수 내부의 실행 컨텍스트에서 num 변수를 찾습니다. 하지만 내부에는 num이라는 변수가 존재하지 않기 때문에 상위 스코프의 렉시컬 환경을 참조합니다. 이렇게 상위 즉시 실행 함수의 환경 레코드에서 num을 찾아 해당 값을 1 증가 시키고 함수를 종료합니다.
+
+즉시 실행 함수는 한 번만 실행되므로 increase가 호출될 때마다 num 변수가 초기화될 일은 없을 것입니다. 또한 num 변수는 외부에서는 직접 접근할 수 없는 은닉화 private 변수이므로 전역 변수를 사용했을 때와 같이 의도되지 않은 변경을 걱정할 필요도 없기 때문에 더 안정적인 프로그래밍이 가능합니다.
+
+이처럼 **`클로저`는 상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용됩니다.**
+
+지금까지 `increase` 함수를 통해 카운트를 증가하는 코드를 살펴보았습니다.
+
+<br>
+
+이번에는 조금 더 발전 시켜 증가, 감소 모두 사용 가능하도록 만들어보겠습니다.
+```js
+const counter = (function () {
+  // 카운트 상태 변수
+  let num = 0;
+
+  // 클로저인 메서드를 갖는 객체를 반환합니다.
+  // 객체 리터럴은 스코프를 만들지 않습니다.
+  // 따라서 아래 메서드들의 상위 스코프는 즉시 실행 함수의 렉시컬 환경입니다.
+  return {
+    // num: 0, 프로퍼티는 public하므로 은닉되지 않는다.
+    increase() {
+      return ++num;
+    },
+    decrease() {
+      return --num;
+    }
+  }
+}());
+
+console.log(counter.increase()); // 1
+console.log(counter.increase()); // 2
+console.log(counter.decrease()); // 1
+console.log(counter.decrease()); // 0
+```
+1. 즉시 실행 함수가 반환하는 객체 메서드도 함수 객체로 생성됩니다.
+2. 객체 리터럴의 중괄호는 코드 블록이 아니므로 별도의 스코프를 생성하지 않습니다.
+3. `increase`, `decrease` 메서드의 상위 스코프는 메서드가 평가되는 시점에 실행중인 실행 컨텍스트인 즉시 실행 함수 컨텍스트의 렉시컬 환경입니다.
+
+따라서, `increase`, `decrease` 메서드는 언제 어디서 호출되든 상관없이 즉시 실행 함수의 스코프 식별자를 참조할 수 있습니다.
+
+### 함수형 프로그래밍
+다음은 함수형 프로그래밍에서 클로저를 활용하는 간단한 예제입니다.
+```javascript
+// 함수를 인수로 전달받고 함수를 반환하는 고차 함수
+// 이 함수는 카운트 상태를 유지하기 위한 변수 counter를 기억하는 클로저를 반환합니다.
+function makeCounter(aux) {
+  // 카운트 상태를 유지하기 위한 변수
+  let counter = 0;
+
+  // 클로저를 반환
+  return function () {
+    counter = aux(counter);
+    return counter;
+  };
+}
+
+// 보조 함수
+function increase(n) {
+  return ++n;
+}
+
+function decrease(n) {
+  return --n;
+}
+
+// 함수로 함수를 생성한다.
+// makeCounter 함수는 보조 함수를 인수로 전달받아 함수를 반환한다.
+const increaser = makeCounter(increase) {
+  console.log(increaser()); // 1
+  console.log(increaser()); // 2
+}
+
+const decreaser = makeCounter(decrease) {
+  console.log(decreaser()); // -1
+  console.log(decreaser()); // -2
+}
+```
+`makeCounter` 함수가 반환하는 함수는 자신이 생성됐을 때의 렉시컬 환경인 `makeCounter` 함수의 스코프에 속한 `counter` 변수를 기억하는 클로저 입니다.
+
+이때 주의해야 할 것은 **`makeCounter` 함수를 호출해 함수를 반환할 때 반환된 함수는 자신만의 독립된 렉시컬 환경을 갖는다는 것입니다.**
+이는 함수를 호출하면 그때마다 새로운 maksCounter 함수 실행 컨텍스트의 렉시컬 환경이 생성되기 때문입니다.
+
+![image](https://github.com/SeungHyune/study/assets/114329713/51c68f72-a013-478e-b455-a88f84dce160)
+위 예제에서 전역변수 increaser와 decreaser에 할당된 함수는 각각 자신만의 독립된 렉시컬 환경을 갖기 때문에 카운트를 유지하기 위한 자유 변수 counter를 공유하지 않아 카운터의 증감이 연동되지 않습니다.
+
+이를 서로 연동된 증감 카운터를 만들려면 렉시컬 환경을 공유하는 클로저를 만들어야 합니다. (이를 위해서는 makeCounter 함수를 두 번 호출하지 말아야 합니다.)
+```javascript
+const counter = (function (){
+  let counter = 0;
+
+  return function(aux) {
+    aux(counter);
+    return counter;
+  }
+}());
+
+function increase(n) {
+  return ++n;
+}
+
+function decrease(n) {
+  return --n;
+}
+
+// 증가
+console.log(counter(increase)); 1
+console.log(counter(increase)); 2
+
+// 감소
+console.log(counter(decrease)); 1
+console.log(counter(decrease)); 0
+```
+1. `counter` 변수에 즉시 실행 함수의 반환 함수를 저장합니다. 이 함수는 자신의 상위 스코프인 즉시 실행 함수의 렉시컬 환경을 기억하는 클로저 입니다.
+2. 반환 받은 함수에 증가, 감소 함수를 인자로 전달하여 counter 함수가 기억하는 `counter` 변수의 값의 상태를 변경할 수 있습니다.
+3. 이때, 이전 코드와는 다르게 `increase`, `decrease` 함수는 `counter` 변수를 공유할 수 있습니다.
+
+<br>
+
+## 24.5 캡슐화 정보 은닉
+`캡슐화` 는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 메서드를 하나로 묶는 것을 말합니다.
+
+캡슐화는 객체의 특징을 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 `정보 은닉`  이라 합니다.
+
+자바스크립트는 `public`, `private`, `protexted` 같은 접근 제한자를 제공하지 않습니다. 기본적으로 모든 객체 프로퍼티, 메서드는 외부에 공개되어 있습니다. (기본적으로 public이다)
+
+```javascript
+const Person = (function(){
+  let _age = 0;
+
+  // 생성자 함수
+  function Person(name, age) {
+    this.name = name;
+    _age =age;
+  }
+
+  // 프로토타입 메서드
+  Person.prototype.sayHi = function() {
+    console.log(`Hi! My name is ${this.name}. I am ${_age}`);
+  }
+
+  // 생성자 함수 반환
+  return Person
+}());
+
+const me = new Person('Lee', 20);
+me.sayHi(); // Hi! My name is Lee. I am 20.
+console.log(me.name); // Lee
+console.log(me._age); // undefined
+
+const you = new Person('Kim', 30);
+you.sayHi(); // Hi! My name is Kim. I am 30.
+console.log(you.name); // Kim
+console.log(you._age); // undefined
+```
+위 패턴을 사용하면 자바스크립트에서도 정보 은닉이 가능한 것처럼 보입니다. 
+
+즉시 실행 함수가 반환하는 Person 생성자 함수와 Person 생성자 함수의 인스턴스가 상속받아 호출할 Person.prototype.sayHi 메서드는 즉시 실행 함수가 종료된 이후 호출됩니다. 이때 sayHi 메서드는 즉시 실행 함수의 렉시컬 환경의 `_age`를 참조할 수 있는 클로저입니다.
+
+
+```javascript
+const me = new Person('Lee', 20);
+me.sayHi(); // Hi! My name is Lee. I am 20
+const you = new Person('kim', 30);
+you.sayHi(); // Hi! My name is Kim. I am 30
+
+me.sayHi(); // Hi! My name is Lee. I am 30
+```
+하지만 지금까지 살펴본 코드에도 문제가 있습니다. Person 생성자 함수가 여러 개의 인스턴스를 생성할 경우 다음과 같이 `_age` 변수의 상태가 유지되지 않는다는 것입니다.
+
+이는 `Person.prototype.sayHi` 메서드가 단 한 번 생성되는 클로저이기 때문에 발생하는 현상입니다. `Person.prototype.sayHi` 메서드는 즉시 실행 함수가 호출될 때 생성됩니다. 이때 `Person.prototype.sayHi` 메서드는 자신의 상위 스코프인 즉시 실행 함수의 렉시컬 환경의 참조를 `[Enviorment]`에 저장하여 기억합니다. (동일한 상위 스코프를 참조하게 됩니다.)
+
+이처럼 자바스크립트는 정보 은닉을 완전하게 지원하지 않습니다.
+
+<br>
+
+## 24.6 자주 발생하는 실수
+```javascript
+var funcs = [];
+
+for (var i = 0 ; i < 3 ; i++) {
+  funcs[i] = function () { return i };
+}
+
+for(var j = 0 ; j < funcs.length ; j++) {
+  console.log(funcs[j]());
+}
+```
+1. 첫 번째 for 문의 코드 블록 내에서 함수가 funcs 배열의 요소로 추가됩니다.
+2. 두 번째 for 문의 코드 블록 내에서 funcs 배열의 요소로 추가된 함수를 순차적으로 호출합니다.
+3. 이때 funcs 배열의 요소로 추가된 3개의 함수가 0, 1, 2를 반홚할 것으로 기대하지만 결과는 그렇지 않습니다.
+
+**왜 그런걸까요 ??**
+그 이유는 변수 선언문 var 키워드의 스코프 범위가 함수 레벨 스코프를 갖기 때문입니다. 그렇게 var로 선언된 for문 내부 변수는 전역 변수이고 전역 변수 i에는 0, 1, 2가 순차적으로 할당됩니다. 따라서 funcs 배열의 요소로 추가한 함수를 호출하면 전역 변수 i를 참조하여 i의 값 3이 출력됩니다.
+
+위 문제를 해결하기 위해서는 `블록 스코프` 범위를 갖는 let 키워드를 사용하거나 for문이 순회할 때의 i 값을 기억하는 스코프를 만들어줄 수 있습니다.
+
+먼저 let 키워드를 통해 위 코드를 개선해 보겠습니다.
+```javascript
+var funcs = [];
+
+for (let i = 0 ; i < 3 ; i++) {
+  funcs[i] = function () { return i };
+}
+
+for (var j = 0 ; j < funcs.length ; j++) {
+  console.log(funcs[j]());
+}
+```
+for 문의 코드 블록이 반복 실행될 때마다 for 문 코드 블록의 새로운 렉시컬 환경이 생성됩니다.
+이때 저장된 함수의 상위 스코프는 for 문의 코드 블록이 반복 실행될 때마다 식별자의 값을 유지해야 합니다. 이를 위해 for 문이 반복될 때마다 독립적인 렉시컬 환경을 생성하여 식별자 값을 유지합니다.
+
+```javascript
+var funcs = [];
+
+for (var i = 0 ; i < 3 ; i++) {
+  funcs[i] = (function(id){
+    return function() {
+      return id
+    }
+  }(i))
+}
+
+for(var j = 0 ; j < funcs.length ; j++) {
+  console.log(funcs[j]());
+}
+```
+즉시 실행 함수는 전역 변수 i에 할당되어 있는 값을 인수로 전달받아 매개변수 id에 할당한 후 중첩 함수를 반환하고 종료합니다. 즉시 실행 함수가 반환한 함수는 funcs 배열에 순차적으로 저장됩니다.
+
+이때 즉시 실행 함수의 매개변수 id는 즉시 실행 함수가 반환한 중첩 함수의 상위 스코프에 존재합니다. 즉시 실행 함수가 반환한 중첩 함수는 상위 스코프를 기억하는 클로저입니다.