See the Pen 반복 by nilgi (@nilgi) on CodePen.
<h3>반복문</h3>
<p>반복 안 사용</p>
<p id="loop1"></p>
<script>
const name1 = ["일기", "닐기", "혜원", "혜공", "구루"];
document.getElementById("loop1").innerHTML =
name1[0] + "<br>" +
name1[1] + "<br>" +
name1[2] + "<br>" +
name1[3] + "<br>" +
name1[4] + "<br>";
</script>
<p>반복 for 사용</p>
<p id="loop2"></p>
<script>
const name2 = ["일기", "닐기", "혜원", "혜공", "구루"];
let text = "";
for (let n = 0; n < name2.length; n++) {
text += name2[n] + "<br>";
}
document.getElementById("loop2").innerHTML = text;
</script>
<h3>for(명령1; 명령2; 명령3) {}</h3>
<p>명령1 : 코드 실행 전 변수 설정</p>
<p>명령2 : 코드 실행 조건</p>
<p>명령3 : 반복 실행 명령</p>
<p id="for1"></p>
<script>
let text3 = "";
for (let n3 = 0; n3 < 8; n3++) {
text3 += "다음 숫자는 " + n3 + "<br/>";
}
document.getElementById("for1").innerHTML = text3;
</script>
<p>명령1은 반복에 사용할 변수를 초기 설정한다.<br/>
명령1은 선택 사항이고 생략할 수 있다.<br/>
명령1은 ,(쉼표)로 구분하여 여러개 지정 가능하다.</p>
<p id="st1"></p>
<script>
const stts = ["빠나나", "불루베리", "초코릿", "빵", "라묜"];
let i, i2, st_text;
for (i = 0, i2 = stts.length, st_text = ""; i < i2; i++) {
st_text += stts[i] + "<br/>";
}
document.getElementById("st1").innerHTML = st_text;
</script>
<p>명령1 생략</p>
<p id="stom"></p>
<script>
const snack = ["몽쉘", "구미구미", "오땅", "치토스", "웨하스"];
let o = 1;
let o2 = snack.length;
let stom_text = "";
for (; o < o2; o++) {
stom_text += snack[o] + "<br/>";
}
document.getElementById("stom").innerHTML = stom_text;
</script>
<p>명령2는 명령1을 비교한다.<br>
명령2가 참이면 반복하고 거짓이면 반복문이 종료하며 반복문 내부에 break를 걸어줘야한다.</p>
<p>명령3은 명령1의 초기값을 증가시킨다.<br>
생략가능하다.<br>
명령3의 증가는 음수, 양수 모두 가능하고 기타 다양한 명령어를 쓸 수 있다.</p>
<p>명령1, 3 생략</p>
<p id="stom13"></p>
<script>
const cats = ["고양이", "고냥이", "고영희", "싸가지"];
let c = 0;
let c2 = cats.length;
let stom13_text = "";
for (; c < c2; ) {
stom13_text += cats[c] + "<br>";
c++;
}
document.getElementById("stom13").innerHTML = stom13_text;
</script>
<p>var로 반복 범위 설정</p>
<p id="stv"></p>
<script>
var v = 8;
for (var v = 0; v < 100; v++) {
}
document.getElementById("stv").innerHTML = v;
</script>
<p>let과 var 차이</p>
<p id="stl"></p>
<script>
let l = 8;
for (let l = 0; l < 100; l++) {
}
document.getElementById("stl").innerHTML = l;
</script>
<p>var 변수는 외부에서 다시 선언하여 가져오고 let 변수는 반복문 내에서만 표시</p>