[TDL] 05/14 Today's-Done-List

- JS스터디 사전 테스트

많이 구현해봐야겠다는 생각을 했다..
foreach, map 같은 메서드들 조차 정확히 기억나질 않아서 mdn으로 더블 체크해야 되는 경우면..
아직 코딩을 많이 하지 않아서, 손에 익지 않았다는 증거! 많이 많이 타이핑해보자!

---

- JS 문법 강의

• 클로저 (Closure)
  • https://www.youtube.com/watch?v=bwwaSwf7vkE 
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
  • https://hyunseob.github.io/2016/08/30/javascript-closure/

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

생각대로라면 1초 뒤에 콘솔 창에 1부터 9까지의 정수가 출력되어야 할 텐데,
실제로 돌려보면, 0-9까지의 정수를 출력하는 코드이지만 실제로 돌려보면 10만 10번 출력된다.
이유 : setTimeout()에 인자로 넘긴 익명 함수는 모두 1초 뒤에 호출되는 동안 반복문은 이미 돌아가서 i값은 이미 10이 됨. 그때, 익명 함수가 호출되면서 이미 10이 되어버린 i를 참조하기 때문이다.

이 경우에 클로저를 사용해서 원하는 대로 동작하게 만들어 보자!

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

 

중간에 즉시 실행 함수를 덧붙여 setTimeout()에 걸린 익명 함수를 클로저로 만들었다.
이 코드에서 i는 즉시 실행 함수 내에 j라는 형태로 주입되고, 반복문으로 10회 반복되어 생긴 10개의 환경에 10개의 서로 다른 j를 참조한다.

클로저를 통해 내부 변수를 참조하는 동안에는 내부 변수가 차지하는 메모리를 GC가 회수하지 않는다.
다라서 클로저 사용이 끝나면 참조를 제거하는 것이 좋다.

---

- 배열 문제 복습

 

---

[ 출처, 참고 : 제로베이스 프런트엔드 스쿨 ]