[JS] - 스코프란? 간단하고 쉽게 이해하기 (예제코드, 글로벌 스코프,블록 레벨 스코프, 함수 스코프, 스코프 체인)

🧹 간단정리

•  스코프(Scope) : 변수와 함수가 접근 가능한 범위를 의미
• 글로벌 스코프(Global Scope): 전역 변수로 선언. 코드 어디에서든 접근 가능.
• 함수 스코프(Function Scope): 함수 내부에서 선언. 해당 함수 내부에서만 접근 가능.
• 블록 레벨 스코프(Block Level Scope): 블록(중괄호 {} 내)에서만 접근 가능. * let 또는 const로 선언된 변수만 해당
• 스코프 체인(Scope Chain): 중첩된 함수 내부에서는 외부 함수의 변수에 접근 가능.

(예제와 함께 쉽게 설명한 내용은 아래에...👀)

---

🛸 스코프란?

자바스크립트에서 스코프(Scope)란? 변수와 함수가 접근 가능한 범위를 의미한다.

이는 코드의 특정 영역에서 어떤 변수들을 사용할 수 있는지를 정의한다.

 

스코프는 크게 [글로벌 스코프, 함수 스코프, 블록 레벨 스코프, 체인 스코프]로 나눌 수 있다.

---

🌎 글로벌 스코프(Global Scope)

글로벌 스코프에 선언된 변수는 어디서든 접근 가능하다. (전역 변수)

var globalVar = "전역 변수";

function checkScope() {
    console.log(globalVar); // "전역 변수" 출력
}

checkScope();
console.log(globalVar); // "전역 변수" 출력

---

🪨 함수 스코프(Function Scope)

함수 내에서 선언된 변수는 해당 함수 내에서만 접근 가능하다.

외부에서는 접근할 수 없다.

function exampleFunction() {
    var functionScopedVar = "함수 스코프 내 변수";
    console.log(functionScopedVar); // "함수 스코프 내 변수" 출력
}

exampleFunction();
console.log(functionScopedVar); // ReferenceError(참조 불가) 발생

---

🧱 블록 레벨 스코프(Block Level Scope)

let과 const를 사용하여 선언된 변수는 블록 레벨 스코프를 가진다.

해당 변수가 선언된 블록(중괄호 {} 안)에서만 접근 가능.

function testBlockScope() {
    if (true) {
        let blockScopedVar = "블록 스코프 내 변수";
        console.log(blockScopedVar); // "블록 스코프 내 변수" 출력
    }

    console.log(blockScopedVar); // ReferenceError(참조 불가) 발생
}

testBlockScope();

 

 

---

⛓️ 스코프 체인(Scope Chain)

자바스크립트에서 함수는 중첩될 수 있다.

내부 함수는 외부 함수의 변수에 접근할 수 있다.

 

이를 스코프 체인이라고 한다.

function outerFunction() {
    var outerVar = "외부 함수 변수";

    function innerFunction() {
        console.log(outerVar); // "외부 함수 변수" 출력
    }

    innerFunction();
}

outerFunction();

 

---

💁🏻‍♂️ 마무리

어렵지 않죠...?  스코프는 자바스크립트에서 변수와 함수의 접근성을 결정한다고 이해하면 됩니다.

이를 이해하는 것이 추후 JS로 개발할 때 매우 도움이 될 겁니다.😁