[ONEBITE-REACT] JS 기본 - 반복문 (Loop, Iteration)

의미

• 어떠한 동작을 반혹해서 수행할 수 있도록 만들어주는 문법
• 예) 1부터 100까지 콘솔에 하나씩 출력하라.
  • 원래대로라면 console.log(1); ... console.log(100);까지 100번 입력해야 하나, 반복문을 사용하면 for(let i = 1; i <= 100; i ++) {console.log(i);} 처럼 간단히 표현 가능하다.

종류

for문

기본형

for (초기식; 조건식; 증감식) {실행할 값};

• 초기식(initializtion) : 반복문이 시작될 때 한 번만 실행되고, 초기값을 지정한다. 보통 idx = 0 과 같이 초기값을 index = 0 등으로 변수명을 설정하여 값을 초기화 한다.
• 조건식(condition) : 이 조건식이 될 때까지 반복한다는 의미이다. 즉 위에서 인덱스라는 변수의 값을 0으로 초기화 했다면 idx < 5 등으로 이 값을 설정하여, idx가 5가 되기 직전까지 실행하게 된다. 즉 0, 1, 2, 3, 4 총 5번 반복하게 된다.
• 증감식(increment/decrement) : 반복이 끝난 후 실행할 표현식이다. 보통 변수명++, 변수명-- 등으로 증감을 설정한다.

for (idx = 0; idx < 5; idx++) {
    console.log("반복중")
}

코드해석
for이라는 반복문을 실행한다.
idx라는 변수의 초기값으로 0을 할당했다.
idx<5, idx 변수의 값이 5가 되기 직전까지 뒤의 증감식을 수행한다.
그리고 {} 중괄호 내부에 있는 코드를 이 횟수만큼 반복해서 실행한다.

 

최초 idx값은 0이다. idx가 0이니 5보다 작다. idx를 한 단계 증가시켜 1이 되었다. 콘솔에 반복중을 띄운다. (1회)

idx가 1이 되었다. idx가 1이니 5보다 작다. idx를 한 단계 증가시켜 2가 되었다. 콘솔에 반복중을 띄운다. (2회)
idx가 2가 되었다. idx가 2이니 5보다 작다. idx를 한 단계 증가시켜 3이 되었다. 콘솔에 반복중을 띄운다. (3회)
idx가 3이 되었다. idx가 3이니 5보다 작다. idx를 한 단계 증가시켜 4가 되었다. 콘솔에 반복중을 띄운다. (4회)
idx가 4가 되었다. idx가 4이니 5보다 작다. idx를 한 단계 증가시켜 5가 되었다. 콘솔에 반복중을 띄운다. (5회)
idx가 5가 되었다. idx가 5이니 5보다 작지 않다. 여기에서 반복문을 멈춘다.

반복 횟수를 좀 더 직관적으로 확인하고 싶다면 아래와 같이 콘솔에 idx라는 변수 자체를 출력해보면 된다.

for (idx = 0; idx < 5; idx++) {
    console.log(idx);
}

총 5회 실행되었다.

for문을 강제로 종료시키는 방법 (if...break)

    if (idx >= 3) {
        break;
    }

위와 같이 if (조건) {break;}를 추가하면 된다.

for (idx = 0; idx < 5; idx++) {
    console.log(idx);

    if (idx >= 3) {
        break;
    }
}

만약 idx가 5와 같아지는 순간 반복문이 종료되길 원하는 위와 같은 for문에서 3과 같아지는 순간 멈추게 하고 싶다면, 조건식 자체를 수정해도 되지만 조건식을 수정할 수 없는 상황에서는 위와 같이 if...break를 추가하여 idx가 3과 같거나 커질 때 break로 빠져 나오라고 코드를 작성할 수 있다.

for문을 강제로 패스하는 방법 (if...countinue)

    if (idx % 2 === 0) {
        continue;
    } /// idx를 2로 나누었을 때 나머지가 0이 되면 (즉 짝수이면 건너 뛰고 다음 라인으로 넘어가라)

for (idx = 0; idx < 10; idx++) {

    if (idx % 2 === 0) {
        continue;
    }

    console.log(idx);

    if (idx >= 8) {
        break;
    }
}

위 코드는 잘 살펴보아야 한다. 자바스크립트의 코드는 작성된 라인의 위부터 아래로 순서대로 실행이 된다.

 

코드해석
for문을 사용하여 반복문을 실행한다.
idx라는 변수의 값으로 초기값을 0으로 초기화하였다.
idx가 10보다 작을 때까지만 반복한다. 즉 10이 되면 반복을 멈춘다.
모든 코드가 반복되고 나서는 idx를 1 증가시킨다.

그런데 if...continue를 사용했다. if를 보니 idx를 2로 나눠서 나머지가 0이면 한 번 패스하고 다음 라인으로 넘어가라고 한다.
즉, idx가 짝수일 때는 이 뒤로의 반복문을 실행하지 말고 다시 첫줄로 가서 처음부터 반복하라는 의미이다.
문제가 없다면 콘솔에 idx의 값을 출력하도록 되어 있다.
그리고 if...break가 사용되어, idx의 값이 8이 되는 순간 반복문을 멈추도록 되어있다.

 

반복 1회
idx가 0이다. idx는 10보다 작으니, idx를 1단계 증가시켜 1이 되었다.
idx가 짝수인지 확인해보니 0은 2의 배수, 즉 짝수이기에 continue, 즉 다음 반복문으로 넘어간다.
idx가 1이다. idx는 10보다 작으니, idx를 1단계 증가시켜 2가 되었다.
idx가 짝수인지 확인해보니 1은 짝수가 아니기에 continue를 실행하지 않고 다음 라인으로 이어간다.
console에 idx 값인 1을 출력한다. 다음으로 넘어가니
idx가 8과 같거나 큰 지 확인해보니 작다. 따라서 break를 작동하지 않고, 다음 반복문으로 넘어간다.
idx가 2이다. idx는 2보다 작으니, idx를 1단계 증가시켜 3이 되었다.
idx가 짝수인지 확인해보니 짝수이기에 continue, 즉 아래 라인으로 이어가지 않고 다음 반복문으로 넘어간다.
idx가 3이다. idx가 10보다 작으니, idx를 1단계 증가시켜 4가 되었다.
idx가 짝수인지 확인해보니 짝수가 아니기에 continue를 무시하고 다음 라인인 console에 3을 출력한다.
...
이렇게 계속 반복하다 idx가 8이 되었다.
idx가 10보다 작은지 확인해보니 작아 한 단계 증가시켜 idx는 9가 되었다.
idx가 짝수인지 확인해보니 짝수이기에 continue를 작동시켜 다음 반복문으로 넘어간다.
idx가 9가 되었다. idx가 10보다 작은지 확ㅇ니해보니 작아 한 단계 증가시켜 idx는 10이 되었다.
idx가 짝수인지 확인해보니 9는 홀수로, continue를 무시하고 다음 라인으로 이어간다.
console에 9를 출력한다.
마지막 if문에서 idx가 8보다 작거나 큰 지 확인해보니 크다. 따라서 이 반복문은 여기서 break한다.
즉 콘솔에는 1, 3, 5, 7, 9가 출력되었다.