서론
간단하게.. 스코프체인에 대해 정확하게 모르는 것 같아 정리하였다. 밑의 내용은 스코프체인에 대한 개념 및 예제를 정리하였다.
스코프체인이란?
스코프 체인(Scope Chain)은 JavaScript에서 어떤 변수나 함수를 찾을 때, 어디를 어떻게 찾아야 하는지 알려주는 연결 고리를 말한다. 길이 서로 연결되어 사슬처럼 이어진 것이 바로 스코프 체인라고 한다. 바로 예제로 넘어가서 이해해 보자.
예제
밑과 같은 코드가 있다고 가정하자. console.log를 활용하여 a변수를 출력한다면 어떻게 나올까?
const a = 3;
{
const a = 2;
{
const a = 1;
console.log(a);
}
}
답은 1이다. 스코프체인은 가장 먼저, 변수를 사용하고 있는 현재 코드 블록(함수)의 렉시컬 환경에 있는 변수부터 찾는다. 여기에 찾는 변수가 있는지 확인을 한다.
만약 맨 마지막에 스코프에 있는 const a = 1을 지우면 어떻게 될까?
const a = 3;
{
const a = 2;
{
// const a = 1;
console.log(a);
}
}
console.log를 활용하여 a를 출력하면 2가 나온다. 왜냐하면 현재 스코프에서 변수를 찾지 못했다면, 해당 스코프의 '외부 렉시컬 환경 참조'가 가리키는 바로 한 단계 상위 스코프의 렉시컬 환경으로 이동하기 때문이다.
만약 2번째 스코프의 a를 주석처리하면 다음은 3이 나오게 된다. 이런 식으로 스코프가 많다면 이러한 과정을 반복한다. 찾는 변수가 나올 때까지 스코프 체인을 따라 계속해서 상위 스코프로 올라 것을 말한다.
결론
스코프체인은 클로저(Closure)는 덕분에 가능한 결과이다. 함수가 자신이 선언될 때의 렉시컬 환경을 기억하고, 그 렉시컬 환경과 연결된 스코프 체인에 있는 변수들을 계속 참조할 수 있기 때문이다. 외부 함수가 이미 실행을 마쳐도, 내부 함수가 그 외부 함수의 스코프 체인에 접근할 수 있게 된다.
'Javascript' 카테고리의 다른 글
| [프로그래머스] Javascript JadenCase 문자열 만들기 12951 (1) | 2024.10.23 |
|---|---|
| [백준 알고리즘] javascript 로프 2217번 (0) | 2024.02.28 |
| [Javscript] nvm 설치시 python command not found 에러 (0) | 2023.10.09 |
| [Javascript] 웹팩(Webpack)이란? (0) | 2022.06.13 |
| [Javascript] 익명함수, 화살표 표기법 (0) | 2022.06.13 |
