실행 결과에 대해 생각해보자.

var x = 'global';
function foo () {
  var x = 'function scope';
  console.log(x);
}
foo(); // ?
console.log(x); // ?

스코프(Scope)

: 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다.

스코프 구분

: 자바스크립트에서 스코프를 구분해보면 다음과 같이 2가지로 나눌 수 있다.

전역 스코프 (Global scope)
: 코드 어디에서든지 참조할 수 있다.

지역 스코프 (Local scope or Function-level scope)
: 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

: 모든 변수는 스코프를 갖는다. 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌 수 있다.

전역 변수 (Global variable)
: 전역에서 선언된 변수이며 어디에든 참조할 수 있다.

지역 변수 (Local variable)
: 지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

변수는 선언 위치(전역 또는 지역)에 의해 스코프를 가지게 된다. 즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고, 지역(자바스크립트의 경우 함수 내부)에서 선언된 변수는 지역 스코프를 갖는 지역 변수가 된다.

전역 스코프를 갖는 전역 변수는 전역(코드 어디서든지)에서 참조할 수 있다.
지역(함수 내부)에서 선언된 지역 변수는 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

var global = 'global';

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

console.log(global);
console.log(local); // Uncaught ReferenceError: local is not defined

자바스크립트 스코프의 특징

: 블록 레벨 스코프(block-level scope)를 따른다. 블록 레벨 스코프란 코드 블록({…})내에서 유효한 스코프를 의미한다. 여기서 “유효하다”라는 것은 “참조(접근)할 수 있다”라는 뜻이다.

함수 레벨 스코프(Function-level scope)

: 함수 내에서 선언된 매개변수와 변수는 함수 외부에서는 유효하지 않다.
아래의 변수 b는 지역 변수가 된다.

var a = 10;     // 전역변수

(function () {
  var b = 20;   // 지역변수
})();

console.log(a); // 10
console.log(b); // "b" is not defined

출력결과 :
function scope
global