JavaScript 루프

소개

이 랩에서는 JavaScript 에서 루프 (loops) 를 사용하는 방법을 배우게 됩니다. 루프는 프로그래밍의 기본적인 개념으로, 코드 블록을 반복적으로 실행할 수 있게 해줍니다. 이는 데이터 목록을 반복하거나 특정 횟수만큼 작업을 수행하는 것과 같은 작업에 유용합니다.

JavaScript 의 세 가지 주요 루프 유형을 살펴보겠습니다.

• for 루프: 알려진 횟수만큼 코드 블록을 반복합니다.
• while 루프: 지정된 조건이 참인 동안 코드 블록을 반복합니다.
• do-while 루프: while 루프와 유사하지만, 조건을 확인하기 전에 코드 블록을 최소 한 번 실행합니다.

또한 루프를 조기에 종료하기 위해 break 문을 사용하는 방법도 배우게 됩니다.

모든 작업은 WebIDE 에서 수행됩니다. index.html에 이미 연결된 script.js 파일에 JavaScript 코드를 작성하게 됩니다. 랩 환경의 Web 8080 탭으로 전환하여 코드의 출력을 볼 수 있습니다.

초기화 및 조건이 있는 for 루프 생성

이 단계에서는 첫 번째 for 루프를 생성합니다. for 루프는 작업을 반복하려는 횟수를 미리 알고 있을 때 이상적입니다.

