JavaScript 클로저의 마법: 명확하고 쉬운 가이드

JavaScript의 클로저란 무엇입니까?

수업이 끝난 후 가지고 다니는 배낭과 같은 폐쇄 장치를 생각해 보세요. 배낭 안에는 수업시간에 배운 모든 노트와 자료가 들어있습니다. 수업이 끝난 후에도 필요할 때마다 배낭에 있는 모든 것을 사용할 수 있습니다. 마찬가지로, 클로저를 사용하면 외부 함수 실행이 완료되고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 후에도 함수가 외부 범위에서 변수 및 매개변수에 계속 액세스할 수 있습니다.

위의 설명은 클로저를 설명하는 일반적인 방법이지만 JavaScript를 처음 접하는 사람에게도 초보자에게 친숙한가요? 설마. 나 역시 처음 접했을 때 꽤 혼란스러웠다. 이것이 바로 클로저를 누구나 이해할 수 있도록 최대한 간단하게 만들기 위해 이 글을 쓴 이유입니다. 주제에 대해 더 자세히 알아보기 전에 기본 사항부터 살펴보겠습니다.

JavaScript의 범위 이해

클로저가 무엇인지 이해하려면 JavaScript의 범위를 간략하게 살펴봐야 합니다. 범위는 코드의 여러 부분에 있는 변수와 함수의 접근성을 나타냅니다. 프로그램 내에서 특정 변수나 기능에 액세스할 수 있는 위치를 결정합니다.

범위에는 전역 범위와 로컬 범위라는 두 가지 기본 유형이 있습니다. 전역 범위에 선언된 변수는 함수나 블록 외부에 존재하므로 전체 코드에서 액세스할 수 있습니다. 대조적으로, 함수나 블록 내에서와 같이 로컬 범위에서 선언된 변수는 해당 특정 함수나 블록 내에서만 액세스할 수 있습니다. 아래 코드는 이러한 설명을 보여줍니다.

// GLOBAL SCOPE
let myName = "John Doe";

function globalScope() {
  console.log(myName);
}
globalScope(); //Output John Doe
console.log(myName); // Accessible here as well

// LOCAL SCOPE
function localScope() {
  let age = 30;
  console.log(age);
}
localScope(); //Output 30
console.log(age); //Output age is not defined (Not Accessible)

