마지막으로 전문가와 같은 Javascript 클로저 이해

고급 개념 중 하나인 클로저를 자세히 살펴봄으로써 JavaScript 코드가 작동하고 실행되는 방식을 더 잘 이해할 수 있는 짧은 가이드입니다.

Mozilla Developer Network(MDN)에 따르면 "클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다."단순화하면 다른 함수 내부의 함수가 외부(부모) 함수의 변수에 액세스할 수 있음을 의미합니다.

클로저를 더 잘 이해하려면 범위와 해당 실행 컨텍스트를 살펴보십시오.

다음은 간단한 코드 스니펫입니다.

**var hello = "Hello";**

**function sayHelloWorld() {
var world = "World";
        function wish() {
                var year = "2021";
                console.log(hello + " " + world + " "+ year);
}
wish();
}
sayHelloWorld();**

이 코드의 실행 컨텍스트는 다음과 같습니다.



(Nimisha Mukherjee, CC BY-SA 4.0 )

클로저는 함수가 생성될 때마다(함수 생성 시점에) 생성됩니다. 모든 클로저에는 세 가지 범위가 있습니다.

로컬 범위(자체 범위)

외부 기능 범위

전역 범위

클로저를 보여주기 위해 위의 코드를 약간 수정하겠습니다.

**var hello = "Hello";**

**var sayHelloWorld = function() {
var world = "World";
        function wish() {
                var year = "2021";
                console.log(hello + " " + world + " "+ year);
}
return wish;
}
var callFunc = sayHelloWorld();
callFunc();**

내부 함수 wish()는 실행되기 전에 외부 함수에서 반환됩니다. 이는 JavaScript의 함수가 클로저를 형성하기 때문에 발생합니다.

sayHelloWorld가 실행될 때 callFunc가 함수 wish에 대한 참조를 보유합니다

.

wish는 변수 world가 존재하는 주변(어휘적) 환경에 대한 참조를 유지합니다.

개인 변수 및 메소드

기본적으로 JavaScript는 전용 변수 및 메서드 생성을 지원하지 않습니다. 클로저의 일반적이고 실용적인 용도는 프라이빗 변수 및 메서드를 에뮬레이트하고 데이터 프라이버시를 허용하는 것입니다. 클로저 범위 내에서 정의된 메서드는 권한이 있습니다.

이 코드 스니펫은 JavaScript에서 클로저가 일반적으로 작성되고 사용되는 방법을 캡처합니다.

**var resourceRecord = function(myName, myAddress) {
 var resourceName = myName;
 var resourceAddress = myAddress;
 var accessRight = "HR";
 return {
   changeName: function(updateName, privilege) {
     *//only HR can change the name*
     if(privilege === accessRight ) {
       resourceName = updateName;
       return true;
     } else {
       return false;
     }
   },  
   changeAddress: function(newAddress) {
     *//any associate can change the address*
     resourceAddress = newAddress;          
   },  
   showResourceDetail: function() {
     console.log ("Name:" + resourceName + " ; Address:" + resourceAddress);
   }
 }
}
*//Create first record*
var resourceRecord1 = resourceRecord("Perry","Office");
*//Create second record*
var resourceRecord2 = resourceRecord("Emma","Office");
*//Change the address on the first record*
resourceRecord1.changeAddress("Home");
resourceRecord1.changeName("Perry Berry", "Associate"); *//Output is false as only an HR can change the name*
resourceRecord2.changeName("Emma Freeman", "HR"); *//Output is true as HR changes the name*
resourceRecord1.showResourceDetail(); *//Output - Name:Perry ; Address:Home*
resourceRecord2.showResourceDetail(); *//Output - Name:Emma Freeman ; Address:Office***

리소스 레코드(resourceRecord1 및 resourceRecord2)는 서로 독립적입니다. 각 클로저는 자체 클로저를 통해 서로 다른 버전의 resourceName 및 resourceAddress 변수를 참조합니다. 개인 변수를 처리하는 방법에 특정 규칙을 적용할 수도 있습니다. resourceName을 수정할 수 있는 사람에 대한 검사를 추가했습니다.

클로저 사용

클로저를 이해하는 것은 변수와 함수가 서로 어떻게 관련되어 있고 JavaScript 코드가 작동하고 실행되는 방식에 대한 더 깊은 지식을 가능하게 하므로 중요합니다.



책 받기: Up to Speed with Javascript in 59 minutes

Javascript 학습을 위한 추가 리소스:

The Complete JavaScript Course 2021: From Zero to Expert

Javascript Tutorial and Projects Course

참조 사이트: https://opensource.com/article/21/2/javascript-closures