개요

사실상 면접을 대비한 공부라고 할수도 있고

일상생활에 있다보니 그러려니 하고 쓰다가 명칭을 알게된 경우였는데

이번 기회에 클로저에 대해 알기쉽게 이해해보고자 작성하게 되었습니다.

클로저란?

쉽게 얘기하면 클로저란 함수 자체에 독자적인 변수가 존재하고 이걸 콜백함수로 제어가 가능해야 하며 이 함수를 변수에 담아 호출해야 합니다,

스코프(변수의 범위)가 함수와 그 함수가 선언될 당시의 스코프를 기억하는 구조로,

이를 통해 함수가 외부 스코프의 변수에 접근할 수 있도록 해줍니다.

조건은 뭘까?

1.내부 함수가 존재해야 합니다.

2.이 내부 함수가 외부 변수에 접근하고 있어야 합니다.

3.이 내부 함수가 반환되어 외부에서 호출될 수 있어야 합니다.

특성은 뭐가 있을까?

변수 접근: 클로저를 통해 내부 함수는 외부 함수의 변수를 계속해서 참조할 수 있어서 이로 인해 외부 함수가 실행된 후에도 변수의 값을 사용할 수 있게 됩니다.

정보 은닉: 클로저를 사용하면 특정 변수를 외부에서 직접 접근하지 못하도록 숨길 수 있어서 이렇게 하면 데이터의 캡슐화가 이루어지고, 해당 데이터에 대한 제어가 가능해집니다.

상태 유지: 클로저를 통해 생성된 내부 함수는 외부 변수의 상태를 기억하고, 이 상태를 변화시킬 수 있어서 그래서 특정 기능을 구현할 때 유용하게 사용됩니다.

예시

클로저를 생성하는법

const counter = makeCounter();

클로저의 핵심은 함수를 호출했을때 그 결과가 콜백함수여야 한다는 것입니다.

그래야 함수 속 외부 변수를 이용해 콜백함수로 그 외부변수에 값을 변화 시킬 수 있겠죠?

​쉬운 예제

const makeCounter = () => {
    let like = 0; // 외부 변수

    return () => { // 콜백 함수 = 클로저
        return like += 1;
    };
};

// 클로저 생성
const counter = makeCounter();
ㅊ
console.log(counter()); // like 변수의 값 반환 1
console.log(counter()); // like 변수의 값 반환 2

console.log로 makeCounter가 호출될때마다 like += 1 를 반환해주고 있기 때문에,

해당 변수의 반환된 값이 counter 상수에 저장되어 사용되어집니다.

비스무리한 다른 예제

function makeCounter() {
    let count = 0; // 외부 변수

    return function() {
        count += 1; // 외부 변수를 변경
        return count; // 변경된 외부 변수를 반환
    };
}

const counter = makeCounter(); // 클로저 생성
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

makeCounter 함수에는 독자적인 count라는 변수가 있고

그 외부 변수를 제어 하고 반환하는 콜백함수를 리턴하고 있으며

makeCounter 함수를 counter라는 상수에 담아

console.log로 호출해 사용하고 있습니다.

클로저가 아닌 경우

다음과 같은 경우는 클로저가 아닙니다.

let count = 0;

const increment = () => {
    count += 1; // 외부 변수에 접근하지만, 반환되는 것이 없음
};

increment(); // 단순히 호출만 됨

단순히 외부 변수를 접근해 변화시키고만 있지

increment함수 자체가 변수를 기억하고 반환되는것이 아니기 때문에 클로저라 할 수 없습니다.