JavaScript - 스코프(Scope)

스코프

---

선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미

• 변수가 해당 스코프에 존재하지 않는다면 사용할 수 없음
• 하위 스코프는 상위 스코프에 접근 가능하지만, 상위 스코프는 하위 스코프에 접근 불가능

스코프의 구분

전역 스코프(Global scope) : 어디에서든 참조 가능
지역 스코프(Local scope) : 블록 안, 함수 내에서만 참조 가능

블록 스코프 (Block scope)

• if, for 등의 중괄호 내부를 가리킴
• 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능
  예시)

let x = 1
if (x === 1) {
  let x = 2
  console.log(x) // 2
}

console.log(x) // 1

함수 스코프 (Function scope)

• 함수의 중괄호 내부를 가리킴
• 함수 스코프를 가지는 변수는 함수 바깥에서 접근 불가능

function foo() {
	var x = 5
    console.log(x) // 5
}

console.log(x) // ReferenceError : x is not defined

렉시컬 스코프(Lexical scope) : 함수의 상위 스코프를 결정하는 방식, 함수를 어디에서 선언했는지에 따라 상위 스코프를 결정하는 것

스코프의 특징

• 자바스크립트의 스코프는 변수에 접근할 수 있는 유효 범위
• 바깥 스코프에서 선언한 변수는 안쪽에서 사용 가능
• 안쪽 스코프에서 선언한 변수는 바깥쪽에서 사용 불가능
• 스코프 중첩 가능
• 가장 바깥은 전역 스코프, 나머지는 지역 스코프
• 지역 변수가 전역 변수보다 우선순위가 높음

스코프 체인

---

변수(식별자)를 찾을 때 일단 자신이 속한 스코프에서부터 찾아보고, 그 스코프에 찾는 변수가 없으면 상위 스코프를 타고 올라가며 차례차례 찾아 나간다.

코드 내에서 변수와 함수에 접근하는 방법을 결정하는데 사용

식별자를 검색하는 과정

스코프가 어떻게 연결되고 있는지 보여주는 것

자기 자신의 스코프를 제외한 자신과 가장 가까운 변수 객체의 모든 스코프들

예시)

// 전역 스코프
var globalVar = "I'm global";
function outerFunction() {
    var outerVar = "I'm outer";
    function innerFunction() {
        var innerVar = "I'm inner";
        console.log(globalVar); // 전역 변수에 접근 가능
        console.log(outerVar);  // 외부 함수 변수에 접근 가능
        console.log(innerVar);  // 자신의 스코프 내 변수에 접근 가능
    }
    innerFunction();
}
outerFunction();

1. outerFunction이 호출
2. outerFunction 내부에서 innerFunction이 호출
3. innerFunction 내부에서 각 변수에 접근하려고 할 때, 스코프 체인을 통해 해당 변수를 찾음

• 먼저 innerVar를 찾음, innerFunction 스코프에 정의되어 있으므로 문제 없이 접근 가능
• 다음으로 outerVar를 찾음, innerFunction 스코프에는 없지만, 외부 함수인 outerFunction의 스코프에 정의되어 있기 때문에 접근 가능
• 마지막으로 globalVar를 찾음, innerFunction 스코프에는 없지만, 외부 스코프인 outerFunction에서도 찾을 수 없기 때문에 전역 스코프에서 이 변수를 찾아 접근 가능