for반복문의 중첩

JS100제 스터디에서 for반복문으로 별 찍기 문제를 풀고, 정리한 내용입니다.

for반복문 별 찍기는 구글링하니까 엄청 흔한 문제로 나오더라.
내가 푼 문제는 아니지만 흔한 예제 하나를 가져왔다.

5번 반복을 하면서 별을 하나씩 찍어줘야한다.

처음에 내가 짠 코드다.

function makeChristmasTree(line) {
    for(let i = 0; i <= line; i++) {
        let star = '';
        for(let j = 0; j <= i*2; j++ ) {
            star += '*';
        }
        console.log(star);
    }
}

makeChristmasTree(5);

첫 번째에 별이 하나 찍히는 건 이해가가는데, 두 번째에 별이 2개가 찍히는건 이해가 완벽히 안됐다.
i가 0부터 시작해서 첫 번째 반복문이 돌았을 때 안에 있는 j변수 반복문으로 내려가고, j도 0, i도 0으로 조건이 충족하니까 별이 하나 찍히고 j가 1증가하면 j는 1, i는 0 조건이 안맞아서 j변수 반복문을 빠져나와 i변수 반복문에서 i가 1증가한다. 다시 i가 1일때 전달받은 5보다 작으니까 다시 j변수 반복문으로 내려가고 여기서 j는 0이고 i는 2이다. 이부분에서 내가 헷갈렸는데, i변수 반복문에서 i변수는 시작할 때 단 한번 초기화된다. 그리고 j변수반복문은 i변수 반복문이 조건이 틀릴때까지 반복하는 매 순간 다시 초기화된다.
나는 j변수 반복문이 첫 반복을 돌면서 1증가된 채로 다음 반복문을 시작하는 줄 알았는데, 잘못 이해하고 있었다.

좀 더 쉬운 예제로 보면 바로 이해가 간다!나는 유튜브 채널을 참고했는데, 내가 이해 못했던 부분은 영상 초반 부분만 보면 바로 이해할 수 있다.

for (let i = 0; i < 5; i++) {
    console.log(`The current value of i is: ${i}`);
    for(let j = 0; j < 5; j++) {
        console.log(`j: ${j}`);
    }
}

이렇게 코드를 짰을 때 출력 화면을 보면,

i변수 반복문을 하나 반복하면 안에 중첩된 j변수 반복문이 처음부터 조건이 틀릴때까지 실행되고, 다시 i변수가 증가해서 다음 반복 사이클로 넘어가면 그 사이클에서 j변수 반복문은 처음부터 조건이 틀릴때까지 반복된다.
이런 하나의 과정이 i변수 반복문의 조건이 틀릴때까지 반복된다.

그래서 처음 소개했던 예시 처럼 별을 찍는 게 가능한 것이었다.

for중첩문에 대해서 좀 더 확실히 알게된 계기였다.👍🏻