TIL | JavaScript Scope

Global Scope(전역 스코프) & Local Scope(지역 스코프)

Scope란 '범위'를 의미한다. 식별자는 자신이 어디에서 선언 됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 갖는다. 전역 스코프는 코드 전체에 걸쳐 선언되어 있어 어떤 곳에서도 사용할 수 있는 것을 의미하며 지역 스코프는 특정 영역 안에서 선언 되어 그 범위(영역) 안에서만 접근할 수 있는 것을 의미한다.

var name = 'kitty';

function mention(){
	name = 'doraemon';
	var a = 'Hello';
}

mention(); // 함수 실행
console.log(name); // kitty
console.log(a); // a is not defined

위의 코드에서 name은 전역 변수로 선언 되었다. 함수 mention에서 재할당, 수정 되어 'doraemon' 값을 반환한다. 그에 반해 함수 mention에서 선언 할당 된 지역 변수 a는 전역에서 console.log를 하더라도 지역 변수이므로 정의되어 있지 않는 것으로 결과가 나온다.

var name = 'doraemon';

function sayHi() {
	var name = 'kitty';
	return `Hello ${name}`;
}

sayHi(); // Hello kitty

name은 'doraemon'을 할당하고, sayHi 함수의 name은 'kitty'을 할당한다. 두 name 변수는 같은 이름을 가지지만 첫 번째 name은 전역 스코프, 함수 내의 name은 함수 내에서만 존재하고 사용될 수 있는 지역 스코프로 활용되고 있다.

Scope Chain (스코프 체인)

Scope chain 이란 식별자를 찾는 일련의 과정으로 새로 정의된 스코프는 상위 스코프에 접근 가능하다. 가장 가까운 내부 스코프부터 스코프를 포함하는 상위 스코프, 그리고 전역 스코프의 외부까지 체인이 연결되어 있어 외부 식별자를 참조 접근 가능하다.

var y = 2;

function outter(x){
	y = 3;
	var z = 3;
	return function inner(){
		z++;
		return x + y + z;
	};
}

outter(1); // 1 + 3 + 4 = 7

function-level scope & block-level scope

function level scope

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

var a = 'a';

function b(){
	var b = 'b';
	return b;
}

console.log(a); // a
console.log(b); // b

함수 내부에서 선언된 변수 b는 전역에서 확인할 수 없으며 전역 변수인 a는 참조 가능하다.

block level scope

블록 레벨에서 유효한(참조 가능한) 스코프를 의미한다.

var a = 'a'
if(true){
  var a = 'a';
  var b = 'b';
  console.log(a) // a
  console.log(b) // b
}

console.log(a) // a
console.log(b) // b is not defined

블록 밖에서 a를 console로 찍으면 a는 전역 변수 a를 통해 'a'가 결과값으로 반환되지만 b는 변수 b가 if 구문 안의 블록 내에서 선언된 블록레벨의 변수이기 때문에 결과값을 찾을 수 없다.