JavaScript가 실행 후에도 함수 범위를 유지한다는 사실을 알고 계셨습니까?

JavaScript에서 클로저는 내부 함수가 외부 함수의 변수에 액세스할 수 있음을 의미합니다. 이는 외부 함수의 실행이 완료된 경우에도 적용됩니다.

JavaScript에서 일반 함수가 작동하는 방식

JavaScript에서 일반 함수가 어떻게 작동하는지 간단히 살펴보겠습니다.

JavaScript 함수는 새 범위를 만듭니다. 해당 범위 내에 정의된 변수는 외부에서 액세스할 수 없습니다.

다음은 예제 함수입니다.

function hello() {
  const word = "Hello";
  console.log(word);
}
hello();

Hello

함수 외부에 액세스하려고 hello하면 작동하지 않습니다.

function hello() {
  const word = "Hello";
}
console.log(word);

Uncaught ReferenceError: word is not defined

JavaScript의 클로저는 외부에 있는 함수의 변수에 접근하는 것을 가능하게 합니다. 함수를 실행할 때마다 후드 아래에 클로저가 생성됩니다.

클로저를 사용하면 내부 함수에서 외부 함수의 범위에 액세스할 수 있습니다.

예를 들어, 외부 함수에 내부 함수가 있는 이 스크립트의 동작을 조사해 보겠습니다.

• 함수 는 함수를 outer()반환합니다 inner(). inner()즉, 함수를 변수에 저장할 수 있습니다 .

const greet = outer()

greet()

Hello world

function inner() {
     const b = "World"; 
     console.log(a+b);
}

outer()함수를 다시 살펴보겠습니다 .

• inner()함수는 라는 함수 내부에 있다는 것을 자동으로 인식 합니다 outer(). outer()따라서 나중에 사용하기 위해 함수에 속한 변수를 "저장"합니다 . 이것이 greet()여전히 값에 액세스할 수 있는 이유 a입니다.

폐쇄의 실제 예

예를 들어 클릭 수를 추적하기 위해 순진한 카운터를 설정해 보겠습니다.

var counter = 0;
function increment() {
  counter++;
}

신뢰할 수 있는 카운터를 구축하려면 increment()코드의 다른 부분이 counter변수를 엉망으로 만들 수 없도록 함수를 구성해야 합니다.

여기서 클로저가 유용합니다. 함수 내부에 함수를 만들어 카운터를 다시 구현해 보겠습니다.

이 코드 outer() inner()는 앞에서 본 기능 콤보와 같은 방식으로 작동합니다. JavaScript의 클로저 특성을 활용합니다.

• createCounter()는 외부 기능입니다. counter변수를 설정하고 0내부 함수를 반환합니다 increment().
• increment()함수는 에 값을 추가하는 역할을 합니다 counter.
• 함수 는 를 호출한 후에도 increment()의 변수에 액세스할 수 있습니다 . 이것은 JavaScript의 클로저 특성 때문입니다.createCounter() createCounter()

• 먼저 createCounter()카운터를 설정하기 위해 전화를 겁니다.

let add = createCounter();

add();
add();
add();

1
2
3

읽어 주셔서 감사합니다. 도움이 되셨기를 바랍니다.

또한 읽기

전문가처럼 코딩하기 위한 20가지 JavaScript 스니펫

참고문헌

plainenglish.io 에서 더 많은 콘텐츠