수정하기 - 자바스크립트에서 함수가 호출될 때의 스코프 체인(Scope Chain)은 어떻게 작동하나요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

<a href='https://sangseek.com/sangseeks/자바/ko'>자바</a>스크립트에서 함수가 호출될 때의 스코프 체인(Scope Chain)은 변수와 함수의 접근성을 결정하는 중요한 개념입니다. 스코프 체인은 함수가 실행될 때 어떤 변수에 접근할 수 있는지를 정의합니다. 이를 이해하기 위해서는 먼저 스코프(Scope)와 <a href='https://sangseek.com/sangseeks/클로저/ko'>클로저</a>(Closure)의 개념을 살펴보아야 합니다.           1. 스코프(Scope)    스코프는 변수의 유효 범위를 정의합니다. 자바스크립트에는 크게 두 가지 종류의 스코프가 있습니다:    -   전역 스코프(Global Scope)  : 프로그램 전체에서 접근 가능한 변수의 범위입니다. 전역 스코프에 정의된 변수는 모든 함수와 블록에서 접근할 수 있습니다.      -   <a href='https://sangseek.com/sangseeks/지역 스코프/ko'>지역 스코프</a>(Local Scope)  : 함수 내부에서 정의된 변수의 범위입니다. 함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다. 자바스크립트에서는 <a href='https://sangseek.com/sangseeks/함수 스코프/ko'>함수 스코프</a>(function scope)와 <a href='https://sangseek.com/sangseeks/블록 스코프/ko'>블록 스코프</a>(block scope, `let`과 `const`를 사용하여 정의된 변수)로 나뉩니다.           2. 스코프 체인(Scope Chain)    스코프 체인은 특정 함수가 호출될 때 그 함수가 접근할 수 있는 변수의 목록을 결정하는 메커니즘입니다. 함수가 호출될 때, 자바스크립트는 해당 함수의 스코프와 그 함수가 정의된 위치의 스코프를 차례로 탐색합니다. 이 과정을 통해 변수에 접근하게 됩니다.             스코프 체인의 작동 방식    1.   함수 호출  : 함수가 호출되면, 자바스크립트는 해당 함수의 실행 컨텍스트를 생성합니다. 이 실행 컨텍스트에는 해당 함수의 스코프가 포함됩니다.    2.   변수 탐색  : 함수 내에서 변수를 <a href='https://sangseek.com/sangseeks/참조/ko'>참조</a>할 때, 자바스크립트는 먼저 해당 함수의 스코프에서 변수를 찾습니다. 만약 변수가 존재하지 않으면, 자바스크립트는 외부 스코프(즉, 함수를 정의한 위치의 스코프)로 이동하여 변수를 찾습니다. 이 과정을 계속해서 상위 스코프를 탐색하며 변수를 찾습니다.    3.   전역 스코프  : 모든 스코프 체인의 최상위에는 전역 스코프가 있습니다. 만약 상위 스코프에서도 변수를 찾지 못하면, 전역 스코프에서 변수를 찾게 됩니다. 전역 스코프에서도 변수를 찾지 못하면 `undefined`가 반환됩니다.           3. 예제    아래의 예제를 통해 스코프 체인의 작동 방식을 이해해보겠습니다.    ```javascript  let globalVar = "I am a global variable";    function outerFunction() {      let outerVar = "I am an outer variable";        function innerFunction() {          let innerVar = "I am an inner variable";          console.log(innerVar); // "I am an inner variable"          console.log(outerVar); // "I am an outer variable"          console.log(globalVar); // "I am a global variable"      }        innerFunction();  }    outerFunction();  ```    위 코드에서 `innerFunction`은 `innerVar`, `outerVar`, 그리고 `globalVar`에 접근할 수 있습니다. 이는 스코프 체인이 다음과 같이 작동하기 때문입니다:    1. `innerFunction`이 호출되면, 자바스크립트는 먼저 `innerFunction`의 스코프에서 `innerVar`를 찾습니다.  2. `innerVar`가 존재하므로 해당 값을 출력합니다.  3. 다음으로 `outerVar`를 찾기 위해 상위 스코프인 `outerFunction`의 스코프를 탐색합니다. `outerVar`가 존재하므로 해당 값을 출력합니다.  4. 마지막으로 `globalVar`를 찾기 위해 전역 스코프를 탐색합니다. `globalVar`가 존재하므로 해당 값을 출력합니다.           4. 클로저(Closure)    클로저는 함수와 그 함수가 선언된 스코프의 조합입니다. 클로저는 함수가 외부 스코프의 변수를 기억할 수 있게 해줍니다. 클로저를 사용하면, 함수가 호출된 후에도 외부 스코프의 변수에 접근할 수 있습니다.    ```javascript  function makeCounter() {      let count = 0; // private variable        return function() {          count += 1;          return count;      };  }    const counter = makeCounter();  console.log(counter()); // 1  console.log(counter()); // 2  console.log(counter()); // 3  ```    위의 예제에서 `makeCounter` 함수는 `count`라는 변수를 정의하고, 내부 함수(클로저)를 반환합니다. 이 클로저는 `count` 변수에 접근할 수 있으며, `makeCounter`가 호출된 후에도 `count`의 상태를 유지합니다.           결론    자바스크립트에서 함수가 호출될 때의 스코프 체인은 변수에 대한 접근성을 결정하는 중요한 메커니즘입니다. 스코프 체인을 이해하면 자바스크립트의 변수 유효 범위와 클로저의 작동 방식을 더 잘 이해할 수 있습니다. 이러한 개념들은 자바스크립트의 비동기 프로그래밍, 모듈화, 그리고 상태 관리에 있어서 매우 중요한 역할을 합니다.