그러나 JavaScript는 클로저 작동 방식을 이해하는 데 중요한 어휘 범위 지정이라는 개념을 사용합니다. 어휘 범위 지정은 변수의 접근성이 작성 당시의 코드 구조에 따라 결정된다는 것을 의미합니다. 간단히 말해서 "변수가 함수 내부에 선언되면 해당 함수와 그 안에 있는 모든 항목만 해당 변수에 액세스할 수 있습니다."라고 말하는 것과 같습니다.{https://javascript.info/closure}.

어휘 범위 지정 및 실행 컨텍스트

이를 더 명확하게 이해하기 위해 JavaScript가 뒤에서 어떻게 작동하는지 살펴보겠습니다. JavaScript는 실행 중인 코드를 보관하는 컨테이너와 같은 실행 컨텍스트라는 것을 사용합니다. 변수, 함수 및 현재 실행 중인 코드 부분을 추적합니다. 스크립트가 시작되면 GEC(Global Execution Context)가 생성됩니다. 프로그램에는 전역 실행 컨텍스트가 하나만 있다는 점에 유의하는 것이 중요합니다.

위의 다이어그램은 프로그램이 시작될 때 전역 실행 컨텍스트를 나타냅니다. 생성(또는 메모리) 단계와 실행(또는 코드) 단계의 두 단계로 구성됩니다. 생성 단계에서는 변수와 함수가 메모리에 저장됩니다. 변수는 정의되지 않은 상태로 초기화되고 함수는 완전히 저장됩니다. 실행 단계에서 JavaScript는 코드를 한 줄씩 실행하여 변수에 값을 할당하고 함수를 실행합니다.

이제 JavaScript가 실행 컨텍스트와 어휘 범위 지정을 처리하는 방법을 이해했으므로 이것이 클로저와 직접적으로 어떻게 연결되는지 확인할 수 있습니다.

클로저 작동 방식: 예

JavaScript의 클로저는 외부 함수의 실행이 완료된 후에도 내부 함수가 외부 함수 범위의 변수에 대한 액세스를 유지할 때 생성됩니다. 이는 내부 함수가 자신이 정의된 어휘 환경을 유지하여 외부 범위의 변수를 "기억"하고 사용할 수 있기 때문에 가능합니다.

// GLOBAL SCOPE
let myName = "John Doe";

function globalScope() {
  console.log(myName);
}
globalScope(); //Output John Doe
console.log(myName); // Accessible here as well

// LOCAL SCOPE
function localScope() {
  let age = 30;
  console.log(age);
}
localScope(); //Output 30
console.log(age); //Output age is not defined (Not Accessible)

위 코드의 작동 방식에 대한 안내는 다음과 같습니다. 함수를 호출할 때마다 JavaScript 엔진은 해당 함수에 특정한 FEC(함수 실행 컨텍스트)를 생성하며, 이는 GEC(Global Execution Context) 내에 생성됩니다. GEC와 달리 프로그램에는 여러 FEC가 있을 수 있습니다. 각 FEC는 자체 생성 및 실행 단계를 거치며 자체 변수 및 어휘 환경을 갖습니다. 어휘 환경을 사용하면 함수가 외부 범위에서 변수에 액세스할 수 있습니다.

outerFunction이 호출되면 새로운 FEC가 생성됩니다. OuterFunction 내부에서는 어휘 범위 지정으로 인해 externalVariable에 액세스할 수 있는 innerFunction을 정의합니다. OuterFunction이 반환된 후 OuterFunction의 실행 컨텍스트는 호출 스택에서 제거되지만 innerFunction은 클로저로 인해 externalVariable에 대한 액세스를 유지합니다. 따라서 나중에 closureExample()을 호출하면 externalFunction이 완료되더라도 여전히 externalVariable을 기록할 수 있습니다.

클로저의 실제 적용

다음 예를 살펴보겠습니다.

Let’s look at the example below:

function outerFunction() {
    let outerVariable = 'I am John Doe';

    return function innerFunction() {
        console.log(outerVariable);
    };
}

const closureExample = outerFunction();
closureExample();  // Outputs: "I am John Doe"

이 코드의 출력은 무엇이라고 생각하시나요? 많은 분들이 5를 추측하셨겠지만, 그게 정말 정확한 결과인가요? 사실은 그렇지 않습니다. 그 이유는 다음과 같습니다. y() 함수는 초기 값이 아닌 변수 a를 참조합니다. z()가 호출되면 내부 함수를 반환하기 전에 수행된 업데이트로 인해 a의 현재 값인 50을 기록합니다. 또 다른 예를 살펴보겠습니다.

function x(){
      let a = 5
     function y(){
         console.log(a)
      }
      a = 50
      return y;
    }
    let z = x();
    console.log(z)
    z();

코드는 클로저의 힘을 보여줍니다. 가장 안쪽 함수인 z()에서도 상위 범위의 변수에 계속 액세스할 수 있습니다. 브라우저를 검사하고 소스 탭을 확인하면 x와 y 모두에 클로저가 형성되어 z()가 상위 컨텍스트에서 a와 b에 액세스할 수 있음을 알 수 있습니다.

클로저 사용의 장점

클로저는 JavaScript에서 특히 더 유연하고 모듈식이며 유지 관리가 가능한 코드를 작성할 때 여러 가지 이점을 제공합니다. 다음은 주요 장점 중 일부입니다:

1. 콜백 함수: 클로저는 콜백, 이벤트 리스너 및 약속과 같은 비동기 프로그래밍을 처리할 때 매우 강력합니다. 이를 통해 외부 함수가 완료된 후에도 콜백 함수가 외부 함수의 변수에 대한 액세스를 유지할 수 있습니다.

// GLOBAL SCOPE
let myName = "John Doe";

function globalScope() {
  console.log(myName);
}
globalScope(); //Output John Doe
console.log(myName); // Accessible here as well

// LOCAL SCOPE
function localScope() {
  let age = 30;
  console.log(age);
}
localScope(); //Output 30
console.log(age); //Output age is not defined (Not Accessible)

2. 모듈성 및 유지 관리 가능성: 클로저는 개발자가 더 작고 재사용 가능한 코드 덩어리를 작성할 수 있도록 하여 모듈성을 장려합니다. 클로저는 함수 호출 간에 변수를 보존할 수 있으므로 반복적인 논리의 필요성을 줄이고 유지 관리성을 향상시킵니다.

3. 전역 변수 방지: 클로저는 전역 변수의 필요성을 줄여 잠재적인 이름 지정 충돌을 방지하고 전역 네임스페이스를 깨끗하게 유지하는 데 도움이 됩니다. 클로저를 사용하면 전역이 아닌 함수 범위에 데이터를 저장할 수 있습니다.

결론

클로저는 함수가 실행된 후에도 외부 범위의 변수를 기억하고 액세스할 수 있도록 하여 함수의 기능을 확장하는 JavaScript의 강력한 개념입니다. 이 기능은 특히 비동기 작업, 콜백 및 이벤트 리스너를 처리할 때 더욱 모듈화되고 유연하며 효율적인 코드를 만드는 데 중요한 역할을 합니다. 클로저가 처음에는 복잡해 보일 수 있지만 클로저를 마스터하면 더욱 정교하고 최적화된 JavaScript를 작성할 수 있습니다. 계속해서 연습해 보면 클로저가 더 깔끔하고 유지 관리하기 쉬운 애플리케이션을 작성하는 데 어떻게 도움이 되는지 알게 될 것입니다. 계속 실험해 보면 곧 클로저가 JavaScript 도구 상자의 자연스러운 일부가 될 것입니다.

위 내용은 JavaScript 클로저의 마법: 명확하고 쉬운 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!