Articles
JavaScript 소개
JavaScript에서 반복 처리

JavaScript에서 반복 처리

이 기사에서는 JavaScript에서 반복 처리를 설명합니다.

YouTube Video

JavaScript의 for 구문

기본 구문 

1for (initialization; condition; update) {
2  // Code to repeat
3}

JavaScript의 for 구문은 반복을 수행하기 위한 구문입니다. 특정 조건이 충족되는 한 지정된 코드 블록을 반복적으로 실행합니다. for 구문을 사용하면 동일한 작업을 효율적으로 여러 번 수행할 수 있습니다.

  • 초기화 (initialization): 루프를 시작하기 전에 한 번만 실행되는 부분. 루프 카운터와 같은 변수를 초기화합니다.
  • 조건 (condition): 루프를 계속할지 여부를 결정하는 조건. true이면 루프가 계속되고, false이면 종료됩니다.
  • 업데이트 (update): 각 루프 종료 시 루프 카운터를 업데이트하기 위해 실행됩니다.

예제 

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

이 경우, i는 0에서 시작하며 i < 5가 true인 동안 루프가 실행됩니다. i++는 루프의 각 반복마다 i에 1을 더합니다. 그 결과, 0에서 4까지의 숫자가 표시됩니다.

루프 카운터의 범위

for 구문의 초기화 부분에서 변수를 선언하거나 초기화합니다. 여기서 선언된 변수는 루프 내에서만 유효합니다.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError
  • 이 예에서 보듯이, for 문 외부에서 변수를 참조하면 오류가 발생합니다.

무한 루프

루프가 종료되지 않는 조건을 설정하면 무한 루프가 발생합니다. 이는 브라우저나 시스템에 부담을 줄 수 있으므로 주의가 필요합니다.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

배열과 for 구문

for 구문을 배열과 함께 사용하는 것이 일반적입니다. 배열의 각 요소를 처리하기에 편리합니다.

예제 

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

이 방법으로, 인덱스를 사용하여 배열의 각 요소를 처리할 수 있습니다.

다른 반복 구조

for...of 문

for...of 문은 배열과 문자열과 같은 반복 가능한 객체에 사용됩니다.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

이를 사용하면 인덱스를 사용하지 않고 각 요소를 처리할 수 있습니다.

for...in 문

for...in 문은 객체의 속성을 반복(iterate)하는 데 사용됩니다.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

이 방법으로 키를 사용하여 각 요소를 처리할 수 있습니다.

요약

  • for 문은 초기화, 조건, 업데이트로 구성된 반복 구조입니다.
  • break 또는 continue를 사용하여 반복문의 동작을 제어할 수 있습니다.
  • 배열이나 객체와 함께 사용하면 요소나 속성을 효과적으로 처리할 수 있습니다.

JavaScript의 while 문

기본 구문 

1while (condition) {
2    // Code that repeats while the condition is true
3}

JavaScript의 while 문은 지정된 조건이 true인 한 반복 작업을 실행하는 반복 구조입니다. for 문과 유사하게, while 문은 조건만을 지정합니다.

  • 조건: 루프를 계속할지 여부를 결정하는 조건 표현식을 작성합니다. 조건이 true인 동안 루프가 계속되고, false가 되면 종료됩니다.

예제 

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

이 예제에서 루프는 변수 i가 0으로 시작하며, i < 5가 true인 동안 실행됩니다. 루프가 반복될 때마다 i가 1씩 증가하며, i가 5가 되면 조건이 false가 되고 루프가 종료됩니다. 결과적으로, while 문은 0에서 4까지를 출력합니다.

for 문과 달리, while 문에서는 변수의 초기화와 업데이트가 개별적으로 작성됩니다. while 문이 종료된 후에도 변수를 참조할 수 있습니다. 이 경우, while 문이 종료된 후 5가 출력됩니다.

무한 루프

조건이 항상 true인 경우, 종료되지 않는 무한 루프가 발생합니다. 무한 루프는 피해야 하지만, 의도적으로 사용하는 경우 break 문을 사용하여 루프를 종료할 수 있습니다.

예제 

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

배열을 while 루프로 처리하기

while 문을 사용해서 배열을 처리하는 것도 가능합니다.

예제 

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

do...while 문

기본 구문 

1do {
2    // Code that is executed at least once
3} while (condition);

do...while 문은 while 문의 변형으로, 루프를 최소 한 번 실행한 뒤 조건을 확인합니다. while 문은 조건을 먼저 확인한 후 실행되지만, do...while 문은 조건을 확인하기 전에 과정을 한 번 실행합니다.

