💡 스코프 : 식별자가 유효한 범위
- 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라고 한다.
- 식별자 결정 : 자바스크립트 엔진이 이름이 같은 두 개의 변수 중 어떤 변수를 참조해야 할 것인지 결정하는 것.
- 자바스크립트 엔진은 코드 실행 시 코드의 문맥을 고려한다. 따라서 코드의 위치에 따라 같은 코드가 다른 결과를 만들어 낸다.
- 유효범위인 스코프를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 한다.
- 즉 스코프는 네임스페이스다.
코드는 전역과 지역으로 구분할 수 있다.
변수는 자신이 선언된 위치에 의해 스코프가 결정된다.
- 전역이랑 코드의 가장 바깥 영역을 말한다.
- 전역은 전역 스코프를 만든다.
- 전역 변수는 어디서든지 참조할 수 있다.
- 지역이란 함수 몸체 내부를 말한다.
- 지역은 지역 스코프를 만든다.
- 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.
- 지역변수는 자신이 선언된 지역 + 하위 지역에서만 참조 할 수 있다.
- 즉, 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.
함수의 중첩 : 함수 몸체 내부에서 함수가 정의된 것
중첩된 함수를 중첩함수, 중첩 함수를 포함하는 함수를 외부함수(outer function)이라 한다.
- 함수의 지역 스코프도 중첩 가능
- 스코프가 함수의 중첩에 의해 계층적 구조를 가진다.
- 외부함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다.
var x = "global x";
var y = "global y";
function outer() {
var z = "outer'ss local z";
console.log(x); //global x
console.log(y); // global y
console.log(z); // outer's local z
function inner() {
var x = "inner's local x";
console.log(x); //inner's local x
console.log(y); // global y
console.log(z); //outer's local z
}
inner();
}
outer();
console.log(x); //global x
console.log(z); //errror- 위 코드 예시에서 inner 함수는 outer함수의 중첩함수이다.
- outer 함수는 inner 함수의 상위 스코프이다.
- 전역 스코프는 outer 함수의 상위 스코프이다.
- 전역 > outer 지역 > inner 지역
- 이처럼 모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다.
- 이렇게 스코프가 계층적으로 연결된 것 :
스코프 체인
- 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작해 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.
- 스코프 체인은 물리적인 실체로 존재한다.
- 자바스크립트 엔진은 코드를 실행하기 앞서 위 그림과 유사한 자료구조인 렉시컬 환경을 실제로 생성한다.
- 변수 선언이 실행되면 변수 식별자가 렉시컬 환경에 key로 등록되고 → 변수 할당이 일어나면 렉시컬 환경의변수 식별자에 해당 값을 변경한다. 변수 검색도 렉시컬 환경에서 이뤄진다.
var x = "global x";
var y = "global y";
function outer() {
var z = "outer'ss local z";
console.log(x); //global x
console.log(y); // global y
console.log(z); // outer's local z
function inner() {
var x = "inner's local x";
console.log(x); //4. inner's local x
console.log(y); //5. global y
console.log(z); //6. outer's local z
}
inner();
}
outer();
console.log(x); //global x
console.log(z); //errror- 4→ 지역스코프에 x 있는지 검색 → 있으니 그 값 반환
- 5 → inner 함수 지역 스코프에 y 선언 검색 → 없으므로 outer 함수 지역 스코프에 y 확인 → 없으므로 전역 스코프 y 확인
- 위로 올라가면서 검색을 하므로 하위 스코프에서만 유효한 변수를 상위 스코프에서 참조할 수 없다.
function foo() {
console.log("global function foo");
}
function bar() {
function foo() {
console.log("local function foo");
}
foo(); // 1. bar scope 내 foo 검색 -> local function foo
}
bar();- 함수 선언문으로 함수 정의 시 런타임 이전에 함수 객체가 먼저 생성
- 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적 선언 및 해당 식별자에 생성된 함수 객체를 할당 → 함수도 식별자에 할당되는 것이므로 스코프를 갖는다.
- 모든 함수는 함수 이름과 동일한 이름의 식별자에 할당된다.
- 1 ⇒ foo 함수 호출 시 함수를 가리키는 식별자 foo를 검색한다.
- 따라서 함수도 식별자에 할당되어 스코프를 가지므로 일반 변수와 다를 것이 없다.
- 위의 예시에서는 foo() 가 실행된 1의 스코프인 bar의 스코프 내에서 foo를 검색하고 있으니 그걸 반환
- 지역 : 함수 몸체 내부
- 지역은 지역 스코프를 만든다
- 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다.
→ 다른 언어들은 함수 몸체에서 뿐만 아니라 모든 코드 블록 ( if, for, while … )이 지역 스코프를 만든다
→ 이를 블록 레벨 스코프라고 한다.
- 하지만 var 키워드로 선언된 변수는 오직 함수의 코드 블록만을 지역 스코프로 인정한다.
→ 함수 레벨 스코프
쉽게 말하면, 함수 안에서만 새로운 지역 스코프가 형성된다!
단, let, const 키워드는 블록 레벨 스코프를 지원한다.
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // 1
bar(); // 1- bar의 상위 스코프에 따라 결정된다.
- 동적 스코프 : 함수를 어디서 호출했는지에 따라 상위 스코프를 결정한다.
- bar 의 상위 스코프는 foo 함수의 지역 스코프와 전역 스코프
- 함수를 정의하는 시점에는 함수가 어디서 호출될지 알 수 없다.
- 함수 호출 시점에 동적으로 상위 스코프를 결정한다.
- 렉시컬 스코프(정적 스코프) : 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다.
- bar 함수의 상위 스코프는 전역 스코프
- 상위 스코프가 동적으로 변하지 않고 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정된다.
- 자바스크립트는 렉시컬 스코프를 따른다.
- 함수 정의가 실행될 때 정적으로 결정하고, 함수 객체는 상위 스코프를 기억해 함수 호출때마다 함수상위 스코프를 참조한다.
- 동적 스코프 : 함수를 어디서 호출했는지에 따라 상위 스코프를 결정한다.