Javascript] 스코프(스코프, 스코프체인, 렉시컬 스코프)

😎Javascript] 스코프, 스코프체인, 렉시컬 스코프

✅ 스코프 Scope

스코프 (Scope) - 범위
Javascript에서 스코프란 ‘식별자(변수)에 접근할 수 있는 유효범위’를 뜻한다.

 

자바스크립트 스코프는 2가지 타입이 있다.

1. Global (전역)

2. Local (지역)

전역 스코프(Global Scope)는 전역에 선언되어 있어 어느 곳에서나 해당 변수에 접근할 수 있고

지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있다.

let a = "global"
function aPrint() {
	let a = "local"
	console.log(`aPrint : ${a}`)
}
aPrint() //aPrint : local
console.log(`global : ${a}`) //global : global

 

aPrint 함수 바깥의 a변수는 전역 변수이고 aPrint 함수 내의 a변수는 지역 변수이다.

aPrint 함수를 실행하면 aPrint 내에 a변수가 있고 지역 스코프에 해당하기 때문에 aPrint: local이 출력되고

aPrint 함수 바깥에서 console.log(`global : ${a}`)를 실행하면

전역 스코프에 해당하는 a를 찾아 실행하고 global : global이 출력된다

작동 원리는 다음에 포스팅할 실행 컨텍스트 글에서 자세히 확인할 수 있다.

 

✅ 스코프 체인 Scope Chain

위에서 알아본 전역 스코프와 지역 스코프의 관계에서 스코프 체인(scope chain)이라는 개념이 등장한다.

스코프 체인의 특징을 간단하게 설명하자면

1. 내부 함수에서는 외부 함수의 변수에 접근 가능하고, 외부 함수에서는 내부 함수의 변수에 접근할 수 없다.

즉, 안에서 바깥으로의 탐색은 가능하고 바깥에서 안쪽으로의 탐색은 불가능하다.

2. 모든 함수는 전역 객체에 접근할 수 있다.

 

다음 예시를 보자.

let name = "scope"
function outer() {
	console.log(`outer name : ${name}`)
	function inner() {
		let innerData = "innerData"
		console.log(`inner name : ${name}`)
	}
	inner()
}
outer() 
//outer name : scope
//inner name : scope

console.log(`innerData : ${innerData}`) 
//Uncaught ReferenceError: innerData is not defined

 

 

inner 함수는 name 변수를 찾기 위해

1. 먼저 자기 자신의 스코프 (Local Scope)를 탐색하고

2. 여기에 없으면 한 단계 올라가서 outer 스코프를 탐색하고,

3. 또 여기에 없으면 다시 올라가서 결국엔 전역 스코프(Global Scope)를 탐색한다.

4. 전역 스코프에서 name 변수를 찾았고 'scope'라는 값을 얻는다.

 

만약, 전역 스코프에도 찾고자 하는 변수가 없다면 변수를 찾지 못했다는 에러가 발생한다.

스코프 체인은 '안에서 바깥으로의 탐색은 가능하고 바깥에서 안쪽으로의 탐색은 불가능하다.' 라고 설명했다.

그래서 맨 아래 console.log(`innerData : ${innerData}`)의 결과는 참조에러 'innerData is not defined'가 발생한다.

console.log 함수가 탐색 가능한 범위인 Global Scope에 innerData가 없기 때문이다.

이렇게 꼬리를 물고 계속 상위로 범위를 넓히며 값을 찾아가는 현상을 스코프 체인이라고 한다.

 

✅ 렉시컬 스코프 Lexical Scope

자바스크립트의 스코프는 함수를 호출할 때가 아니라 선언할 때 생성된다. 때문에 정적 스코프라고도 불린다.

아래 코드의 결과를 예상해보자.

let name = "IOTrue"
function inner() {
	console.log(name)
}

function outer() {
	let name = "Javascript"
	inner()
}
outer() //???

 

출력 결과는 ???

.

.

.

IOTrue이다.

스코프는 함수를 호출할 때가 아니라 선언할 때 생성되기 때문에

최종적으로 출력되는 inner 함수의 name은

1. inner 함수 내의 Local Scope에서 name을 탐색하고, 여기에 없기 때문에

2. 한 단계 위의 스코프인 Global Scope에서 name을 탐색하고, 여기에 해당 변수가 있으므로

3. 최종 출력 결과는 IOTrue가 된다.

outer에서 선언한 let name = "Javascript"는 inner 함수와는 상관 없는 것이다.

이러한 것을 렉시컬 스코프(Lexical scope) 또는 정적 스코프라고 한다.

 

 

자바스크립트를 사용한다면 꼭 알아야 하는 개념인 스코프, 스코프체인, 렉시컬 스코프에 대해서 알아봤다.

다음 포스팅은 조금 더 깊이가 있는 실행 컨텍스트에 대해 알아보겠다.