스코프(Scope)

스코프(Scope)

변수, 함수, 객체가 접근 가능한 범위를 정의하는 개념입니다.

이는 코드가 실행되는 환경과 해당 환경 내에서 변수나 함수에 접근할 수 있는지를 결정합니다. 자바스크립트의 스코프는 크게 두 가지로 구분할 수 있습니다: 전역 스코프와 지역 스코프 ES6 이후 블록 스코프도 중요한 개념으로 추가되었습니다.

 

1. 전역 스코프(Global Scope)

전역 스코프는 프로그램 전체에서 접근할 수 있는 범위를 의미합니다. 전역에 선언된 변수나 함수는 어디에서나 접근 가능합니다.

var globalVar = "I am global";

function printGlobal() {
  console.log(globalVar); // "I am global"
}

printGlobal();
console.log(globalVar); // "I am global"

 

globalVar는 전역에서 선언되었기 때문에, 함수 내에서도, 함수 외부에서도 접근할 수 있습니다.

 

2. 함수 스코프(Function Scope)

함수 내에서 선언된 변수는 함수 내부에서만 접근 가능하며, 함수 외부에서는 접근할 수 없습니다.

이러한 변수를 지역 변수(local variable)라고 합니다.

function localFunction() {
  var localVar = "I am local";
  console.log(localVar); // "I am local"
}

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

 

localVar는 함수 내에서 선언되었기 때문에 함수 외부에서는 접근할 수 없습니다.

 

3. 블록 스코프(Block Scope)

ES6부터 추가된 let과 const 키워드는 블록 스코프를 따릅니다. 블록 스코프란 중괄호 {}로 감싸진 코드 블록 내에서만 유효한 범위를 말합니다. if, for 등의 블록 내부에 선언된 변수는 해당 블록 외부에서 접근할 수 없습니다.

if (true) {
  let blockVar = "I am block-scoped";
  console.log(blockVar); // "I am block-scoped"
}

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

 

blockVar는 블록 내부에서만 유효하기 때문에 블록 외부에서는 접근할 수 없습니다.

 

4. 중첩 스코프(Nested Scope)

자바스크립트에서는 스코프가 중첩될 수 있습니다. 함수 안에 또 다른 함수가 있는 경우, 내부 함수는 외부 함수의 스코프에 접근할 수 있습니다. 하지만 외부 함수는 내부 함수의 스코프에 접근할 수 없습니다. 이를 스코프 체인(Scope Chain)이라고 합니다.

function outerFunction() {
  var outerVar = "I am outer";

  function innerFunction() {
    var innerVar = "I am inner";
    console.log(outerVar); // "I am outer"
    console.log(innerVar); // "I am inner"
  }

  innerFunction();
  console.log(innerVar); // ReferenceError: innerVar is not defined
}

outerFunction();

 

내부 함수인 innerFunction은 외부 함수인 outerFunction의 변수 outerVar에 접근할 수 있지만, 외부 함수는 내부 함수의 변수 innerVar에 접근할 수 없습니다.

 

5. 렉시컬 스코프(Lexical Scope)

자바스크립트는 렉시컬 스코프(또는 정적 스코프)를 따릅니다. 즉, 함수가 정의될 때의 환경에 따라 스코프가 결정됩니다. 함수가 어디에서 호출되는지가 아니라, 어디에서 정의되었는지가 중요합니다.

var outerVar = "I am outer";

function outerFunction() {
  var localVar = "I am local";

  function innerFunction() {
    console.log(outerVar); // "I am outer"
    console.log(localVar); // "I am local"
  }

  return innerFunction;
}

const innerFunc = outerFunction();
innerFunc();

 

innerFunction은 outerFunction 내부에서 정의되었기 때문에, outerFunction의 스코프에 접근할 수 있습니다. 심지어 innerFunc가 외부에서 호출되더라도, 함수가 정의된 시점의 스코프가 유지됩니다.

 

6. 전역 객체(Global Object)와 스코프

브라우저 환경에서 전역 스코프에 선언된 변수는 전역 객체인 window 객체의 속성이 됩니다. 즉, 전역 변수는 window 객체를 통해 접근할 수 있습니다.

var globalVar = "I am global";
console.log(window.globalVar); // "I am global"

 

전역에서 선언한 globalVar는 window 객체의 속성이 됩니다.

 

스코프는 자바스크립트에서 변수를 관리하고 코드의 가독성과 안정성을 높이는 중요한 개념입니다. 특히 ES6 이후 추가된 블록 스코프는 변수 선언 시의 혼란을 줄여줍니다.

 

 

참고

https://youngju-js.tistory.com/39

https://velog.io/@nittre/JavaScript-Scope%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-Closure%ED%81%B4%EB%A1%9C%EC%A0%80-%EC%A0%95%EB%A6%AC