[js] Scope (범위)

javascript 를 공부하면서 Scope 라는 말은 한번 쯤은 들어보셨으리라 생각됩니다.
변수나 함수가 선언된 위치와 방법에 따라 어디까지 영향을 미치는(접근을 당하거나 할 수 있는)지의 범위를 Scope라 말합니다.
Scope와 Closure에 대해 이해를 하는데 큰 도움이 되었던 게시물을 다시금 발견하게 되어 복습겸 올려봅니다.

본 게시물은 원문(http://1g.io/A3UJB3)의 번역본에 살을 조금 입힌 내용입니다. (원문 게시자 분께는 허락을 받지 않은 상태입니다.)
원문 게시자님께 감사드리며 발번역을 검수해주시고 다듬어 주신 검은태양(http://www.tranbot.net/)님께도 감사드립니다.

Scope (범위)

Scope 란 변수와 함수에 접근할 수 있는 문맥(Context)이며 함수가 실행되는 문맥(Context)입니다.
기본적으로 변수나 함수는 전역(global) 또는 지역(local) 범위로 선언할 수 있습니다.

변수는 이른바 “함수 Scope”라 불리는 범위를 가지며 함수의 범위도 마찬가지입니다.
(이는 자바스크립트에서 기본적으로 함수 역시 변수이기 때문입니다.)

Global Scope (전역 범위)

전역(global)은 코드 어디서든 접근할 수 있는 것을 의미합니다. 예제를 봅시다 :

var monkey = "Gorilla";

function greetVisitor () {
	return alert("Hello dear blog reader!");
}

코드를 실행하면 함수의 범위는 window 가 됩니다.
때문에, 전역(global)이 되므로 브라우저에서 실행되고 있는 모든 것들이 변수를 참조할 수 있고, 함수를 참조하고 실행할 수 있습니다.

Local Scope (지역 범위)

지역 범위(local scope)는 전역(global scope)과는 달리 코드의 특정 부분 – 이를테면 함수 안 – 에서 정의되며 그 안에서만 쓸 수 있다는 의미입니다. 예제를 보면;

function talkDirty () {
	var saying = "Oh, you little VB lover, you";
	return alert(saying);
}
alert(saying); // 에러

위 코드를 보면 saying 변수는 talkDirty 함수 안에서만 사용할 수 있음을 알 수 있습니다.

talkDirty 함수 외부에서는 saying 변수가 정의된 적이 없습니다. 주의: saying 변수를 선언할 때 var 없이 선언했다면 자동으로 전역(global) 변수로 선언됩니다.

함수가 중첩되었을 때 내부 함수는 외부 함수(자신을 포함한 함수) 범위에서 정의된 변수나 함수에 접근할 수 있습니다.

function saveName (firstName) {
	function capitalizeName () {
		return firstName.toUpperCase();
	}
	var capitalized = capitalizeName();
	return capitalized;
}
alert(saveName("Robert")); // 출력: "ROBERT"

보다시피 내부 함수 capitalizeName 은 아무 파라미터도 넘겨받지 않았지만 외부 함수인 saveName 함수의 파라미터 firstName에 접근할 수 있습니다. 다른 예제를 보면서 좀 더 명확히 이해해 봅시다.

function siblings () {
	var siblings = ["John", "Liza", "Peter"];
	function siblingCount () {
		var siblingsLength = siblings.length;
		return siblingsLength;
	}
	function joinSiblingNames () {
		return "I have " + siblingCount() + " siblings:nn" + siblings.join("n");
	}
	return joinSiblingNames();
}
alert(siblings()); // 출력: "I have 3 siblings: John Liza Peter"

두 내부 함수는 외부 함수의 siblings 배열을 사용할 수 있습니다. 또 내부 함수는 같은 레벨에 존재하는 다른 내부 함수에도 접근할 수 있습니다. 이 코드에서는 joinSiblingNames와 siblingCount가 서로를 호출할 수 있습니다.

하지만 siblingCount 함수의 siblingsLength 변수는 그 함수 내부 – 즉 함수 범위 에서만 사용할 수 있습니다.