Scope - 스코프 - 유효범위

스코프는 유효범위를 뜻하는 단어입니다.

자바스크립트는 특이하게 다른언어(c, java)처럼 블럭스코프가 아닌 함수스코프를 갖습니다

var a = 1;
function A() {
  var b = 2;
}
console.log(a); //1
console.log(b); //b is not defined

b는 함수내에 선언했으므로 외부에서 접근하려고하면 에러입니다.

그리고, 이런 코드가 동작합니다.

{
  var c = 3;
}
console.log(c); //3

이런.. 좋지않습니다.

그래서 ES6에는 블럭스코프를 지원하기위한 let, const 키워드가 등장했습니다.

위의 if문 예제의 var를 let이나 const로 변경하면 에러죠.

그리고 아래 예제를 보면 더욱 이해하기 쉽습니다(?)

let d = 4;
if(true) {
  let d = 5;
  console.log(d); //5
}
console.log(d); //4

함수얘기가 나왔으니, 실행컨텍스트와 호이스팅, 클로저를 함께보면

자바스크립트 작동을 이해하기 더 쉽습니다.

전역변수는 사실 잘 사용하지도 않고, 설명할것도없지만 버그가 생길 가능성이 큰

암묵적 전역변수만 아래에서 설명합니다.

function A() {
  a = 1;
}
A();
console.log(a); //1

A 함수를 실행하지않으면 오류입니다.

하지만 실행하면 a는 전역변수가 됩니다. (글로벌객체의 프로퍼티)

그래서 let, const 키워드를 꼭 붙여서 사용해야합니다.

그래서 개인적으로

let a = 1,
    b = 2,
    c = 3;

위와 같은 코드를 선호하지않습니다.

실수로 콤마를 빼먹으면 에러도 뱉지않는 전역변수가 되고 버그를 유발하며, 쓸데없는 메모리를 낭비하게 됩니다.

lexical scope (static scope), dynamic scope

렉시컬 스코프는 함수를 어디에서 선언하였는지에 따라 상위 스코프가 결정됩니다.

다이나믹 스코프는 반대로(?) 함수를 어디에서 호출하였는지에 따라 상위 스코프가 결정됩니다.

var a = 1;

function A() {
  var a = 2;
  B();
}

function B() {
  console.log(a);
}

A(); //1
B(); //1

다이나믹 스코프였다면, 결과는 다를겁니다.

A(); //2
B(); //1

스코프체인

id(식별자)를 찾기 위해 필요한것.

스코프가 유효범위라고 했죠?

스코프체인은 식별자가 어느정도 유효범위를 가지는지 알게해줍니다.

예를들어

function a(){
  var v1 = 1;
  console.log(v2); //ref error - not defined
  function b(){
    console.log(v1); //1
    var v2 = 2;
  }
}

위의 코드에서 b라는 함수의 스코프에서는 변수 v1, v2를 참조할수있죠?

b의 스코프에는 v2변수 밖에 없는데, 어떻게 v1을 참조할까요?

바로 스코프체인때문입니다.

스코프내에 다른 스코프가 있다면, 그것을 스코프체인 프로퍼티에 저장해놓는거죠.

그래서 b함수 스코프에서 v1을 사용하면, v1을 b함수 스코프에서 탐색하고,

없으면 이제 상위 스코프를 찾게되는데, 그 외부 스코프에 대한정보를 스코프체인이 갖고 있습니다.

한마디로 스코프체인의 탐색은 해당하는 이름을 찾거나 외부 스코프의 참조가 null이 될때 탐색을 멈춥니다.