[스코프] 변수는 어디까지 살아있을까?

728x90

스코프(Scope) 

JavaScript에서 스코프(Scope)란 변수에 접근할 수 있는 범위를 말합니다. 코드를 짤 때 어떤 변수가 어디서 유효한지를 알아야 오류 없이 원하는 동작을 구현할 수 있죠. 이번 글에서는 함수, 블록, 전역 스코프 등 다양한 스코프의 개념과 var, let, const의 스코프 차이까지 예제 중심으로 정리합니다.

 

---

1.  스코프란?

스코프(Scope)는 변수에 접근할 수 있는 유효 범위를 의미합니다. 즉, "이 변수는 어디서부터 어디까지 쓸 수 있을까?"를 결정하는 규칙입니다.

 

---

2.  스코프의 종류

a.  전역 스코프(Global Scope)

• 코드 어디서든 접근 가능한 변수입니다.
• 전역 객체(window, global)에 속합니다.

var globalVar = "hello";

function sayHi() {
  console.log(globalVar); // hello
}

b.  함수 스코프(Function Scope)

• 함수 내부에서 선언된 변수는 그 함수 안에서만 유효합니다.
• var는 함수 스코프를 따릅니다.

function example() {
  var msg = "hi";
}
console.log(msg); // ❌ ReferenceError

c.  블록 스코프(Block Scope)

• { }로 감싸진 코드 블록 내부만 유효합니다.
• let과 const는 블록 스코프를 따릅니다.

{
  let x = 10;
}
console.log(x); // ❌ ReferenceError

 

 

---

3.  var, let, const 의 스코프 차이

function testVar() {
  if (true) {
    var a = 1;
  }
  console.log(a); // ✅ 1
}

function testLet() {
  if (true) {
    let b = 2;
  }
  console.log(b); // ❌ ReferenceError
}

키워드	스코프
var	함수 스코프
let, const	블록 스코프

 

---

4.  렉시컬 스코프 (Lexical Scope) 란?

JavaScript는 렉시컬 스코프(Lexical Scope)를 따릅니다. 즉, 코드를 작성한 위치(정적 위치)에 따라 스코프가 결정됩니다.

예시 - 클로저(Closure)

function outer() {
  let x = 1;

  function inner() {
    console.log(x); // ✅ 접근 가능
  }

  inner();
}

• inner()는 자신이 정의된 위치의 스코프(outer 함수)에서 x를 찾습니다.
• 호출 위치가 아니라 선언 위치 기준입니다.

 

---

5.  스코프 체인 (Scope Chain)

• 변수를 찾을 때 자기 스코프 → 상위 스코프 → 전역 순으로 검색합니다.
• 이 흐름을 스코프 체인(Scope Chain)이라 부릅니다.

let a = 1;

function outer() {
  let b = 2;

  function inner() {
    let c = 3;
    console.log(a, b, c); // 1 2 3
  }

  inner();
}

 

---

6.  마무리

구분	설명	해당 키워드
전역 스코프	파일 전체에서 접근 가능	var, let, const
함수 스코프	함수 안에서만 유효	var
블록 스코프	{ } 내부에서만 유효	let, const
렉시컬 스코프	선언된 위치에 따라 스코프 결정	(JS 전체)

함께 보면 좋은 자료

블로그 글 :

[실행 컨텍스트] JavaScript는 이렇게 코드를 실행한다.

[호이스팅] 변수 선언의 비밀

[var, let, const] 자바스크립트 변수 선언의 차이점과 쓰임새

 

---

반응형