스코프(scope), 스코프체인(scope chain), 클로저(closure)

⭐스코프

 

let x = 'global';
function ex(){
	let x = 'local';
    x = 'change';
}
ex();
console.log(x);
//x = global



let x = 'global';
function ex(){
	x = 'local';
    x = 'change';
}
ex();
console.log(x);
//x = change

 

⭐ 스코프체인

- 스코프간의 상하관계, 전역범위를 찾아간다.

 

⭐ 렉시컬 스코프

- 코드가 적힌 순간 스코프가 정해진다. = 정적스코프

 

⭐ 클로저

 

for(let i=0; i < 당첨숫자.length; i++){
      setTimeout( function (){
      console.log(당첨숫자[i]);
  },1000)
}

 

- 함수와 함수가 선언된 정적 환경, 조합이다.

- 함수와 함수가 접근할 수 있는 스코프가 클로저 관계를 맺는다.

 

ex) 반복문 내의 비동기 함수가 들어갈 시, 클로저 문제가 생긴다.

 

⭐ 클로저 문제 해결법

 

for(let i=0; i < 당첨숫자.length; i++){
    setTimeout(function (){
    console.log(당첨숫자[i]);
  },(i+1)*1000);
}

 

- 1초마다 당첨숫자 배열의 요소가 하나씩 출력된다.

- 클로저의 특성으로 문제를 해결할 수 있다.

- 1초전에 이미 반복문이 전부 실행되는 문제를 피하기 위해 배열의 index마다 *1초를 계산해서 순서대로 출력될 수 있게 해보았다. 

 

for(let i=0; i < 당첨숫자.length; i++){
  function 클로저(j) {
    setTimeout(function (){
    console.log(당첨숫자[j]);
  },(j+1)*1000)}
  클로저(i);
}

 

 

 

 

+) 즉시실행함수

 

for(let i=0; i < 당첨숫자.length; i++){
  (function 클로저(j) {
    setTimeout(function (){
    console.log(당첨숫자[j]);
  },(j+1)*1000)})(i);
}

 

 - 위 코드도 마찬가지로 클로저 문제를 피할 수 있다.

 

 

+)

함수가 항상 기준이 되어 변수를 찾는다.

스코프 체인에 따라서 변수를 찾는다.

비동기적으로 실행되는 함수는 실행되는 순간에야 변수가 무엇인지 찾는다.