스코프(Scope)

스코프(Scope)란?

MDN에서 정의하는 스코프

스코프는 컨텍스트 내에서 값과 표현식이 "표현"되거나 참조 될 수 있는 현재 실행 컨텍스트(Execute Context)를 의미한다.
만약 변수 또는 표현식이 "해당 스코프"내에 없으면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지며, 하위 스코프는 상위 스코프에 접근할 수 있지만 그 반대는 불가하다.

 

🌿 스코프의 기본 개념

- 변수나 함수의 접근 가능한 범위를 의미한다.

- 코드의 구조를 이해하는 데 중요한 역할을 하며, 변수의 생명 주기와 유효성을 결정한다.

- 모든 변수와 함수는 선언 위치에 의해 스코프를 갖게 된다.

// 전역 스코프
let globalVar = "I'm global!";

function outerFunction() {
    // 지역 스코프
    let outerVar = "I'm outer!";
    
    function innerFunction() {
        // 중첩된 함수에서 외부 변수 접근
        console.log(globalVar); // "I'm global!"
        console.log(outerVar); // "I'm outer!"
    }
    
    innerFunction();
}

outerFunction();

// 블록 스코프 예시
if (true) {
    let blockVar = "I'm block scoped!";
    console.log(blockVar); // "I'm block scoped!"
}

// console.log(blockVar); // ReferenceError: blockVar is not defined

 

JS에서 스코프는 크게 2가지로 나눠진다.

1. 전역 스코프(Global Scope)

프로그램 어디서든 접근할 수 있는 변수나 함수의 범위. 전역 스코프에 선언된 변수는 모든 함수와 블록에서 접근할 수 있다.

 

2. 지역 스코프(Local Scope)

함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있는 범위. 지역 스코프는 다시 함수 스코프와 블록 스코프로 나눌 수 있다.

C 기반 언어들은 지역 스코프가 블록 레벨 스코프를 따르지만, JS에서는 기본적으로 함수 레벨 스코프를 따른다.

 

✦ 함수 레벨 스코프(Function-level Scope)

- 함수 내에서 선언된 변수는 그 함수 내에서만 유효하다.

 

✦ 블록 레벨 스코프(Block-level Scope)

- let이나 const 키워드로 선언된 변수는 {}로 감싸진 블록 내에서만 유효하다. (ES6에서 도입)

 

렉시컬 스코프(Lexical Scope)

함수의 위치에 따라 함수의 상위 스코프(유효 범위)가 결정된다. 이 상위 스코프는 함수의 선언 시점에 결정된다.

 

✦ 동적 스코프(Dynamic Scope)

- 함수가 실행(호출)되는 시점에 상위 스코프가 결정된다.

 

✦ 정적 스코프(Static Scope) = 렉시컬 스코프

- 함수가 선언되는 시점에 상위 스코프가 결정된다.

JS는 렉시컬 스코프 방식을 따른다. 즉, 함수의 선언부에서 상위 스코프가 해당 함수의 상위 스코프를 결정한다.

 

🌿 스코프의 특징

• 중첩 스코프 : 함수 안에 다른 함수를 선언하면, 안쪽 함수는 바깥 함수의 변수에 접근할 수 있다. 이때 바깥 함수의 변수를 클로저(Closure)라고 한다.
• 호이스팅(Hoisting) : 변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 현상

🌿 스코프의 장점

• 서로 다른 함수에서 같은 이름의 변수를 사용해도 서로 영향을 주지 않아, 코드의 안정성을 높일 수 있다.
• 함수나 블록을 사용해 코드를 잘게 나누면 가독성이 높아지고 관리하기 쉬운 구조를 만들 수 있다.

🌿 스코프의 단점

• 전역 변수를 남용하면, 코드가 커질수록 충돌이 발생할 가능성이 높아진다.
• 여러 중첩된 함수가 있을 경우, 변수를 찾기 위해 스코프 체인을 탐색해야 하므로 성능에 영향을 줄 수 있다.

---

✦ 실행 컨텍스트(Execution Context)

코드의 실행 환경을 나타내며, 자바스크립트 엔진이 코드를 실행할 때마다 생성된다.

실행 컨텍스트는 3가지 중요한 정보를 포함한다.

• 변수 객체(Variable Object) : 해당 컨텍스트 내의 모든 변수 저장. 함수의 매개변수와 내부에 선언된 변수들 포함
• 스코프 체인(Scope Chain) : 현재 실행 컨텍스트에서 접근할 수 있는 변수의 목록을 구성하는 체인
• this 값 : 현재 실행 컨텍스트에서의 this 값

✦ 스코프 체인(Scope Chain)

현재 실행 컨텍스트에서 접근할 수 있는 변수들을 찾기 위해 사용되는 구조. 현재 스코프부터 시작해 외부 스코프를 차례로 탐색

• 현재 스코프: 현재 실행 중인 컨텍스트의 변수 객체
• 외부 스코프: 현재 스코프의 상위 스코프, 즉 함수가 선언된 위치에 따른 스코프를 순차적으로 탐색

 

---

Refer )

• ChatGPT
• MDN
• 모던 자바스크립트 Deep Dive