반복문으로 구구단 출력해보기

반복문으로 구구단 출력해보기

지난번에 반복문에 대해서 알아보았는데요!
이번에는 반복문으로 구구단을 만들어 볼겁니다. 처음 배우는 입장이라서 마냥 간단하지만은 않더라구요 ㅎㅎ
우선 for문으로 만들어 봅시다.

{
    for(let i=2; i<=9; i++){      
        for(let j=1; j<=9; j++){
            let sum = i * j;
            let result = i + " * " + j + " = " + sum ;
            document.querySelector(".result01 > div").innerHTML += result;

        }        
    }
}

설명!

보시면 알 수 있듯이 for문 안에 또 for문이 들어간 중첩 for문입니다. 저는 처음에는 어려웠지만 HTML에 부모 태그와 자식 태그가 있듯이 자바스크립트도 부모와 자식이 있다고 생각하니까 이해가 좀 수월하더라구요!
구구단의 경우 안에 있는 for문이 실행되고 난 후 바깥에 있는 for문이 실행이 되는데요. 구구단 첫번 째 2단이 9번 끝나야! 3단이 시작된다고 생각하면 이해가 쉽겠죠? 그렇게 9단까지 출력합니다.

2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
.
.
.
9 * 9 = 81

이번에는 while문으로 해봅시다!

while문은 평소에는 많이 쓰지않지만 알고 있어야하는 문법 중 하나입니다. while문 구구단.. 어려웠습니다. 하지만 정신 차리면 잘 해낼 수 있어요 ㅎㅎ
핵심! 자바스크립트는 순서에 따라서 실행되는 언어이므로 작성 순서를 잘 보면서 해봅시다.

{
    let i =2;
    while(i<=9){
        let j =1;
        while(j<=9){
            let sum = i * j;
            let result = i + "*" + j + "=" + sum ;                    
            document.querySelector(".result02 > div").innerHTML += result;                    
            j++;
        }
    i++;    
    }
}

저는 while문 구구단을 작성할 때 let sum = i * j;의 위치를 어디다 둬야할 지 한참을 해멨어요! 하지만 아까 이야기 했듯 순서에 따라서 실행되는걸 곱씹어 보니 조금 씩 이해가 가더라구요. for문 보다 while문에서 부모가 자식을 감싼다는 말이 더 와닿았어요.
이상으로 반복문 구구단을 마칩니당 ㅎㅎ