Scope

Scope (스코프)

• 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위
• 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙

 

구분

• 전역 스코프 (Global Scope)
          ┌ 전역 : 코드의 가장 바깥 영역
          └ 어디에서든지 참조가 가능하다.
• 지역 스코프 (Local Scope / Function-level scope)
          ┌ 지역 : 함수 몸체 내부
          ├ 자신이 선언된 지역과 하위 함수에서만 참조 가능하다.
          ├ 자신의 지역 스코프와 하위 스코프에서 유효하다.
          └ 함수에 의해서만 지역 스코프가 생긴다.

 

 

동작 과정

	var a = 1;
	function foo () {
	var b = 2;
	console.log(a);
	console.log(b);
	}
	foo();
	console.log(b); // 'b'에 접근할 수 없다.

view raw scope.js hosted with ❤ by GitHub

┌ 함수 내부에 없는 변수 a를 불러오는 경우
├     ┌ 식별자 결정 과정을 통해 함수 내부에서 먼저 a라는 변수를 찾는다.
├     └ 함수 내부에 변수 a가 없어 외부에서 변수 a를 찾아 불러온다.
└ 변수 b는 본인이 속한 함수내에서만 접근가능하도록 범위가 정해진다.

 

 

규칙

• Scope는 함수를 호출할 때가 아니라 선언할 때 생긴다.

 

ⓐ 함수 내부에서 변수를 참조할 경우

• 함수 내부에서 변수를 먼저 찾는다.
• 함수 내부에 X -> 함수 외부에서 찾는다.

 

ⓑ 함수 내부, 외부에 동일한 변수명이 존재할 경우

• 함수에서는 내부의 변수를 우선시 한다.

 

ⓒ 함수 내부, 외부에서의 규칙

• var의 경우, 내부 / 외부를 판별하는 기준은 함수이다.
• 함수 내부에서 선언된 변수? -> 함수 외부에서 참조 불가능하다.
• 함수 외부에서 선언된 변수? -> 함수 내부에서 참조 가능하다.

 

 

특징

• var 키워도르 선언된 변수는 함수 레벨 스코프를 따른다.
          ┌ 함수 레벨 스코프
          ├ 함수 내에서 선언된 지역 변수는 함수 내에서만 유효하다.
          └ 함수 외부에서는 참조 불가하다.
• let, const 키워드로 선언된 변수는 블록 레벨 스코프를 따른다.
          ┌ 블록 레벨 스코프
          ├ 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하다. 코드 블록 외부에서는 참조 불가하다.
          └ 코드 블록 내부에서 선언한 변수는 지역 변수이다.

 

 

종류

전역 스코프

• 전역에 변수를 선언하면 이 변수는 어디서든지 참조할 수 있는 전역 스코프를 갖는 전역 변수가 된다.
• var 키워드로 선언한 전역 변수는 전역 객체이다.
• 전역 스코프의 문제점
          ┌ 변수 이름 중복의 위험성
          └ 의도치 않은 재할당에 의한 상태 변화로 코드를 예측하기 어렵다.

 

비 블록 레벨 스코프

 

	if (true) {
	var x = 5;
	}
	console.log(x); // 5;

view raw scope.js hosted with ❤ by GitHub

• 변수 x는 코드 블록 내에서 선언한다.
• 자바스크립트는 블록 레벨 스코프를 사용하지 않는다.
• 코드 블록 내에서 선언되었지만 함수 밖에서 선언된  변수는 모두 전역스코프를 갖게된다
          └ 변수 x는 전역 변수

 

함수 레벨 스코프

	var x = 1;
	if (true) {
	// x는 전역 변수, 이미 선언된 전역 변수 x가 있어 x 변수는 중복 선언
	var x = 10;
	}
	console.log(x); // 10

view raw scope.js hosted with ❤ by GitHub

• var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정한다.
• 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역변수가 된다.

 

	var i = 10;
	// var 키워드로 for 문에서 선언한 변수 i는 전역변수
	// 이미 선언한 전역 변수 i가 있으므로 중복 선언
	for(var i = 0; i < 5; i++) {
	console.log(i) // 0 1 2 3 4 5
	}
	// 의도치 않게 변수와 값이 변경
	console.log(i) // 5

view raw scope.js hosted with ❤ by GitHub

• for 문의 변수 선언문에서 var 키워드로 선언한 변수도 전역 변수가 된다.