728x90
자바스크립트 딥다이브 공부 후 정리한 내용입니다.
스코프란?
- 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨
⇒ 즉 식별자가 유효한 범위를 뜻함(like.. 전역 변수, 지역변수)
⇒ 자바스크립트 엔진이 스코프 체인을 통해 참조할 변수인 식별자를 검색할 때 사용하는 규칙
💡 “코드가 어디서 실행되며 주변에 어떤 코드가 있는지”를 렉시컬 환경이라고 함
코드의 문맥은 렉시컬 환경으로 이루어짐. 이를 구현한 것이 “실행 컨텍스트”이며, 모든 코드는 실행 컨텍스트에서 평가되고 실행됨
💡 var 키워드의 변수는 같은 스코프 내에 중복 선언이 허용됨 → 변수값이 재할당 되는 부작용
하지만 let이나 const 키워드의 변수는 같은 스코프 내에서 중복 선언이 허용되지 않음 → SyntaxError 오류 발생시킴
- 전역과 전역 스코프: 전역 변수는 어디서든지 참조 가능
- 지역과 지역 스코프: 자신의 지역스코프와 하위 지역 스코프에서 유효
스코프 체인
- 함수의 중첩(함수 몸체 내부에서 함수가 정의된 경우)에서 몸체 내부의 함수인 ‘중첩 함수’와 중첩 함수를 포함하는 함수인 ‘외부 함수’간에 스코프가 중첩될 수 있음 ⇒ 스코프가 계층적 구조를 가질 수 있음
전역 ← outer 지역(외부 함수) ← inner 지역(중첩 함수)
- 이처럼 스코프는 하나의 계층적 구조로 연결되며, 최상위 스코프는 전역 스코프임
- 이렇게 연결된것을 스코프 체인이라고 함
⇒ 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 식별자를 검색함 - 물리적인 실체로 존재함, 위 계층과 유사한 자료구조인 렉시컬 환경을 실제로 생성함
변수 선언 실행 → 변수 식별자 자료구조(렉시컬 환경)에 키 등록 → 변수 할당 시 식별자에 해당하는 값 변경 - 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있음
하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없음 - 스코프 체인에 의해 함수도 검색 가능함 → 그러므로 식별자를 검색하는 규칙이라고 표현하는 것
함수 레벨 스코프
- 지역은 함수 몸체 내부, 지역은 지역 스코프를 만듬
⇒ 코드 블록이 아닌 함수에 의해서만 지역스코프 생성된다는 의미 - 함수 몸체외에 모든 코드 블록이 지역스코프를 만드는데 이를 블록 레벨 스코프라고 함
- 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드블록만을 지역 스코프로 인정함(= 함수 레벨 스코프)
var x = 1;
if(true) {
// var 키워드로 선언된 변수는함수의 코드블록만을 지역 스코프로 인정함
// 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역변수임
var x = 10;
}
console.log(x); // 10 - 의도치 않게 변수 값이 변경되는 부작용 발생함
렉시컬 스코프
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // ?
bar(); // ?
- bar 함수의 상위 스코프가 무엇인지에 따라 두가지 패턴을 예측할 수 있음
- 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정함
→ bar 함수의 상위 스코프는 foo 함수의 지역 스코프와 전역 스코프 일 것임
⇒ 동적 스코프: 함수가 호출되는 시점에 동적으로 상위 스코프를 결정해야함 - 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정함
→ bar 함수의 상위 스코프는 전역 스코프일 것임
⇒ 정적 스코프(렉시컬 스코프): 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정됨
- 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따름
⇒ 즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프임
함수 정의가 실행되어 생성된 함수객체는 결정된 상의 스코프를 기억함. 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문임
728x90
'개발 & 프로그래밍 > JavaScript & TypeScript' 카테고리의 다른 글
this 바인딩 - JavaScript (0) | 2025.04.23 |
---|---|
this 정의 - JavaScript (0) | 2025.04.23 |
함수 호이스팅과 다양한 형태 - JavaScript (0) | 2025.04.23 |
함수(Function)의 정의 - JavaScript (0) | 2025.04.23 |
객체(Object)의 정의 - JavaScript (0) | 2025.04.23 |