📚 Closure 복습

📚 Closure 복습

• 클로저란 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수를 가리킨다.
• 예를 들어

		function outer(){
          let num=0;
		  function inner(){
            num++;
            console.log(num)
          }
          return inner;
        }

이 함수를 output에서 넣고 // output=outer();
output()을 콘솔에 찍으면 자동으로 1,2,3... 증가하는 것을 볼 수 있다.

• outer() 함수를 호출하면 inner 함수에서 변수 x가 자신의 유효 범위가 아님에도, outer() 함수에 정의된 변수를 참조한다. 이 때 inner() 함수를 클로저라고 하며, outer() 함수에 정의된 변수 x를 자유 변수라고 한다.
• 클로저 이름의 의미는 "자유 변수에 닫혀있다", "자유 변수에 엮여있다"는 의미이다.

클로저로 인해 발생할 수 있는 문제

• 비동기로 동작하는 함수를 사용하는 함수 내에서 반복문을 작성할 때, 클로저로 인해 문제가 발생할 수도 있다.

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

count();

를 콘솔에 찍으면 10을 9번 출력한다.
왜냐하면 count함수를 호출하면, 반복문을 총 9번 수행하는데, 반복문을 수행할 때마다 변수 i를 공유한다.
그리고, 컴퓨터는 연산 속도가 엄청나므로 setTimeout() 함수를 호출하는 반복문 9번을 수행하는데 1초가 안걸린다.그래서 처음 i === 1일 때 1초 뒤에 호출하려고 했던 console.log(i)가 실행되기 전에 i === 10이 된 상태이므로 10이 9번 출력되는 것이다.

이에 대한 해결책으로,

• for 문에서 변수 선언을 var가 아닌 let 키워드를 사용한다.
• let은 블록 스코프( block scope )이기 때문에, 반복문의 각 단계가 같은 변수 i를 공유하지 않는다.

function count() {
    for (let i = 1; i < 10; i++) {
        setTimeout(function(){
            console.log(i);
        }, 1000);
    }
}
count();