클로저와 스코프체인의 이해를 위한 주절거림

생각..

자바스크립트가 렉시컬 스코프 환경을 따른다는건 알고있고

렉시컬 스코프환경 즉, 정적 스코프는 함수의 호출이아닌 선언에 의해서 범위가 결정된다

렉시컬스코프를 가장 이해하기 쉬운 예제 코드는 아래이다.

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

var x = "global";

function outer() {
  var x = "local";
  inner();
}

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

outer() //global
inner() //global

아래와 같이 렉시컬 스코프는 내부 함수에서 찾을 수 없는 변수이면 상단의 외부함수로 올라가 찾는다.

그러다가 최종적으로 전역변수 범위까지 올라가서도 찾을 수 없으면 에러를 나타내는 것이다.

동적 스코프

var x = "global";

function outer() {
  var x = "local";
  inner();
}

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

outer() //local
inner() //global

동적 스코프는 렉시컬 스코프와 다르게 함수의 호출에 따라 범위를 정하기 때문에 outer()함수안에서 호출된 inner()는

inner()함수안에는 x가 없기에 호출된 자리에서 한번 올라가서 var x = "local"을 만나 x변수를 찾게되며

local을 출력하게 되는거다.

 

 

그래서

클로저함수를 이해할때 렉시컬 환경에 의해 함수안에 함수가 선언되어 있는 경우 

클로저

이미 생명주기가 끝난 외부 함수의 변수를 참조하는 함수

function outerFunc() {
	var x = 10;
	var innerFunc = function () {console.log(x);}
	return innerFunc();
}

var inner = outerFunc();
inner();

1. 전역 실행 컨텍스트가 생성된다.
2. 변수객체의 inner, outerFunc가 생성되고, scope는 전역객체가 된다.
3. inner() - outerFunc()가 실행됨에 따라, outerFunc()실행 컨텍스트가 생성된다.
4. outerFunc() 안의 변수 x, innerFunc가 생성되고, scope는 outerFunc 변수객체가 된다.
5. outerFunc()가 innerFunc를 실행하며 리턴한다.

---

1. innerFunc() 실행 컨텍스트가 생성된다.
2. innerFunc()의 scope는 innerFunc안에 변수객체가 없음에 따라, outerFunc의 변수를 가르킨다.
3. 이에따라, innerFunc()의 scope는 outerFunc()가 된다.

outerFunc() 함수는 종료됐지만, innerFunc()의 실행컨텍스트는 유지되고 있다.

 

var c = 4;

function outer() {
  var a = 1;
  var b = 3;

  return function inner() {
    var a = 2;
    console.log(b); // 3
  }
}

var someFunc = outer();
someFunc();

• outer 함수는 inner 함수를 return 하고 있고 someFunc에는 outer 함수의 실행결과 값이 들어가기 때문에 inner 함수가 들어가게 된다.
• 그런데, var someFunc = outer(); 에서 outer 함수를 호출해서 실행이 완료되면 outer 함수 내 지역 변수들은 사라질 것 같지만 사라지지 않는다. 몇몇 프로그래밍 언어에서는 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재하지만 자바스크립트는 함수를 리턴하고 리턴하는 함수가 클로저를 형성하기 때문이다.
• 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.
• someFunc는 outer이 실행될 때 생성된 inner 함수의 인스턴스에 대한 참조다. inner의 인스턴스는 변수 b가 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 someFunc가 호출될 때 b는 사용할 수 있는 상태로 남게된다.
• 즉, 원래는 함수 내부에 선언한 변수는 함수가 끝나면 사라지지만, 클로저가 스코프 체인을 계속 들고 있으므로 outer 함수 내부의 변수를 참조할 수 있게 된다.

그럼 이러한 클로저는 어디에 써먹을 수 있을까?

 

함수의 캡슐화

만약 어떤 함수에서 사용하는 전역변수가 있을때, 이 변수를 다른곳에서 사용하지 못하게 하고 싶을때 사용할 수 있다. 

아래의 코드는 전역변수 age를 활용해 해당 Person객체의 BrotherAge를 구하는 코드이다.

var age = 13
var Person = function (){
        var myBrotherAge = age - 5
        console.log(myBrotherAge)
}
Person()

위와 같이 전역변수 age를 Person내부가 아닌 곳에서 사용할 수 없도록 하고 싶다고 하자.

 

var Person = (function (){
    var age = 13
    return (function(){
        var myBrotherAge = age - 5
        console.log(myBrotherAge)
    })
})()
Person()

이때 위와 같이 클로저를 사용하여 해당하는 전역변수 age를 접근할 수 있는 방법이 없어진다. 외부에서 Person객체를 통해 접근해봐도 클로저함수가 반환되기때문에 age는 접근할 수 없게 된다. 

루프안에서의 클로저 사용 시 주의점 ( 이해와 공부가 더 필요  )

function countSeconds(howMany) {
  for (var i =1; i <= howMany; i++) {
    setTimeout(function () {
      console.log(i);
    }, i * 1000 );
  }
};
countSeconds(10)

위와 같은 코드를 실행했을때 결과가 어떻게 나올것 같은가?

자칫 찍히는 로그가 1~11까지 1초마다 찍힌다고 생각할 수도 있겠지만 위의 결과는 11이 1초에 한번씩 10번 찍힌다.

첫번째 SetTimeout의 함수가  실행되기전에 루프문이 끝나게 되며, 루프문에 따라 두번째 매개변수인 시간 매개변수엔 i값이 차례로 들어가지만 이후에 setTimeout내부 함수가 참조하는 i는 이미 howMany만큼 증가한 i값을 참조하게 된다. 이미 닫힌 setTImeout함수의 내부 함수인 익명함수는 외부의 i를 계속 추적하기에 생기는 결과인 것이다.

 

만약 10초 동안 1부터 11까지 로그를 찍고싶다면 setTimeout밖에 함수하나를 덧씌운 후 i값을 복제해 사용하면 된다.

function countSeconds(howMany) {
  for (var i =1; i <= howMany; i++) {
    var count = function (current){
        setTimeout(function () {
      console.log(current);
    }, i * 1000 );
  }
  count(i)
    }
    
};
countSeconds(10)

이러면 내부 클로저 함수가 참조하는 값은 계속 변하는 i가 아닌 고정값 current가 되기 때문이다.