7. 스코프

유효범위로서, 참조 대상 식별자(변수, 함수 이름 등)를 찾아내기 위한 규칙

스코프의 구분

• 전역 스코프(Global scope) : 코드 어디서나 참조 가능
• 지역 스코프(Local scope or Function-level scope) : 함수 자신과 하위 함수에서만 참조 가능

▶ 모든 변수는 스코프를 가진다.

• 전역 변수(Global variable) : 전역에서 선언된 변수이며, 어디서든 참조 가능
• 지역 변수(Local variable) : 지역(함수)내에서 선언된 변수이며, 그 지역과 하부지역에서만 참조 가능

JavaScript 스코프의 특징

대부분의 프로그래밍 언어(C-family language) 는 블록 레벨 스코프를 따르나, JavaScript는 함수 레벨 스코프를 따른다.

• 블록 레벨 스코프 : 코드 블록({}) 에서 유효한 스코프

• 함수 레벨 스코프 : 함수 코드 블록에서 선언된 변수는, 함수 코드 블록 내에서 유효하고 그 안에서만 사용 가능

• ECMAScript 6에서 도입된 let keyword를 사용하면 블록 레벨 스코프를 사용 가능

  ex)

  var x = 0; { var x = 1; console.log(x); // 1 } console.log(x); // 1

  let y = 0; { let y = 1; console.log(y); // 1 } console.log(y); // 0

전역 스코프(Global scope)

전역에 변수를 선언하면 어디서든 참조할 수 있는 변역 스코프를 갖는 전역 변수가 됨

JavaScript는 타 언어와 다르게, 특별한 시작점이 없어서 전역 변수나 함수를 선언하기 쉽다.

⇒ 변수 이름이 중복될 수 있고, 의도치 않은 재할당이 발생하기 쉽다.

ex)

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

비 블록 레벨 스코프(Non block-level scope)

JavaScript는 블록 레벨 스코프를 따르지 않기에, 함수 밖에서 선언된 변수는 코드 블룩 내에서 선언되었더라도 모두 전역 스코프를 갖게된다.(var로 선언된 변수)

ex)

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

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

JavaScript는 함수 레벨 스코프를 따른다.

⇒ 함수 내에서 선언된 매개변수와 변수는 함수 외부에서 유효하지 않다.

• 전역변수와 지역변수가 중복되는 경우, 지역변수를 우선으로 참조

렉시컬 스코프(Lexical scope)

: 해당 함수의 선언 위치에 따라 상위 스코프가 결정된다.

↔ 동적 스코프 : 함수를 호출한 위치에 따라 상위 스코프가 결정

암묵적 전역

• 선언하지 않은 식별자를 사용하여도 참조 에러가 발생하지 않으며, 마치 선언된 변수처럼 동작.
• 선언되지 않은 식별자에 값을 할당하면 전역 객체의 프로퍼터가 되기 때문
• JavaScript 엔진은 선언되지 않은 식별자에 대한 y=10을 window.y=10으로 해석
• 선언되지 않은 식별자 y는 전역 객체의 프로퍼터가 되어 전역 변수처럼 동작

⇒ 암묵적 전역!!

선언되지 않았으므로, 변수 호이스팅은 발생하지 않는다.

변수가 아닌 프로퍼터는 delete 연산자로 삭제 가능

최소한의 전역 변수 사용

전역 변수 객체를 만들어 사용 (더글라스 크락포드의 제안)

ex)

var MYAPP = {};

MYAPP.student = { name: 'Lee', gender: 'male' };

console.log(MYAPP.student.name);

즉시실행함수를 이용한 전역변수 사용 억제

즉시 실행 함수 사용 ⇒ 즉시 실행되고 그 후 전역에서 바로 삭제

ex)

(function () { var MYAPP = {};

MYAPP.student = { name: 'Lee', gender: 'male' };

console.log(MYAPP.student.name); }());

console.log(MYAPP.student.name);