section04 - 각각의 객체에 개별 애니메이션 적용하기

imageTop + imageHeight - window.innerHeight;

이 부분이 왜 스크롤 하단에 닫는 부분인지 이해가 너무 안가요 ㅠㅠ

1. 그릇(변수)을 한번만 만들어 놓고 여러번 재활용해서 쓸건지,

2. 그릇을 매번 새로 만들지

   
   선택의 문제랍니다. for문 밖에서 선언하는 것은 1번이고, for문 안에서 선언하는게 2번입니다.
   워낙 연산이 적은 동작이라 사실 어떻게 하셔도 무방하긴한데, 예전부터 반복문 안에서 변수를 선언하는게 안티패턴으로 알려져있기는 합니다. 크게 신경쓰지는 않으셔도 될 것 같아요!

강사님이 더 자세하게 답변 주시겠지만, 그냥 넌지시 언급하고 가면,

let bar를 반복문 안에서 선언하는 대신에, 바깥에 선언한 이유는 변수의 스코프와 생존 기간 때문입니다. 반복문 안에서 변수를 선언하면 매 반복마다 변수가 재선언되고 초기화되기 때문에, 반복문이 끝날 때까지 변수에 마지막 반복에서의 값만 남게 됩니다. 하지만 반복문 외부에서 변수를 선언하면, 반복문 내에서 생성한 모든 bar 엘리먼트들을 배열에 저장하고 나중에 사용할 수 있습니다.

만약 반복문 안에서 let bar를 선언한다면,

const bars = [];
for (let i = 0; i < 30; i++) {
    let bar = document.createElement('div');
    bar.classList.add('bar');
    barContainer.appendChild(bar);
    bars.push(bar);
}

각 반복에서 bar 변수가 새로 선언되므로, 반복이 끝날 때마다 이전 반복에서 만들어진 bar 변수는 사라지게 됩니다. 그래서 bars 배열에는 모든 반복에서의 bar 엘리먼트가 저장되지 않고, 마지막 반복에서 만들어진 bar 엘리먼트 하나만 저장될 것입니다.

하지만 반복문 외부에서 let bar를 선언하면,

const bars = [];
let bar;
for (let i = 0; i < 30; i++) {
    bar = document.createElement('div');
    bar.classList.add('bar');
    barContainer.appendChild(bar);
    bars.push(bar);
}

한 번만 선언되기 때문에, 반복문 내에서 생성한 모든 bar 엘리먼트들이 bars 배열에 추가될 수 있습니다. 따라서 모든 반복에서 만들어진 bar 엘리먼트가 배열에 저장되어 나중에 사용할 수 있습니다.