안녕하세요, ubike 블로그 입니다. 오늘은 자바스크립트의 스코프 체인(Scope Chain)과 클로저(Closure)에 대해서 여러분들의 이해를 돕기 위해서 쉽게 설명해드리려고 합니다.
자바스크립트 스코프 체인이란?
자바스크립트에서 스코프 체인은 변수가 어떻게 찾아지고, 함수가 어떻게 자신의 실행 컨텍스트 내외부의 변수에 접근할 수 있는지를 설명하는 중요한 개념입니다. 이는 변수의 가시성과 생명주기를 결정하며, 효율적인 코드 작성에 필수적인 이해가 필요합니다.
스코프(Scope)의 기본 개념
스코프는 변수와 함수가 액세스 가능한 범위를 정의합니다. 자바스크립트에는 전역 스코프(Global Scope)와 지역 스코프(Local Scope) 두 가지 주요한 스코프 유형이 있습니다.
전역 스코프와 지역 스코프
- 전역 스코프: 코드의 어느 곳에서나 액세스 가능한 변수를 포함합니다.
- 지역 스코프: 특정 함수 또는 블록 내에서만 액세스 가능한 변수를 포함합니다.
스코프 체인(Scope Chain)의 원리
스코프 체인은 함수가 정의된 위치에 따라 결정되며, 변수를 찾기 위한 “링크드 리스트”와 같은 구조를 가집니다. 이 체인을 따라가면서, 자바스크립트 엔진은 주어진 변수의 값을 찾습니다.
스코프 체인의 작동 방식
var globalVar = "전역";
function outerFunc() {
var outerVar = "외부";
function innerFunc() {
var innerVar = "내부";
console.log(innerVar); // "내부"
console.log(outerVar); // "외부"
console.log(globalVar); // "전역"
}
innerFunc();
}
outerFunc();innerFunc는 자신의 지역 스코프, outerFunc의 스코프, 그리고 전역 스코프에서 변수를 찾습니다.
렉시컬 스코핑(Lexical Scoping)
자바스크립트는 렉시컬 스코핑을 사용합니다. 즉, 함수의 스코프는 함수가 정의된 시점에 의해 결정됩니다. 이는 스코프 체인을 예측 가능하게 만들고, 코드의 구조를 명확하게 합니다.
렉시컬 스코핑 예제
function outerFunc() {
var outerVar = "외부";
function innerFunc() {
console.log(outerVar); // "외부"
}
return innerFunc;
}
var inner = outerFunc();
inner(); // "외부"위 예제에서 보시다시피 innerFunc는 outerFunc의 스코프에 접근할 수 있습니다.
클로저(Closure)와 스코프 체인
클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 클로저는 스코프 체인을 통해 외부 함수의 변수에 접근할 수 있으며, 이는 데이터 은닉과 캡슐화에 유용하게 사용됩니다.
클로저 예제
function createCounter() {
let count = 0
;
return function() {
return count++;
};
}
let counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1counter는 createCounter의 count 변수에 접근할 수 있습니다.
스코프 체인은 자바스크립트에서 변수의 가시성과 생명주기를 이해하는 데 중요합니다. 또한, 클로저와 렉시컬 스코핑을 통해 더 강력하고 유지 보수가 용이한 코드를 작성할 수 있습니다. 지금까지 많은 개발자 분들이 헷갈려하는 클로저와 스코프 체인에 대해서 설명해보았습니다. 도움이 되셨다면 다른글도 한번 읽어봐주세요. 감사합니다.
