📚 클로저

📕 클로저란?

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

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다

일반적으로 어떤 함수가 자신의 내부가 아닌 외부에서 선언된 번수에 접근하는 것을 뜻한다.

📖 렉시컬 스코프

함수를 어디에 선언하였는지에 따라 상위 스코프가 결정되는 것

// 전역 스코프 a
var x = 1;

function foo() {
    var x = 10;
    bar();
}

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

foo(); // 1
bar(); // 1

위와 같은 상황에서 bar 함수에서 참조하는 x 변수는 bar 함수의 상위 스코프가 무엇인지에 따라 결정된다.
따라서, 상위 스코프가 무엇인지 알려면 bar 함수가 어디에 선언되었는지 봐야되는데,
위 코드에서는 bar 함수가 전역에 선언되었으므로 상위 스코프는 전역 스코프가 된다.

---

📕 클로저

// 전역 변수 a
const a = 1;

function out() {
    // 지역 변수 a
    const a = 2;

    function in() {
        console.log(a);
    }

    return sec;
}

const fnc = out();
fnc(); // 2

함수 내부의 변수들은 해당 함수를 모두 실행하면 사라진다.

fnc에서 out 함수를 실행하고 해당 함수가 가지고 있던 내용은 모두 사라진다.

하지만 fnc()를 실행했을 때, a는 1이 아닌 2를 가진다.

이렇게 동작하는 이유는 클로저와 관련이 있다.

다음은 버튼을 누르면 숫자가 올라가는 코드이다.

const click = (function () {
    let count = 0;
    function changeNum(num) {
        count += num;
    }
    return {
        increase() {
            changeNum(1);
        },
        val() {
            return count;
        },
    };
})();

console.log(click.val()); // 0
click.increase();
console.log(click.val()); // 1
click.increase();
console.log(click.val()); // 2

함수를 한 번씩 따로 실행하는데 결과는 0이 반복되지 않고 0 -> 1 -> 2 처럼 값이 공유되며 하나씩 증가한다.

이러한 이유는 클로저의 정의 처럼 중첩 함수는 외부 함수의 변수를 참조 할 수 있기 때문에

click 함수에서 만들어진 중첩 함수들(increase(), val())이 모두 click 함수의 변수인 count를 참조 할 수 있다.

---

📕 클로저의 장점

1. 데이터를 보존할 수 있다.
   • 클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
   • 클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다.
     
     
2. 정보의 접근 제한(캡슐화)
   • ‘클로저 모듈 패턴’을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다.
     
     
3. 모듈화에 유리
   • 클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다.

---

📕 참조

https://hanamon.kr/javascript-%ED%81%B4%EB%A1%9C%EC%A0%80/
https://poiemaweb.com/js-closure
https://velog.io/@chojs28/%EB%A0%89%EC%8B%9C%EC%BB%AC-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%BB%A4%EB%A7%81

---