[CS/기술면접] 클로저 (Closure)

클로저 (Closure)란 무엇인가요?

 

1. 한마디 정리

클로저는
일반함수와 달리 함수 내부에 선언되는 함수로
함수가 실행될때 외부변수에 접근하기 위한 객체입니다.

이 경우 원래대로라면 소멸되었어야 할 객체들이 메모리상에 남아있기 때문에
클로저를 남발하면 오버플로우가 발생할 수도 있습니다.

따라서 클로저에 대해 정확히 이해하고 필요한곳에 사용해야 합니다.

https://proglish.tistory.com/204

클로저(Closure)란?

https://hanamon.kr/javascript-%ED%81%B4%EB%A1%9C%EC%A0%80/

 

2. 내가 생각한 꼬리질문

1)

클로저는 자바스크립트에서 매우 중요한 개념 중 하나이며, 다양한 상황에서 사용됩니다. 다음은 클로저를 사용하는 간단한 예시들입니다.

자바스크립트에서 이벤트 핸들러 함수를 등록할 때, 클로저를 사용합니다. 이벤트 핸들러 함수 내부에서는 외부 변수나 함수에 접근할 수 있어서 이벤트 발생 시에도 해당 변수나 함수를 사용할 수 있습니다.

코드에서 handleClick 함수는 클로저를 반환합니다. 이 클로저 함수는 외부 변수인 count에 접근할 수 있으며, 클릭할 때마다 count 값을 증가시키고 콘솔에 로그를 출력합니다.

function handleClick() {
  let count = 0;
  return function() {
    count++;
    console.log('Clicked', count, 'times');
  }
}

const button = document.querySelector('button');
button.addEventListener('click', handleClick());

함수를 반환하는 함수를 작성할 때, 클로저를 사용합니다. 반환된 함수는 자신이 생성될 때의 상태를 기억하고 있어서, 이후에 호출될 때 이전에 저장된 값을 사용할 수 있습니다.

코드에서 add 함수는 클로저를 반환합니다. 반환된 클로저 함수는 외부 변수인 x에 접근할 수 있습니다. 이후 add5 변수에 저장된 클로저 함수는 자신이 생성될 때의 x 값(5)을 기억하고 있어서, 이후에 호출될 때마다 x 값과 전달된 y 값을 더해서 반환합니다.

function add(x) {
  return function(y) {
    return x + y;
  }
}

const add5 = add(5);
console.log(add5(3)); // 8
console.log(add5(7)); // 12

캡슐화(encapsulation)를 구현할 때, 클로저를 사용합니다. 클로저를 사용하면 함수 외부에서 변수에 직접 접근하는 것을 막고, 함수 내부에서만 변수에 접근할 수 있게 할 수 있습니다.

코드에서 createCounter 함수는 클로저를 반환합니다. 반환된 클로저는 외부 변수인 count에 접근할 수 있으며, increment, decrement, getCount 메소드를 통해서만 count 값을 조작하거나 조회할 수 있습니다. 이를 통해 count 변수를 캡슐화하고, 외부에서 직접 접근할 수 없도록 보호합니다.

function createCounter() {
  let count = 0;
  return {
    increment() {
      count++;
    },
    decrement() {
      count--;
    },
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
counter.decrement();
console.log(counter.getCount()); // 1

 

2) 사용 예제

https://ts2ree.tistory.com/235

클로저의 활용 사례

 

3) 장점 단점

https://jake-seo-dev.tistory.com/388

클로저 (Closure) 란 무엇인지 설명해주세요.