JavaScript에서 클로저는 무엇입니까?

JavaScript 클로저에서 Zero to Hero로 가자. 힘든 일이 여기 있습니다! 계속하자...

Closures는 게임의 보스입니다. 그러나 범위 체인, 어휘 환경 및 JavaScript가 정확히 실행되는 방식과 같은 것을 먼저 이해하지 않고는 그것이 무엇인지 이해하는 것조차 불가능합니다. 당신은 그것들을 사용하지만 그것들이 클로저라고 불리는지도 모릅니다.

'클로저'는 도구가 아니라 이해하게 된다면 저처럼 언어를 훨씬 다른 방식으로 보게 될 개념입니다 😐. 나는 당신에게 깊은 곳으로 올바른 길을 던지지 않을 것입니다. 우리는 먼저 다른 필요한 개념(의존성)을 살펴봄으로써 폐쇄가 터질 수 있도록 당신의 마음을 준비하고 있습니다.

범위

범위는 런타임 중에 코드에서 변수에 액세스할 수 있는 위치입니다.

let a = 5; 
console.log(a); //5
// The above code declared in the global scope. Variables declared in the same scope have access to one another. 
const bla = () => {
    // each time you create a new function, you create anew scope called function scope. 
    let bb = 6; 
    console.log(a); // 5 (function scope has access to the global scope)
}
console.log(bb) // error (global scope does not have access to the function scope)

실행 컨텍스트

실행 콘테스트는 현재 코드가 실행되는 범위입니다. 프로그램을 시작하면 먼저 전역 실행 컨텍스트가 있습니다. 함수가 호출되면 JavaScript는 새로운 실행 컨텍스트, 즉 이 실행 컨텍스트에 로컬인 고유한 변수 집합이 있는 로컬 실행 컨텍스트를 만듭니다.

'return' 문이나 닫는 대괄호 '}'를 만나면 함수는 반환된 값(또는 '}'인 경우 정의되지 않음)을 호출된 대회에 전달합니다. 함수의 로컬 컨텍스트가 삭제되어(모든 변수 포함) 더 이상 사용할 수 없게 됩니다.

어휘 범위

예:

const bla = () => {
    let a = 48; 
    const gg = () => {
        console.log(a); 
    }
    gg();
}
bla() // 48

여기서 중요한 것은 함수 gg가 a에 액세스할 수 있다는 것입니다. 그러나 a는 gg의 호출 컨텍스트에 있습니다(gg가 호출되는 범위). 중요 -> 함수는 호출 컨텍스트에 정의된 변수에 액세스할 수 있습니다. 이 현상의 공식 명칭은 "어휘 범위"입니다.

함수 반환 함수

const createAdder = () => {
    const addNumber = (a, b) => {
        let ret = a + b 
        return ret
    }
    return addNumber
}
let adder = createAdder()
let sum = adder(3, 2)   // 5

여기서 이해해야 할 중요한 점은 함수 정의가 변수에 저장될 수 있고 호출될 때까지 프로그램에 보이지 않는다는 것입니다. 이 작업이 완료되면 로컬 실행 컨텍스트가 임시로 생성됩니다. 이 컨텍스트는 기능이 완료되면 종료됩니다.

자바스크립트 클로저

모든 dependencies 선언 및 설명, 우리 모두가 기다려온 실제 주제에 대해 알아보겠습니다!

const counterNew = () => {
    let counter = 0; 
    const func = () => {
        counter = counter = 1; 
        return counter; 
    }
    return func; 
}
let incr = counterNew(); // returns a function 
incr() // 1
incr() // 2
// Ah!! How it get incremented? 

대답은 간단합니다. 폐쇄입니다.

폐쇄란 무엇입니까?

"A closure is a function which has reference to it's the lexical environment. This environment consists of any local variables that were in-scope at the time the closure was created!' - MDN Docs

counterNew 기능으로 돌아갑니다. 그것을 이해하려고 노력하고, 모두 다시 읽고, 조사하십시오. 폐쇄는 "야호, 내가 해냈어!"와 같은 것이 아닙니다. 고급 주제로 간주되므로 시간을 갖고(내가 생각하는 대로) 생각해 보십시오.

당신이 알게 될 것은 당신이 가지고 있는 규칙에 의해 이 카운터 변수가 기억되고 매번 증가할 방법이 없다는 것입니다. 내가 클로저라고 부르는 퍼즐의 빠진 부분.


🙂읽어주셔서 감사합니다 | 즐거운 코딩하세요😎

이번 주에 내가 게시한 놀라운 기사와 몇 가지 제안 또는 발표에 대한 주간 뉴스레터를 받으세요. Here에서 구독