스코프 scope

스코프 (Scope) 는 변수나 함수가 유요한 범위를 의미

즉, 코드 내에서 특정 변수나 함수가 어디에서 접근 가능하고, 어디에서 사용할 수 있는지를 결정하는 개념임

자바스크립트에서는 스코프가 전역스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉘며, ES6에서 추가된 블록 스코프 (Block Scope)도 중요한 요소이다.

 

1. 전역 스코프(Global Scope)

• 전역 스코프에서 선언된 변수나 함수는 코드 전체에서 접근 가능함.
• 브라우저 환경에서는 **전역 객체(window)**에 변수와 함수가 자동으로 추가되며, 어디서든 참조할 수 있음.

var globalVar = "I am global";

function showGlobal() {
  console.log(globalVar); // 전역 스코프에서 선언된 변수 접근 가능
}

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

globalVar는 저역 변수이므로 함수 안팎에서 모두 접근 가능!

2. 지역 스코프(Local Scope)

• 지역 스코프는 특정 함수나 블록 내부에서만 유효한 스코프임.
• 함수 스코프와 블록 스코프로 나뉘며, 해당 스코프 내에서 선언된 변수는 스코프 외부에서 접근할 수 없음.

함수 스코프:

• 함수 내부에서 선언된 변수는 해당 함수 내에서만 유효하며, 함수 밖에서는 접근할 수 없음.

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

showLocal();
console.log(localVar); // Error: localVar is not defined

localVar는 함수 내부에서만 유효하므로 함수 외부에서는 사용할 수 없음.

 

블록 스코프:

• ES6에서 도입된 **let**과 **const**는 블록 스코프를 따름. 블록({}) 내부에서 선언된 변수는 해당 블록 내에서만 유효하며, 블록 밖에서는 접근할 수 없음.

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

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

**let**과 **const**는 블록(if, for 등) 내부에서 선언된 경우, 블록 밖에서는 접근 불가함.

 

3. 함수 스코프(Function Scope) vs 블록 스코프(Block Scope)

• var: 함수 스코프를 가짐. 즉, 함수 내에서 선언된 var 변수는 함수 전체에서 유효하며, 블록 내에서 선언된 경우에도 블록 밖에서 접근 가능.
• let, const: 블록 스코프를 가짐. 블록({}) 내부에서 선언된 경우, 해당 블록을 벗어나면 변수에 접근할 수 없음.

예시 (함수 스코프와 블록 스코프의 차이):

if (true) {
  var functionScoped = "I am function-scoped";
  let blockScoped = "I am block-scoped";
}

console.log(functionScoped); // "I am function-scoped"
console.log(blockScoped); // Error: blockScoped is not defined

var는 블록 스코프를 따르지 않기 때문에 블록 밖에서도 접근 가능하지만, let과 const는 블록 스코프이므로 블록 밖에서는 접근할 수 없음.

 

4. 중첩 스코프(Nested Scope)

• 자바스크립트에서는 스코프가 중첩될 수 있음. 즉, 함수 내에 다른 함수가 있을 경우, 내부 함수는 외부 함수의 변수를 참조할 수 있지만, 외부 함수는 내부 함수의 변수를 참조할 수 없음.
• 이를 **스코프 체인(Scope Chain)**이라고도 부르며, 내부 스코프는 상위 스코프를 참조할 수 있지만, 반대는 불가능함.

function outer() {
  const outerVar = "I am outer";

  function inner() {
    const innerVar = "I am inner";
    console.log(outerVar); // "I am outer" (상위 스코프 참조 가능)
  }

  inner();
  console.log(innerVar); // Error: innerVar is not defined
}

outer();

내부 함수 inner는 외부 함수 outer의 변수인 outerVar에 접근할 수 있지만, 반대로 외부 함수는 내부 함수의 변수에 접근할 수 없음.

 

5. 렉시컬 스코핑(Lexical Scoping)

자바스크립트는 렉시컬 스코핑을 따름. 즉, 함수가 선언된 위치에 따라 스코프가 결정됨. 함수가 어디에서 호출되었는지와는 관계없이, 선언된 위치에서의 스코프에 따라 변수에 접근할 수 있음.

const globalVar = "I am global";

function outer() {
  const outerVar = "I am outer";

  function inner() {
    console.log(globalVar); // "I am global"
    console.log(outerVar);  // "I am outer"
  }

  return inner;
}

const innerFunc = outer();
innerFunc(); // inner는 여전히 outer의 스코프를 참조함

렉시컬 스코핑에 의해 inner 함수는 outer 함수가 호출된 위치와 상관없이 선언된 위치에서의 스코프를 참조함.

 

6. 클로저(Closure)

**클로저(Closure)**는 함수와 그 함수가 선언된 렉시컬 환경의 조합을 의미함. 내부 함수는 외부 함수의 변수를 참조할 수 있고, 외부 함수가 종료된 후에도 내부 함수는 외부 함수의 변수에 계속 접근할 수 있음. 이를 통해 변수 은닉화와 같은 패턴을 구현할 수 있음.

function outer() {
  let count = 0;

  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2

inner 함수는 외부 함수 outer의 변수 count에 계속 접근할 수 있으며, outer 함수가 종료된 후에도 count는 유지됨.

 

 

---

요약:

• **스코프(Scope)**는 변수나 함수가 유효한 범위를 의미함.
• 전역 스코프: 전역적으로 접근 가능한 변수.
• 지역 스코프: 함수 또는 블록 내부에서만 유효한 변수.
• 함수 스코프는 함수 내부에서만 유효하며, 블록 스코프는 블록({}) 내에서만 유효함.
• 자바스크립트는 렉시컬 스코핑을 따르며, 중첩된 스코프에서는 상위 스코프의 변수에 접근 가능함.
• 클로저는 함수가 종료된 후에도 상위 스코프의 변수에 접근할 수 있는 패턴을 제공함.