스코프 (모던 자바스크립트 Deep Dive)

 

 

스코프란?

• 모든 프로그래밍 언어에서 중요한 개념이다.
• var과 let, const로 선언한 스코프는 다르게 동작한다.
• 함수의 매개변수는 함수 내부에서만 참조 가능하며 외부에서는 참조할 수 없다.
  • 매개변수의 스코프는 함수 내부이기 때문이다.
• 스코프는 식별자가 유효한 범위이다.

var x = 'global';

function foo() {
	var x = 'local';
	console.log(x); // local
}

foo();

console.log(x); // global

• 함수 외부와 내부에서 같은 이름으로 선언된 변수가 있지만 참조할 때 자바스크립트 엔진은 두 개의 변수 중 어떤 변수를 참조해야할지 결정한다.
  • 이는 스코프에 따라 정해진다.
• 스코프 개념이 없다면 같은 이름을 갖는 변수는 프로그램 내에서 충돌이 일어날 것이다.
• 파일 또한 폴더 디렉토리 개념이 없다면 하나의 파일 이름만 사용 가능할 것이다.

var의 중복 선언 var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 해도 에러가 나지 않는다. let, const는 이를 허용하지 않는다.

 

13.2 스코프의 종류

• 전역
  • 코드의 가장 바깥 영역
• 지역
  • 함수 몸체 내부

 

13.2.1 전역과 전역 스코프

• 전역 변수는 어디서든지 참조 가능하다.

 

13.2.2 지역과 지역 스코프

• 자신의 지역 스코프와 하위 지역 스코프에서만 유효하다.

 

13.3 스코프 체인

• 함수도 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다.
  • 스코프가 함수의 중첩으로 인해 계층적인 구조를 가진다.
    • 이런 연결된 계층을 스코프 체인이라 한다.
• 중첩 함수의 지역 스코프를 감싸는 외부 함수의 스코프를 상위 스코프라고 한다.
• 모든 지역 스코프의 최상위 스코프는 전역 스코프이다.
• 자바스크립트 엔진은 변수를 참조할 때 변수가 사용된 스코프를 시작으로 상위 스코프로 이동하며 변수를 검색한다.
• 스코프 체인은 물리적 실체로 존재하며 자바스크립트 엔진은 코드를 실행하기 전 렉시컬 환경을 실제로 생성한다.

 

13.3.1 스코프 체인에 의한 변수 검색

• 하위 → 상위 로 변수를 검색할 뿐, 그 반대는 없다.
• 그 의미는 즉슨 상위에서 선언된 변수는 하위에서 사용될 수 있지만 그 역은 성사되지 않는다.

 

13.3.2 스코프 체인에 의한 함수 검색

• 함수 또한 식별자에 할당되기 때문에 스코프를 가진다.
• 변수와 같은 원리로 스코프를 가진다.

 

13.4 함수 레벨 스코프

• 블록 레벨 스코프
  • 대부분의 언어들은 코드블록을 지역 단위로 만든다.
• 함수 레벨 스코프
  • var 키워드는 함수의 코드 블록만 지역 스코프로 인정한다.

var i = 10;

for (var i = 0; i < 5; i++) { // 전역 변수 i를 사용한 것
	console.log(i); // 0 1 2 3 4
}

// 값이 변경 되었다.
console.log(i); // 5 

• 블록 레벨 스코프를 지원하는 let, const를 사용하자!

 

13.5 렉시컬 스코프

var x = 1;

function foo() {
    var x = 10;
    bar();
}

function bar() {
    console.log(x);
}

foo(); // 1
bar(); // 1

• 위의 결과는 상위 스코프가 무엇인지 따라 결정된다.
  • 함수를 어디서 호출했는지?
  • 함수를 어디서 정의했는지?
• 동적 스코프
  • 함수를 어디서 호출했는지에 따라 상위 스코프를 결정한다.
• 정적 스코프 (렉시컬 스코프)
  • 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다.
• 자바스크립트는 렉시컬 스코프를 따라 상위 스코프를 결정한다.
  • 함수의 상위 스코프는 자신이 정의된 스코프다.
  • 자신이 정의된 스코프를 기억하고 다른 함수 내부에서 호출되어도 정의된 스코프를 기억하고 있다.
• bar()은 전역에서 정의되었기 때문에 전역에 정의된 x를 가져간다.
  • 그러므로 둘 다 1을 뱉는다.