자바스크립트 스코프

클로저를 설명하기 위해선 스코프에 대한 개념이 필수이기 때문에 먼저 설명을 해보려 한다.

스코프

Scope 번역하면 ‘범위’ 라는 의미를 가진다. 즉, 변수가 가지는 유효한 범위를 스코프라고 이해하면 되겠다.

스코프가 왜 있어야 할까?

변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름을 찾아내기 위한 규칙이기 때문이다.

디렉토리 없는 컴퓨터를 생각해보면 필요성을 절감할 수 있을 것이다.

JS 에는 2가지의 스코프가 있다.

• 전역 스코프
• 지역 스코프

각각의 스코프에 변수를 담는다면 다음과 같이 된다.

• 전역 변수
• 지역 변수
• 키워드를 쓰지않고 변수를 사용하면 window.변수명 으로 들어가게 된다 delete 명령어로 삭제가 가능하며, var 의 경우 호이스팅은 실행되지 않는다.

참조하는 입장에서는 다음과 같은 규칙을 따른다.

1. 자신이 속한 스코프를 먼저 탐색하고 없다면 상위 스코프를 탐색한다.
2. 하위 스코프는 탐색하지 않는다.

var 를 쓰지 않는다고 가정하면 ( var 는 호이스팅 되기 때문에 쓸데없이 복잡하다 )

let 과 const 는 전 게시물에서 봤다시피 함수 스코프를 가진다.

let, const 변수의 스코프

let x = 10;
{
  console.log(x); // error 발생!
  let x = 100;
}

자신이 있는 스코프를 먼저 탐색하기 때문에 선언전에 사용했다고 error 를 발생 시킨다.

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

그렇다면 위의 동작은 충분히 이해가 될 것 같다.

함수는 어떨까?

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // 1
bar(); // 1

함수의 스코프는 해당 함수가 선언 되었을 때의 스코프를 가진다!

그래서 bar() 함수가 foo() 안에서 실행 되었지만 스코프는 전역이기 때문에 1 을 출력하게 된다.

P.s let 과 const 가 없던시절 라이브러리를 만들 때 var 변수의 전역으로 퍼짐을 막기위해 즉시 실행 함수를 사용했다.