🤷‍♀️ MDN 반복문 문제

✨ 참고: 🤷‍♀️는 아직 해결 안 됐다는 의미.

---

10부터 카운트다운하는 프로그램을 만들고 싶은데(MDN Active Learning) 아래와 같이 const para 선언과 초기화를 while문 밖에서 해 주니까 'Blast off!'만 출력된다.

정답과 비교해 보니까 정답 코드에서는 const para 부분을 while문 안에 넣었다.

para 변수 선언과 초기화를 while문 밖에서 하면 i가 0일 때의 출력값만 출력되는 이유가 뭘까?

i 값이 달라질 때마다 새로운 p 태그를 만들어야 돼서 while 루프 안에 넣어야 제대로 작동되는 건가? (그런 것 같기도 하다)

어차피 para는 while문 끝에서 (루프가 새로 시작돼도 계속 남아 있는 변수인) output에 쏙 달라붙으니까 루프를 한 번 돌리고 나면 사라지게 두는 건가? 일회성 변수인가?

//내가 작성한 코드
let output = document.querySelector('.output');
output.innerHTML = '';

let i = 10;
const para = document.createElement('p');

while(i >= 0) {

  if(i === 0) {
    para.textContent = 'Blast off!';
  } else if(i === 10) {
    para.textContent = 'Countdown 10';
  } else {
    para.textContent = i;
  }

  output.appendChild(para);

  i--;
}

//정답 코드
const output = document.querySelector('.output');
output.innerHTML = '';

let i = 10;

while(i >= 0) {
 let para = document.createElement('p');
 if(i === 10) {
 para.textContent = 'Countdown ' + i;
 } else if(i === 0) {
  para.textContent = 'Blast off!';
 } else {
 para.textContent = i;
 }

 output.appendChild(para);

 i--;
}

para에 들어가는 요소가 createElement라는 이벤트네. 아직 이벤트를 안 배워서 이해를 못하는 걸 수도 있으니까 이 문제는 나중에 다시 살펴보자.