스코프와 스코프체인 렉시컬스코프

 

ES6(ES2015) 이후 var는 더 이상 사용되지 않고 let과 const가 사용됩니다.

스코프

---

var x = 'moon';

function ex(){
  var x = 'local';
  x = 'change';
}
ex(); 
alert(x);

ex함수를 호출하면은 alert를 실행 하였을때 무엇이 호출 될까?
alert(x); // moon이 호출된다.
함수안에 정의된 변수는 자신을 감싸고 있는 함수 바깥으로 빠져 나갈 수가 없다.

만약에 var을 뺀다면 어떻게 될까

 

 

var x = 'moon';

function ex(){
  x = 'local';
  x = 'change';
}
ex();
alert(x);

function 내에 변수가 존재하지 않는다면 x가 함수 바깥으로 나가서 

var x를 찾게 된다.  그로 인해 moon -> local -> change가 된다.

 

 

 

스코프 체인

---

var name = 'king';

function outer(){
  console.log('외부', name);
  function inner(){
    var enemy = 'nero';
    console.log('내부', name);
  }
  inner();
}
outer();
console.log(enemy);

위와 같이 function 안에 function이 들어있고 name이라는 변수를 console한다고 했을때
name에는 무엇이 나올지 생각해보자

위와 같은 결과가 나오게 된다.
inner라는 함수내에서 변수 name이 선언된 것이 없기 때문에 바깥으로 나가 outer함수 내부에 들어 가게 되고
그 내부에서도 변수 name이 없기 때문에 다시 바깥으로 나가 전역 변수 name을 찾기 때문에 king이라는 문자가 호출 되게 된다.
 inner함수 -> outer함수 -> 전역범위로 변수를 찾게 되는 이런 과정에서 만들어지는 상하 관계를 스코프 체인 이라고 한다.
마지막 줄 alert(enemy); 의 결과 값은 어떻게 될까 
결과적으로는nner함수 안에 변수 enemy 가 선언되어 있기는 하지만 호출 하지 못하고 오류가 발생한다.

왜냐하면 지역스코프(지역범위)로서
함수 내에서만 접근 가능하기 때문이다.

 

 

 

렉시컬 스코프(정적 스코프)

---

var name = 'zero';
function log(){
  console.log(name);
}
function wrapper(){
   name = 'nero';
   log();
}
wrapper();

위와 같은 코드에서 console의 결과 값을 예측해보자.

우선 wrapper함수안에는 변수로 정의되어 있지 않은 name이 있다. 그렇다면 이 name은 변수로 정의되어있는 name을 찾을 것이고 zero 값을 nero로 바꿀 것이다. 그리고 나서 console을 실행하기 때문에 결과 값이 zero가 아니라 nero로 바뀌게 된다.

var name = 'zero';
function log(){
  console.log(name);
}
function wrapper(){
   var name = 'nero';
   log();
}
wrapper();

이번에는 wrapper 함수 내의 name에 변수를 선언할 때의 console 결과 값을 예측해보자.

이전 코드와는 다르게 wrapper 함수 내의 name이 전역 변수 name에 영향을 미치지 못하기 때문에 

zero가 나오게 된다.

 

이 렉시컬 스코프에서 헷갈린 점이 있었는데 wrapper함수내에 log함수 호출이 있기 때문에 log 함수의 console.log(name)값이 wrapper안에 정의되어 있는 변수 name을 출력할 줄 알았지만 그것이 아니었다.

log함수를 실행한 그 시점에서  console.log(name)의 값을 얻기 위해서 변수 name을 찾아 전역범위로 나가게 된다.

이때의 name은 wrapper함수 내에서 영향을 받지 않은 값 zero이고 그것을 그대로 호출하기 때문에 zero의 값을 얻게 된다.