실행 컨텍스트와 클로저

디바운스 코드 이해 => 클로저 개념 필요 => 실행 컨텍스트 개념 필요
이런 흐름으로 여기까지 왔다...

실행 컨텍스트

• 코드 실행에 필요한 여러가지 정보(변수, 함수, scope, this)를 형상화하고 구분하기 위해 물리적 객체의 형태로 관리하는 것
• 코드를 실행하면 실행 컨텍스트 스택이 생성되고 소멸되는데
  초기) 빌드인 객체, DOM, BOM
  전역 코드로 진입하면) 전역 실행 컨텍스트가 생성되어 스택에 쌓이고
  특정 함수를 호출하면) 해당 함수의 실행 컨텍스트가 생성되어 쌓인다.
• 해당 함수의 실행이 끝나면 실행 컨텍스트는 소멸하고, 직전의 실행 컨텍스트로 이동

클로저

const makeFunc = () => {
    let name = "기쁨이";
    const displayName = () => {
        console.log(name);
    };
    return displayName;
};

const myFunc = makeFunc(); // myFunc 변수에 [Function: displayName] 저장

• makeFunc()가 호출된 결과로 displayName 함수가 리턴되어 myFunc 변수에 저장된다.

• 그리고 makeFunc의 실행 컨텍스트는 사라질 것이다.

• 근데 displayName 함수 내에서 makeFunc의 실행 컨텍스트에 존재할 name 변수에 어떻게 접근?

• makeFunc의 실행 컨텍스트는 소멸되지만, makeFunc의 실행 컨텍스트의 AO (활성 객체)는 유효

• 클로저 : 자신이 선언됐을 때의 환경을 기억하여, 밖에서 호출되어도 그 환경에 접근할 수 있는 함수

• 언제 사용? 현재 상태를 기억해서 계속 갱신해야하는 경우

• 전역 변수로도 가능한데 왜 사용?
  누구든지 접근할 수 있는 전역변수로 선언하면 의도치 않은 값 변경이 이루어질 위험이 있음 (즉 프로그램의 안정성을 높이기 위해)

참고 사이트 : https://poiemaweb.com/js-closure