인프런 커뮤니티 질문&답변
작성한 질문수
section04 - 각각의 객체에 개별 애니메이션 적용하기
작성
·
275
0
선생님 안녕하세요 !
강의를 듣는 중 궁금한 점이 있어 질의 드립니다.
section04 - 각각의 객체에 개별 애니메이션 적용하기 영상에서
let bar를 for문 밖에 선언하고 for문 안에서 document.createElement를 할당한 이유가 있을까요?
for문 안에 같이 선언하면서 할당하는 코드와 어떤 부분이 다른지 잘 모르겠어서 질의 드립니다.
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);
}답변 3
0
0
그릇(변수)을 한번만 만들어 놓고 여러번 재활용해서 쓸건지,
그릇을 매번 새로 만들지
선택의 문제랍니다. for문 밖에서 선언하는 것은 1번이고, for문 안에서 선언하는게 2번입니다.
워낙 연산이 적은 동작이라 사실 어떻게 하셔도 무방하긴한데, 예전부터 반복문 안에서 변수를 선언하는게 안티패턴으로 알려져있기는 합니다. 크게 신경쓰지는 않으셔도 될 것 같아요!
0
강사님이 더 자세하게 답변 주시겠지만, 그냥 넌지시 언급하고 가면,
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 엘리먼트가 배열에 저장되어 나중에 사용할 수 있습니다.
답변 감사합니다.
근데 bar 변수로 만든 element를 bars라는 배열에 넣어 bars 배열을 사용하는게 목적인거 같아보이는데, let bar를 for문 밖에 한번 선언하고 foR문으로 돌면서 매회 값을 새로 할당하더라도 마지막에 bar 변수 하나만 남지 않나요?
또 bars 배열에 푸쉬하여 for문으로 만들어 놓은 element를 사용하는게 목적이라면
for문이 돌고 난 후 bar 값이 변하는건 외부에 선언하나 내부에 선언하나 상관 없는거 아닌가요?
제가 잘못 이해 한 부분이 있으면 답변 해주시면 감사하겠습니다.