7-1. 실행 컨텍스트와 클로저의 선행 개념1 : 스코프의 개념 (feat 렉시컬 스코프)

1. 스코프란?

2. 스코프의 종류

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

이 절에서는 궁극적으로 정리할 내용인 실행 컨텍스트와 클로저를 이해하는데 있어 선행되는 개념인 스코프를 정리하였다. 

실행 컨텍스트와 클로저의 개념을 이해하는데 있어 '스코프' , '함수 레벨 스코프', '블록 레벨 스코프', '렉시컬 스코프'와 같은 용어들이 계속해서 사용될건데 이런 용어적인 측면에서 막힘이 없게 하기 위해 스코프라는 큰 주제로 내용들을 단순히 정리한 글이다. 

따라서 스코프의 정말 심도 깊은(메모리 관점..)내용을 정리한 글이 아니다

 

1. 스코의 정의

변수 이름, 함수 이름, 클래스 이름 등 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이 유효 범위를 스코프라고 한다. 

 

용어를 이해하는데 있어 우선 정의를 본다. -> 추상적인 정의를 하나의 대표적 예시를 통해 이해한 뒤 이를 암기한다. 

이와 같은 방법으로 새로운 용어나 개념을 주로 이해한다

 

스코프의 예시를 하나 들면 var 또는 let, const로 선언한 변수가 함수 내부에 선언되었다고 가정하면 함수 내부라는 (함수) 스코프에서 변수들이 유효하게 된다. 

함수 블록의 시작과 끝이라고 단순히 생각할 수 있고, 다른 개념(렉시컬 환경, 클로저 등등) 을 이해하는데 있어 스코프라는 개념이 크게 걸림돌이 되지 않는것같다..

 

※ 탐구: 스코프 체인, 렉시컬 스코프의 실체는?

스코프란 유효 범위를 말한다. 예를 들어 전역 코드 안에 선언된 foo 함수가 있다고 해보자. 전역 코드가 평가되면 실행컨텍스트 스택(메모리 구조에서 stack임)에 전역 실행 컨텍스트를 push 하면서 전역 코드의 '평가' 과정이 진행된다. 

이 평가 과정에서 foo함수의 객체가 heap영역에 생성되고 foo의 상위 스코프의 참조를 담당하는 [[Environment]] 내부 슬롯에는 foo 함수의 상위 스코프인 전역 객체의 렉시컬 환경을 참조한다. 

렉시컬 환경(렉시컬 스코프)의 실체 구현은 무엇인가? 메모리 구조의 stack 영역에 실행 컨텍스트 스택이 존재하고 그 스택에 전역 코드의 객체 (일종의 frame)가 생성된다. 그리고 그 객체의 프로퍼티중 LexicalEnvironment라는 프로퍼티는 어떠한 객체(A라고 하겠다)를 가리킬 것인데 바로 이 A객체가 전역 렉시컬 환경의 실체 구현체이다.

 

즉 정리하면, 스코프의 실체란 스코프의 종류 중 하나인 렉시컬 스코프(렉시컬 환경)로 설명을 하면 스코프(렉시컬 스코프)의 실체 stack 영역의 실행 컨텍스트 스택의 전역 실행 컨텍스트라는 객체의 LexicalEnvironment프로퍼티가 가리키는 객체이다.

 

 

2. 스코의 종류

1) 전역 스코프

코드의 가장 바깥영역으로 전역 스코프에 선언된 변수들을 전역 변수로 한다. 

 

2) 지역 스코프

함수 몸체 내부로써 지역 스코프에 정의된 변수들을 지역 변수라고 한다. 

이런 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하게 된다. 

 

 

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

1) 함수 레벨 스코프

자바스크립트의 var 키워드는 함수 레벨 스코프의 대표적 예시이다. 

함수 레벨 스코프는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정하는 것을 말한다. 

예를 들어 함수내부에 제어문(for..)안에서 선언된 var 변수는 제어문 내부에서만 유효하지 않고 해당 함수 전체에서 유효하게 된다. 

 

 

2) 블록 레벨 스코프 

모든 코드 블록(제어문 포함)이 지역 스코프를 만드는데 대표적으로 let, const로 선언된 변수들이 블록 레벨 스코프를 형성한다. 

예를 들어 함수에 선언된 let x와 함수 내부의 for문에 선언된 let x는 서로 다른 스코프를 형성한다. 

(for문에서 x를 호출하면 for문에 선언된 x로 식별함)

 

 

4. 렉시컬 스코프

렉시컬 스코프를 정적 스코프라고도 하는데 이와 반대되는 개념이 동적 스코프이다. 

자바스크립트는 동적 스코프가 아닌 정적 스코프인 렉시컬 스코프를 따르는데 함수를 어디에서 정의했는지에 따라 상위 스코프를 결정한다.

즉 함수를 호출할 때 함수의 스코프를 결정하는(동적 스코프의 방식)이 아닌 함수가 정의된 위치에서 상위 스코프를 결정하고 이는 함수가 유효한 동안 바뀌지 않는다.