for 루프의 기본 구문은 다음과 같습니다.
for (initializer; condition; final-expression) { // 실행할 코드 }

• Initializer: let i = 0이 예시입니다. 카운터 변수를 선언하고 초기화하기 위해 가장 처음에 한 번 실행됩니다.
• Condition: i < 5가 예시입니다. 이 표현식은 각 루프 반복 전에 확인됩니다. 참이면 루프가 계속되고, 거짓이면 루프가 중지됩니다.

항목 목록을 생성하는 간단한 루프를 만들어 보겠습니다. 왼쪽 파일 탐색기에서 script.js 파일을 열고 다음 코드를 추가합니다.

const output = document.getElementById("output");
let htmlContent = "<ul>";

// 이 for 루프는 초기화 (let i = 0) 와 조건 (i < 3) 을 가지고 있습니다.
for (let i = 0; i < 3; i++) {
  htmlContent += `<li>Item ${i}</li>`;
}

htmlContent += "</ul>";
output.innerHTML = htmlContent;

이 코드에서:

• let i = 0은 루프 카운터 i를 0 으로 초기화합니다.
• i < 3은 i가 3 보다 작은 동안 루프를 계속 실행하는 조건입니다.
• i++는 각 반복 후에 카운터를 증가시키는 최종 표현식입니다 (다음 단계에서 이에 대해 자세히 알아볼 것입니다).

코드를 추가한 후 파일을 저장합니다. 그런 다음 Web 8080 탭을 클릭하여 출력을 확인합니다. 세 개의 항목이 있는 순서 없는 목록이 표시되어야 합니다.

for 루프에서 증가 연산자를 사용하여 숫자 세기

이 단계에서는 for 루프의 세 번째 부분인 최종 표현식 (final-expression) 에 초점을 맞출 것입니다. 이 부분은 일반적으로 카운터를 증가시키는 데 사용됩니다.

final-expression (예: i++) 은 각 루프 반복이 끝날 때 실행됩니다. 루프 카운터를 업데이트하여 조건이 거짓이 되는 지점에 더 가깝게 이동시킵니다. i++는 i = i + 1의 일반적인 축약형입니다.

루프를 수정하여 1 부터 5 까지 세어 보겠습니다. script.js의 기존 코드를 다음 코드로 바꾸세요.

const output = document.getElementById("output");
let htmlContent = "<h2>Counting from 1 to 5:</h2>";

// 최종 표현식 i++ 는 각 루프 후에 카운터를 증가시킵니다.
for (let i = 1; i <= 5; i++) {
  htmlContent += `Count: ${i}<br>`;
}

output.innerHTML = htmlContent;

변경 사항을 확인하세요.

• 초기화는 이제 let i = 1이므로 1 부터 세기 시작합니다.
• 조건은 i <= 5이므로 i가 5 보다 작거나 같을 때까지 루프가 실행됩니다.
• i++ 표현식은 각 반복마다 카운터가 증가하도록 합니다.

파일을 저장하고 Web 8080 탭을 새로고침합니다. 1 부터 5 까지의 숫자 목록으로 출력이 변경된 것을 볼 수 있습니다.

반복을 위해 while 루프 구현하기

이 단계에서는 while 루프에 대해 배웁니다. while 루프는 지정된 조건이 참인 동안 코드 블록을 계속 실행합니다.

구문은 for 루프보다 간단합니다.
while (condition) { // 실행할 코드 }

while 루프를 사용하면 루프 전에 카운터 변수의 초기화를 처리하고 루프 내에서 카운터를 증가시켜야 합니다. 카운터 증가를 잊으면 무한 루프가 발생하여 브라우저가 충돌할 수 있습니다.

이전의 숫자 세기 예제를 while 루프를 사용하여 다시 작성해 보겠습니다. script.js의 코드를 다음 코드로 바꾸세요.

const output = document.getElementById("output");
let htmlContent = "<h2>Counting with a while loop:</h2>";

let i = 1; // 1. Initializer
while (i <= 5) {
  // 2. Condition
  htmlContent += `Count: ${i}<br>`;
  i++; // 3. Increment
}

output.innerHTML = htmlContent;

이 코드는 이전 단계의 for 루프와 동일한 결과를 달성하지만 구조가 다릅니다. 초기화, 조건 및 증가는 이제 별도의 문입니다.

파일을 저장하고 Web 8080 탭을 확인합니다. 출력은 이전 단계와 동일해야 하며, 동일한 반복을 달성하는 다른 방법을 보여줍니다.

최소 한 번 실행을 위해 do-while 루프 추가하기

이 단계에서는 do-while 루프를 살펴봅니다. 이 루프는 while 루프의 변형으로 한 가지 주요 차이점이 있습니다. do-while 루프는 조건을 확인하기 전에 코드 블록을 항상 최소 한 번 실행합니다.

구문은 다음과 같습니다.
do { // 실행할 코드 } while (condition);

이는 먼저 작업을 수행한 다음 반복해야 하는지 여부를 결정해야 할 때 유용합니다. 조건이 처음에 거짓인 예제를 통해 이를 살펴보겠습니다.

script.js의 코드를 다음 코드로 바꾸세요.

const output = document.getElementById("output");
let htmlContent = "<h2>Testing a do-while loop:</h2>";

let i = 10; // while 조건이 거짓이 되도록 값을 시작합니다.

// i 가 5 보다 작지 않더라도 이 루프는 한 번 실행됩니다.
do {
  htmlContent += `The value of i is: ${i}<br>`;
  i++;
} while (i < 5);

output.innerHTML = htmlContent;

이 예제에서 i가 10 이므로 처음부터 i < 5 조건이 거짓입니다. 그러나 do-while 루프이기 때문에 조건이 확인되기 전에 do 블록 안의 코드가 한 번 실행됩니다.

파일을 저장하고 Web 8080 탭을 확인합니다. "The value of i is: 10" 메시지가 표시되며, 루프가 정확히 한 번 실행되었음을 증명합니다.

break 문으로 루프 탈출하기

이 단계에서는 break 문을 사용하여 루프를 조기에 종료하는 방법을 배웁니다. break 문은 현재 루프를 즉시 종료하고 루프 다음의 문으로 제어를 전달합니다.

이는 루프에서 무언가를 검색하고 남은 반복을 완료하지 않고 찾자마자 중지하고 싶을 때 유용합니다.

10 번 실행되도록 의도되었지만 특정 조건이 충족되면 조기에 중지되는 for 루프를 사용해 보겠습니다. script.js의 코드를 다음 코드로 바꾸세요.

const output = document.getElementById("output");
let htmlContent = "<h2>Using the break statement:</h2>";

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    htmlContent += "Found 6! Breaking the loop.<br>";
    break; // 즉시 루프 종료
  }
  htmlContent += `Current number is ${i}<br>`;
}

htmlContent += "Loop finished.";
output.innerHTML = htmlContent;

이 코드에서 for 루프는 1 부터 10 까지 세도록 설정되었습니다. 그러나 if 문은 i가 6 과 같은지 확인합니다. 같으면 break 문이 실행되고 루프가 종료됩니다. 코드는 7 부터 10 까지의 숫자를 출력하지 않습니다.

파일을 저장하고 Web 8080 탭을 확인합니다. 카운트가 5 에서 멈추고 "Breaking the loop" 메시지가 표시되는 것을 볼 수 있습니다.

요약

JavaScript 루프에 대한 이 실습을 완료하신 것을 축하드립니다! 코드 블록을 반복하여 프로그램의 흐름을 제어하는 방법을 배웠습니다.

이 실습에서는 다음을 다루었습니다.

• for 루프: 초기화, 조건 및 최종 표현식을 사용하여 반복 횟수를 미리 알고 있을 때 완벽합니다.
• while 루프: 조건이 참인 동안 반복되며 카운터를 수동으로 관리해야 합니다.
• do-while 루프: 조건을 확인하기 전에 코드 블록의 최소 한 번의 실행을 보장합니다.
• break 문: 조건에 따라 언제든지 루프를 조기에 종료하는 방법을 제공합니다.

루프를 마스터하는 것은 숙련된 JavaScript 개발자가 되기 위한 중요한 단계입니다. 이해를 공고히 하기 위해 이 실습의 코드를 자유롭게 실험해 보세요.