JavaScript에서 클로저를 이해하려는 시도

나는 주제에 대해 이야기하거나 글을 쓸 때 더 많은 이해를 얻습니다... 자바스크립트에 관심이 없는 와이프를 끔찍하게 여깁니다(그녀는 친절하고 여전히 들을 것입니다)!

폐쇄에 대한 나의 현재 이해를 처리하는 데 도움이 되기를 바랍니다!

글로벌 범위

전역 범위에서 변수가 선언되면 애플리케이션의 모든 부분에서 변수에 액세스할 수 있습니다.

let val = 0;  
val += 1;

console.log(val); // 1

이 데이터는 애플리케이션 전체에 노출됩니다...

클로저를 사용하여 애플리케이션의 나머지 부분에서 데이터를 격리하거나 보호할 수 있습니다.

function() {
  let val = 0;
};  

val += 1;

console.log(val); // ReferenceError: val is not defined

val +=1 더 이상 val을 변경할 수 없습니다.

실행 컨텍스트

함수 내에서 변수를 생성, 변경, 재할당 및/또는 읽을 수 있는 새로운 실행 컨텍스트가 초기화됩니다. 해당 함수에서 무언가가 반환되지 않는 한 해당 함수 실행 컨텍스트와 해당 컨텍스트에만 존재합니다.

완료되면 실행 컨텍스트 내에서 생성된 모든 것이 사라지고 반환된 것만 남습니다.

Clouser를 사용하면 애플리케이션의 특정 부분에서만 액세스할 수 있도록 데이터를 격리하고 보호하여 해당 데이터를 격리할 수 있습니다.

폐쇄

여기에서 클로저 {}로 인해 assignValue 내부의 데이터를 변경할 수 있는 것은 없습니다.

function assignValue() {
  let val = 0;
  return val += 1;
};

let newVal = assignValue();

console.log(newVal);  // 1

newVal에는 assignValue 함수를 호출한 결과가 할당됩니다.

실행 컨텍스트가 완료되면 함수에서 남은 것은 반환된 컨텍스트뿐입니다. 실행 컨텍스트 내의 모든 것이 사라지고 반환된 내용만 newVal에 저장됩니다.

assignValue 내부의 데이터는 나머지 애플리케이션과 격리된 상태로 유지됩니다.

노트val +=1 여전히 ReferenceError가 발생합니다.

상태 유지

애플리케이션의 일부가 해당 데이터와 상호 작용할 수 있도록 하려면 어떻게 해야 할까요?

숫자를 증가시켜 반환하는 대신 실행 컨텍스트 내에 새 함수를 생성하고(여전히 이전과 동일한 작업을 수행함) 새 함수를 대신 반환합니다.

function assignValue() { 
 let val = 0;
  
 function addOne() {
   return val += 1; 
 };

 return addOne;
};

const newVal = assignValue();

console.log(newVal()); // 1
console.log(newVal()); // 2
console.log(newVal()); // 3

addOne 함수는 원래 실행 컨텍스트 내의 변수에 액세스할 수 있었기 때문에 지금은 assignValue의 초기 실행 컨텍스트가 없어도 val을 증가시킬 수 있습니다.

상태를 유지하면서 assignValue 내부의 값을 나머지 애플리케이션과 격리할 수 있습니다.

마지막 생각들

Closures can allow you to prevent other parts of your application from being able to interact with data.

You can use Closures to isolate state from the rest of your application.