예제 

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

이 예제에서는 i가 0에서 4까지 표시됩니다. do...while 문은 조건이 false이어도 루프가 항상 한 번은 실행된다는 점에서 while 문과 다릅니다.

요약

  • while 문은 조건이 true인 동안 코드를 반복해서 실행하는 데 사용됩니다.
  • 무한 루프에 주의해야 하지만, break와 continue를 사용하여 루프의 흐름을 제어할 수 있습니다.
  • do...while 문은 루프를 최소 한 번 실행하고 싶을 때 유용합니다.

break와 continue

루프 내부에서는 break와 continue를 사용할 수 있습니다.

  • break는 루프를 조기에 종료하는 데 사용됩니다.
  • continue는 현재 반복을 건너뛰고 다음 반복으로 진행합니다.

break의 예제 

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

이 경우, i가 5가 될 때 break가 실행됩니다. 그 결과, 0에서 4까지의 숫자가 표시됩니다.

continue의 예제 

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

이 경우, i가 2일 때 continue가 실행됩니다. 결과적으로, 2를 제외한 숫자가 표시됩니다.

JavaScript의 중첩 루프

JavaScript 프로그래밍에서 중첩 루프는 하나의 루프가 다른 루프 안에 존재하는 구조입니다. 이러한 루프는 특정 알고리즘이나 프로세스가 여러 차원 또는 레이어를 포함할 때 매우 효과적입니다. 예를 들어, 다차원 배열을 처리할 때는 배열 안에 배열이 있는 경우가 일반적입니다.

여기에서는 중첩 루프의 기본 구조, 사용 예제, 주의사항 및 최적화 고려사항을 설명합니다.

중첩 루프의 기본 구조

중첩 루프의 기본 구조는 하나 이상의 루프가 다른 루프 안에 포함된 형태입니다. 외부 루프가 한 번 실행될 때마다 내부 루프는 그 횟수만큼 실행됩니다.

아래는 두 개의 중첩 루프에 대한 기본적인 예제입니다.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

위 코드에서는 i가 외부 루프에서 계산되고, j가 내부 루프에서 계산됩니다. 외부 루프가 한 번 실행될 때마다 내부 루프는 두 번 실행됩니다.

중첩 루프의 실용적인 예제

중첩 루프는 특히 다차원 배열을 처리하는 데 유용합니다. 예를 들어, 2차원 배열을 처리할 때는 행(외부 루프)과 열(내부 루프)을 모두 처리해야 합니다.

다음 예제에서는 2차원 배열을 처리하고 각 요소를 출력합니다.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

이와 같이 중첩 루프를 사용하면 2차원 배열의 각 요소에 접근할 수 있습니다.

노트

중첩 루프를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.

  1. 성능 문제

    중첩 루프가 깊어질수록 실행 시간이 급격히 증가합니다. 예를 들어, 외부 루프가 100번 실행되고 내부 루프가 100번 실행되면 총 10,000번의 작업이 수행됩니다. 따라서 루프 반복이 많을 경우 효율성을 위해 루프 최적화를 고려해야 합니다.

  2. 복잡한 알고리즘에의 적용

    중첩 루프는 매우 강력하지만, 처리 과정이 복잡해질수록 코드가 이해하기 어려워질 수 있습니다. 따라서 코드 가독성을 유지하려면 적절한 주석과 함수를 사용해 처리를 체계적으로 구성하는 것이 중요합니다.

최적화에 대한 고려사항

중첩 루프를 사용할 때는 다음과 같은 최적화를 고려할 수 있습니다.

  1. 루프 조기 종료

    루프 내에서 특정 조건이 만족되면 break 문을 사용하여 루프를 종료할 수 있습니다. 이렇게 하면 불필요한 루프를 피하고 성능을 향상시킬 수 있습니다.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

  1. 계산을 루프 외부로 이동

    루프 내부에서 매번 동일한 계산을 수행하는 대신, 루프 외부에서 한 번만 계산하고 그 결과를 사용하여 처리를 더 효율적으로 만들 수 있습니다.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

요약

중첩 루프는 JavaScript에서 복잡한 데이터 구조와 알고리즘을 처리하는 데 매우 유용합니다. 그러나 제대로 사용하지 않으면 성능 저하와 코드 가독성 감소를 초래할 수 있습니다. 중첩 루프를 효과적으로 사용하려면 루프 최적화 및 코드 구조화에 힘쓰고, 상황에 따라 적절한 접근 방식을 취하는 것이 중요합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

JavaScript에서 조건문에 대한 모범 사례JavaScript에서 반복을 위한 모범 사례