Scope chain

wonyoung·2024년 3월 31일

Javascript

목록 보기

28/36

JavaScript의 스코프 체인(Scope Chain)은 변수 또는 함수를 참조할 때 JavaScript 엔진이 어떻게 그 식별자의 값을 찾아가는지를 설명하는 메커니즘입니다. 이는 코드의 현재 실행 컨텍스트에서 시작하여, 필요한 식별자(변수, 함수 등)를 찾을 때까지 상위 컨텍스트로 이동하면서 검색하는 과정을 의미합니다.

스코프(Scope)란?

스코프는 코드의 특정 부분에서 식별자(변수, 함수, 객체 등)에 접근할 수 있는 범위를 말합니다. JavaScript에서는 주로 두 가지 유형의 스코프가 있습니다:

전역 스코프(Global Scope): 코드의 모든 부분에서 접근할 수 있는 변수나 함수를 포함합니다.
지역 스코프(Local Scope) 또는 함수 스코프(Function Scope): 특정 함수 내부에서만 접근할 수 있는 변수나 함수를 정의합니다. ES6 이후에는 let과 const를 사용하여 블록 스코프(Block Scope)도 지원합니다.

스코프 체인의 작동 원리

식별자 검색: 코드에서 변수나 함수를 참조하려고 할 때, JavaScript 엔진은 먼저 현재 실행 중인 컨텍스트의 스코프에서 해당 식별자를 검색합니다.
상위 스코프로 이동: 현재 스코프에서 식별자를 찾지 못하면, 스코프 체인을 따라 한 단계 상위의 스코프로 이동하여 검색을 계속합니다. 이 과정은 최상위 스코프(전역 스코프)에 도달하거나 식별자를 찾을 때까지 반복됩니다.
식별자 반환 또는 참조 오류: 식별자를 찾으면 그 값을 반환합니다. 만약 스코프 체인의 최상위까지 검색했는데도 해당 식별자를 찾지 못하면 JavaScript는 참조 오류(ReferenceError)를 발생시킵니다.

예시

var a = '전역';
function outer() {
    var b = '외부';
    function inner() {
        var c = '내부';
        console.log(c);   // '내부' - 현재 스코프에서 찾음
        console.log(b);   // '외부' - 상위 스코프에서 찾음
        console.log(a);   // '전역' - 최상위 스코프에서 찾음
    }
    inner();
}
outer();

이 예시에서 inner 함수는 자신의 지역 스코프에서 c를 찾습니다. b는 현재 스코프에 없으므로 상위 스코프인 outer 함수의 스코프에서 찾습니다. 마찬가지로 a는 outer 함수의 스코프와 inner 함수의 지역 스코프 어디에도 없으므로, 전역 스코프에서 찾습니다.
스코프 체인은 코드의 실행 컨텍스트와 긴밀하게 관련되어 있으며, JavaScript에서 변수와 함수의 접근성을 결정하는 중요한 메커니즘입니다.

Anonymous 함수(익명 함수)와 스코프 체인의 관계는 JavaScript에서 중요한 개념들 중 하나입니다. 익명 함수는 이름이 없는 함수를 말하며, 이는 즉시 실행 함수 표현식(IIFE), 콜백 함수, 이벤트 핸들러 등 다양한 곳에서 활용됩니다. 스코프 체인은 이러한 함수 내부에서 변수나 다른 함수를 찾기 위해 JavaScript 엔진이 따르는 규칙을 말합니다.

익명 함수와 스코프

익명 함수는 주변 스코프(lexical scope)에서 변수를 캡처할 수 있는 클로저를 생성할 수 있습니다. 이를 통해 JavaScript는 함수가 선언된 스코프의 변수에 접근할 수 있도록 합니다. 이는 익명 함수가 어떤 스코프 안에서 선언되었는지에 따라 그 함수가 접근할 수 있는 변수가 결정된다는 것을 의미합니다.

let globalVar = "전역";
function external() {
    let externalVar = "외부";
    
    // 익명 함수
    let internalFunction = function() {
        let internalVar = "내부";
        console.log(globalVar);  // 전역 변수에 접근
        console.log(externalVar); // 외부 함수의 변수에 접근
    };
    
    internalFunction();
}
external();

