header

Day 1 - 2022/10/17

💡 새롭게 알게된 점

메모리

자바스크립트 엔진은 Garbage Collector를 통해 메모리를 정리한다.
가비지 콜렉터는 가비지 콜렉션이라는 자동 메모리 관리 알고리즘을 통해 만들어진 객체로, 사용하지 않는 메모리를 해제하는 역할을 맡고 있다.
현대적인 브라우저의 가비지 콜렉터는 Mark and Sweep Algorithm을 통해 메모리를 정리
- Mark and Sweep Algorithm 이란? 브라우저의 최상위 객체인 window에서 시작해 닿을 수 없는 주소를 더 이상 필요없는 주소로 정의하고 지우는 알고리즘이다
자바스크립트 엔진은 Virtual Machine으로 구성된다
- Heap
  - 참조 타입이 들어간다.
  - 동적으로 크기가 변한다. → 여기서 나오는 배열을 const로 선언해도 push()가 되는 이유: call stack에 할당된 메모리를 변경하는 것이 아닌 heap 메모리를 변경하는 것이기 때문
- Call Stack
  - 원시 타입이 들어간다.
  - 예) 배열을 선언 후 push()할 때 Call Stack에 arr = (0x008, 0xFFB) → Heap에 0xFFB, [5, 3, 1]

배열에서의 key-value ?

배열에서도 객체처럼 key-value 쌍을 추가할 수 있다.

추가는 되지만, 배열의 길이는 변하지 않는다!

const arr = [1, 2, 3, 4, 5, 6];
console.log(typeof arr); // object
arr['key'] = 'value';
console.log(arr9); // [ 1, 2, 3, 4, 5, 6, key: 'value' ];
console.log(arr9.length); // expected 7 but 6

클로저 ?

다음의 출력 결과는 무엇일까?

    function counting() {
        for i = 0;
        for (i = 0; i < 5; i += 1) {
            setTimeout(function () {
                console.log(i);
            }, i * 100);
        }
    }

    counting();

정답은 ‘5 5 5 5 5’

Why?

setTimeout의 대기 시간이 끝나 콜백 함수가 실행되는 시점에는 루프가 종료되어 i가 5가 되기 때문

어떻게 해결할까?

IIFE

   function counting() {
       for i = 0;
       for (i = 0; i < 5; i += 1) {
           (function (number) {
               setTimeout(function () {
                   console.log(number);
               }, number * 100);
           })(i);
       }
   }

   counting();

let 사용

   function counting() {
       for (let i = 0; i < 5; i += 1) {
           setTimeout(function () {
               console.log(i);
           }, i * 100);
       }
   }

   counting();
        
   // let은 블록 수준 스코프라 매 루프마다 클로저가 생성되기 때문

❗️ 느낀점

자바스크립트에 대한 기초 강의이다 보니 대부분은 아는 내용이었지만, 새로 알게된 점과 상기된 점이 있었다.

특히 개발하거나 코딩 테스트 문제를 풀 때 변경할 일 없는 배열은 const로 생성하고, push() 및 pop() 등 배열의 요소를 변경할 수 있다는 점은 알고 있었는데, 그 정확한 이유는 궁금해 하지도 않고 찾아보지도 않았기 때문에 알리가 없었다. 1학년 때 자바 배우면서 얼핏 들었던 내용인 것 같은데 잘 기억나진 않는다..

또 위에 적었듯이, 클로저 부분 강의에서 setTimeout의 대기 시간이 끝나 콜백 함수가 실행되는 시점에는 루프가 종료되어 i가 전부 5가 되는 문제를 해결하는 방법 중 정의와 동시에 즉시 실행되는 함수인 IIFE(Immediately Invoked Function Expression)을 이용해 해결할 수 있다는 점이 굉장히 흥미로웠다.

첫 강의이다 보니 의욕이 앞서 수강하면서 모든 내용을 다 노션에 적고 필요한 것만 다시 옮겨서 정리했는데 앞으론 필요한 내용만 적는게 나을지도..😢

이제 첫 TIL인데 앞으로 약 5달 동안 이 마음가짐을 갖고 끝까지 쓸 수 있기를 기원하며..⭐️

화이팅👊