클로저에 대한 정의를 설명해주시고, 사용하는 이유와 리액트에서의 용례를 얘기해주세요.

클로저란 외부 함수보다 중첩함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있는데 이러한 중첩 함수를 클로저라고 한다.

자바스크립트의 모든 함수는 상위 스코프를 기억하므로 이론적으로 모든 함수는 클로저 이지만 다음과 같이 상위 스코프의 어떤 식별자도 참조하지 않는 일반적인 함수의 경우에는 클로저라고 부르지 않는다.

function foo() {
	const x = 1;
		function bar() { 
		const y = 2;
			debugger;
				console.log(y);
		}
		bar();
	}
	foo();
//bar 함수는 상위 스코프의 식별자를 참조하지 않는다.

리액트에서의 활용법

function Counter() {
  const [count, setCount] = useState(0);

  // 클로저를 이용하여 현재 count 상태를 "기억"하는 increment 함수
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increase</button>
    </div>
  );
}

리액트에서 컴포넌트를 함수로 만드는데 컴포넌트에서 state의 값을 변경하는 함수를 다룰 경우 이 함수를 클로저라고 할 수 있다.

실행 컨텍스트와 클로저의 연관성을 설명해주세요.

클로저는 자신이 선언될 당시의 렉시컬 환경을 기억한다. 이 렉시컬 환경은 클로저가 생성될 때 실행 컨텍스트의 일부이다. 따라서 클로저는 자신이 생성될 때의 컨텍스트에 속한 변수들에 대한 참조를 유지할 수 있다.

This에 대한 정의와 필요한 이유에 대해 얘기해주세요.

메서드가 자신이 속한 객체의 프로퍼티를 참조하기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 하지만 자신이 속한 객체를 재귀적으로 참조하는 방식은 일반적이지 않고 바람지하지도 않다. 또한 생성자 함수 방식으로 인스턴스를 생성할 경우 생성자 함수를 정의하는 시점에선 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. 따라서 자바스크립트에서는 this라는 특별한 식별자를 사용한다.

this는 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해서 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

자바스크립트 엔진에서 소스코드를 처리하는 방식에 대해 설명해주시고, 실행 컨텍스트의 역할에 대해 얘기해주세요.

실행컨텍스트는 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘이다. 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.

처리방식

자바스크립트에서 모든 소스코드는 평가와 실행의 두 과정으로 나누어서 처리된다.

평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다.

평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행되는데 소스코드 실행에 필요한 정보, 즉 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한 후 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다.

할당문을 실행할 경우 변수가 등록된 지를 확인하고 변수가 실행 컨텍스트에 관리된 스코프에 등록되어 있으면 값을 할당 하고 할당 결과를 실행 컨텍스트에 등록하여 관리한다.

실행 컨텍스트는 소스코트를 실행하는 환경을 제공하고 실행 결과를 실제로 관리하는 역할이다. 식별자를 등록하고 관리하는 스코프와 실행 순서를 스택구조를 통해 모든 코드를 실행하고 관리하는 역할이다.

*스택구조 - last in first out

클로저와 캡슐화에 대해 설명해주시고, 둘의 연관성을 얘기해주세요.

캡슐화란 객체의 프로퍼티와 메서드를 하나로 묶어서 정보 은닉을 하게 만들어 주는 것을 말한다.

기본적으로 자바스크립트 객체의 프로퍼티와 메서드는 외부에서 접근이 가능하지만 클로저를 사용하여 외부에서 접근하지 못하도록 할 수 있다.

function createCounter() {
    let count = 0; 
    // `count`는 `createCounter`의 클로저에 의해 캡슐화됩니다.
    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        }
    };
}

const counter = createCounter();
counter.increment(); // 1
counter.decrement(); // 0

이와 같이 클로저를 사용하여 변수의 상태 조작할 경우

count 변수는 createCounter의 로컬 변수로 외부에서 직접 접근할 수 없으며 increment, decrement 메서드로만 접근이 가능하다. 이 두 메서드는 클로저를 통해 count 변수를 기억한다. 이처럼 클로저를 사용하여 정보를 캡슐화하여 데이터를 보호할 수 있다.