이 예시에서 익명 함수 internalFunction은 자신이 선언된 스코프(여기서는 external 함수)와 전역 스코프에 있는 변수에 접근할 수 있습니다. 이는 스코프 체인을 통해 가능한 일입니다.

스코프 체인의 중요성

스코프 체인은 함수가 변수를 참조할 때 해당 변수를 찾기 위해 따라가는 "체인"입니다. 이 체인은 현재 실행 중인 컨텍스트에서 시작하여, 필요한 변수나 함수를 찾을 때까지 상위 컨텍스트로 올라갑니다. 이 과정은 최상위 스코프(대부분 전역 스코프)에 도달하거나, 찾고자 하는 식별자를 찾을 때까지 계속됩니다.
익명 함수(또는 어떤 함수라도)가 실행될 때, JavaScript 엔진은 스코프 체인을 사용하여 함수 내부에서 사용된 변수들의 값을 찾습니다. 이는 함수가 자신이 정의된 스코프 내, 또는 상위 스코프 내의 변수에 접근할 수 있도록 해줍니다.
익명 함수는 자신이 생성될 때의 스코프에 대한 참조를 유지합니다. 이는 클로저를 생성하고, 익명 함수가 실행될 때마다 해당 스코프에 있는 변수에 접근할 수 있게 합니다. 따라서, 익명 함수와 스코프 체인은 JavaScript에서 매우 강력한 기능을 제공하며, 함수형 프로그래밍 패턴과 모듈 패턴 등에서 중요한 역할을 합니다.

--
JavaScript에서 "어노니머스(Anonymous)" 함수와 스코프 체인의 관계를 설명하자면, 어노니머스 함수는 이름이 없는 함수를 말합니다. 이러한 함수들은 일반적으로 즉시 실행되거나, 콜백 함수로 사용되어 이벤트 핸들러, 타이머, 프로미스 등에서 활용됩니다. 어노니머스 함수는 스코프 체인에 영향을 미치는데, 이는 함수가 실행되는 컨텍스트에 따라 그 함수 내부에서 접근할 수 있는 변수 범위가 결정되기 때문입니다.

어노니머스 함수와 스코프 체인

어노니머스 함수는 자신이 선언된 위치에 따라 해당 스코프 체인에 포함됩니다. 이는 어노니머스 함수가 스코프 체인을 통해 외부 변수에 접근할 수 있음을 의미합니다. 반면에 함수 내부에서 선언된 변수는 외부 스코프에서 접근할 수 없습니다.

예시: 어노니머스 함수에서의 스코프 체인

var globalVar = "전역";
(function() {
    var localVar = "지역";
    console.log(globalVar); // "전역", 어노니머스 함수가 전역 변수에 접근
    console.log(localVar); // "지역", 어노니머스 함수 내부에서 선언된 지역 변수에 접근
})();
console.log(localVar); // ReferenceError: localVar is not defined

이 예시에서 어노니머스 함수는 즉시 실행 함수 표현식(IIFE)으로 사용되어 있습니다. 함수 내부에서는 전역 변수 globalVar에 접근할 수 있지만, localVar는 함수 내부에서만 접근 가능합니다. 함수 외부에서 localVar에 접근하려고 하면 ReferenceError가 발생합니다. 이는 스코프 체인의 원리에 따라 내부 스코프에서는 외부 스코프의 변수에 접근할 수 있으나, 외부에서는 내부 스코프의 변수에 접근할 수 없기 때문입니다.

어노니머스 함수의 사용 이유

캡슐화와 정보 은닉: 어노니머스 함수는 내부 상태를 외부로부터 숨기는 데 유용합니다. 이를 통해 모듈화된 코드를 작성할 수 있으며, 글로벌 스코프의 오염을 방지할 수 있습니다.
콜백과 이벤트 핸들러: 비동기 작업이나 이벤트 처리에 사용되는 콜백 함수를 간결하게 작성할 수 있습니다.
즉시 실행 함수: 코드가 로드될 때 바로 실행되어야 하는 로직을 구현할 때 사용됩니다.
어노니머스 함수는 JavaScript의 함수 스코프를 이해하고 활용하는 데 중요한 요소이며, 스코프 체인과 밀접하게 연관되어 있습니다. 이를 통해 개발자는 보다 효율적이고 안전한 코드를 작성할 수 있습니다.

wonyoung

😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