JavaScript 기초 정리 - 03

스코프(Scope)와 클로져(Closure)

 

1. 유효범위(Scope)

• 전역 스코프 (Global scope) : 스크립트 전체에서 참조/어느 곳에서든 참조 가능
• 지역 스코프 (Local scope) : 정의된 함수 내에서만 참조/밖에서는 참조 불가능

- 유효범위의 특징

• 함수 단위의 유효범위 (function-level-scope)
• 변수명 중복 허용
• 암묵적 선언
• Lexical scoping (Static scoping)

1-1. function-level-scope

: 함수 코드 블럭 내에서 선언된 변수는 함수 코드 블럭 내에서만 유효.

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

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

 

1-2. 변수명 중복 허용

: 글로벌 영역에 변수를 선언하면 어느 곳에서든지 참조할 수 있는 전역 변수가 됨.

var global = 'global';

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

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

 

1-3. 암묵적 선언

: 명시적으로 변수 앞 var 을 붙여주지 않으면 암묵적 전역변수가 됨.

function foo() {
  a = 1;   // Throws a ReferenceError in "use strict" mode
  var b = 2;
}

foo();

console.log(a); // 1
console.log(b); // ReferenceError: y is not defined

 

1-4. Lexical scoping (Static scoping)

: JS는 함수가 선언된 시점에서의 유효범위를 갖음.                               

var number = 1234

function printNumber() {
  console.log(number);
}

function wrapper() {
  number = 4321
  printNumber();
}
wrapper(); // 4321

함수 실행 직전에 number의 값을 변경 해주었으므로 wrapper 함수를 실행 시켰을때 값이 변경됨

 

 

2. 스코프 체인 (Scope Chain)

: 새롭게 정의된 스코프는 상위의 스코프에 접근 가능.

: 변수를 검색할 때는 스코프 체인에서 가장 가까운 스코프부터 검색하며, 값을 찾으면 상위 스코프에 같은 이름의 값이 있더라도 찾은 값 을 반환하고 검색을 종료한다.

 

 

3. 클로저 (Closure)

: 함수와 그 함수가 선언되었을 때의 렉시컬환경(Lexical environment)과의 조합

 

"클로저는 공부가 더 필요함..."