1. 스코프란 무엇인가?

스코프(Scope)는 '범위'라는 의미로, JavaScript에서 변수나 함수에 접근할 수 있는 유효 범위를 의미한다. 더 정확히 말하면, 스코프는 참조 대상 식별자(identifier, 변수명, 함수명 등)를 찾아내기 위한 규칙이다.

스코프를 이해하기 쉽게 비유하자면, 마치 아파트 단지와 같다. 각 집(함수)마다 고유한 주소(스코프)가 있고, 해당 집 안에 있는 물건(변수)은 그 집 안에서만 자유롭게 사용할 수 있다. 하지만 단지 공용 공간(전역 스코프)에 있는 물건은 모든 집에서 접근할 수 있는 것과 같은 원리다.

1-1) 왜 스코프가 필요한가?

스코프가 없다면 같은 이름을 가진 변수가 충돌을 일으켜 프로그램 전체에서 하나밖에 사용할 수 없게 된다. 마치 컴퓨터에 디렉터리가 없어서 같은 이름의 파일을 하나밖에 만들 수 없는 것과 같다. 스코프는 이러한 식별자 이름의 충돌을 방지하고, 변수의 생명주기를 관리하며, 메모리를 효율적으로 사용할 수 있게 해준다.

2. 스코프의 종류

JavaScript의 스코프는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉜다.

2-1) 전역 스코프 (Global Scope)

전역 스코프는 코드의 가장 바깥 영역을 의미한다. 전역 스코프에서 선언된 변수는 전역 변수가 되며, 코드 어디에서든 접근할 수 있다.

브라우저 환경에서 전역 스코프는 window 객체가 담당한다. 따라서 전역에서 var 키워드나 키워드 없이 선언한 변수는 window 객체의 프로퍼티로 등록된다.

var globalVar = 'I am global';
noKeyword = 'I am also global'; // 키워드 없이 선언 (비권장)

console.log(window.globalVar); // 'I am global'
console.log(window.noKeyword); // 'I am also global'

중요: ES6에서 도입된 let과 const로 선언한 전역 변수는 window 객체가 아닌 별도의 Script Scope에 등록된다. 이는 window 객체의 프로퍼티와의 충돌을 방지하기 위함이다.

let letVar = 'I am let';
const constVar = 'I am const';

console.log(window.letVar); // undefined
console.log(window.constVar); // undefined

2-2) 지역 스코프 (Local Scope)

지역 스코프는 특정 영역 내에서만 접근 가능한 스코프다. 지역 스코프에서 선언된 변수는 지역 변수가 되며, 해당 영역과 그 하위 영역에서만 참조할 수 있다.

JavaScript의 지역 스코프는 다시 함수 스코프와 블록 스코프로 나뉜다.

3. 함수 스코프 vs 블록 스코프