11. JavaScript 반복문 완벽 가이드 | 웹 개발 기초

미니멀리스트 스타일, dall-e

 

JavaScript 반복문: for, while, do...while, for...in, for...of 문과 break, continue 사용법

 

1. 서론

1.1 JavaScript에서 반복문의 중요성

반복문은 JavaScript에서 필수적인 기능으로, 동일한 작업을 여러 번 수행할 때 사용됩니다. 이를 통해 코드의 간결성, 가독성, 유지 보수성을 높일 수 있습니다.

1.2 다양한 반복문의 필요성

JavaScript는 여러 종류의 반복문을 제공하여 다양한 상황에서 유연하게 사용할 수 있습니다. for 문, while 문, do...while 문, for...in 문, for...of 문 등 각각의 반복문은 고유의 장점과 사용 사례가 있습니다.

 

2. for 문

2.1 for 문의 기본 구조와 동작 원리

JavaScript의 for 문은 반복문 중 가장 많이 사용되는 형태로, 특정 조건이 만족될 때까지 코드 블록을 반복 실행할 수 있게 해줍니다. 기본 구조는 세 개의 주요 부분으로 구성됩니다: 초기화, 조건식, 그리고 증감식. 이 세 부분은 모두 한 줄에 작성되며, 세미콜론(;)으로 구분됩니다.

for (초기화; 조건식; 증감식) {
    // 실행할 코드
}

• 초기화: 반복이 시작되기 전에 한 번 실행되며, 반복 변수의 초기값을 설정합니다.
• 조건식: 각 반복이 시작될 때마다 평가되며, 조건식이 참일 경우 코드 블록이 실행됩니다. 거짓일 경우 반복이 종료됩니다.
• 증감식: 각 반복이 끝날 때마다 실행되며, 반복 변수의 값을 변경합니다.

2.2 사용 예시: 특정 조건에 따라 반복 실행

for 문은 주로 배열의 요소를 순회하거나, 특정 범위 내의 숫자를 처리할 때 많이 사용됩니다. 아래는 배열의 모든 요소를 출력하는 예시입니다.

예시 1: 배열 요소 출력

const fruits = ['apple', 'banana', 'cherry', 'date'];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

출력 결과:

apple
banana
cherry
date

위 예시에서 초기화 부분에서 i를 0으로 설정하고, 조건식에서 i가 배열의 길이보다 작은 동안 반복을 계속합니다. 증감식에서 i를 1씩 증가시키며, 각 반복마다 배열의 요소를 출력합니다.

예시 2: 1부터 10까지의 숫자 중 짝수만 출력

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        console.log(i);
    }
}

출력 결과:

2
4
6
8
10

위 예시에서는 i를 1부터 10까지 증가시키며, i가 짝수일 때만 출력합니다. if 문을 사용하여 i가 2로 나누어 떨어지는 경우에만 console.log를 실행합니다.

예시 3: 구구단 출력

for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= 9; j++) {
        console.log(`${i} x ${j} = ${i * j}`);
    }
}

출력 결과:

1 x 1 = 1
1 x 2 = 2
1 x 3 = 3
...
9 x 7 = 63
9 x 8 = 72
9 x 9 = 81

위 예시에서는 중첩된 for 문을 사용하여 1부터 9까지의 구구단을 출력합니다. 외부 for 문은 i를 1부터 9까지 증가시키고, 내부 for 문은 j를 1부터 9까지 증가시키며, 두 수의 곱을 출력합니다.

이와 같이 for 문은 다양한 상황에서 유용하게 사용될 수 있습니다. 초기화, 조건식, 증감식을 적절하게 설정함으로써 원하는 반복 작업을 효율적으로 수행할 수 있습니다.

 

3. while 문

3.1 while 문의 기본 구조와 동작 원리

while 문은 조건식이 참인 동안 코드 블록을 반복해서 실행합니다. 조건식은 각 반복이 시작될 때 평가되며, 조건식이 거짓이 되면 반복이 종료됩니다. while 문의 기본 구조는 다음과 같습니다:

while (조건식) {
    // 실행할 코드
}

• 조건식: 반복이 시작될 때마다 평가되며, 조건식이 참인 동안 코드 블록이 실행됩니다. 조건식이 거짓이 되면 반복이 종료됩니다.

while 문은 반복 횟수가 미리 정해져 있지 않거나, 반복 조건이 동적으로 변할 때 유용합니다.

3.2 사용 예시: 조건이 참일 때 반복 실행

while 문은 주로 반복 횟수가 정해져 있지 않은 경우나, 특정 조건이 만족될 때까지 반복 작업을 수행할 때 사용됩니다. 아래는 몇 가지 예시입니다.

예시 1: 1부터 5까지 숫자 출력

let count = 1;
while (count <= 5) {
    console.log(count);
    count++;
}

출력 결과:

1
2
3
4
5

위 예시에서는 count 변수를 1로 초기화하고, count가 5 이하인 동안 반복해서 출력합니다. 각 반복마다 count를 1씩 증가시켜 조건식이 거짓이 될 때까지 반복합니다.

예시 2: 배열의 요소 출력

const fruits = ['apple', 'banana', 'cherry'];
let index = 0;
while (index < fruits.length) {
    console.log(fruits[index]);
    index++;
}

출력 결과:

apple
banana
cherry

위 예시에서는 index 변수를 0으로 초기화하고, index가 배열의 길이보다 작은 동안 배열의 요소를 출력합니다. 각 반복마다 index를 1씩 증가시켜 배열의 모든 요소를 출력할 수 있습니다.

예시 3: 사용자가 'exit'을 입력할 때까지 반복

let input;
while (input !== 'exit') {
    input = prompt('명령을 입력하세요 (종료하려면 exit 입력):');
    console.log(`입력한 명령: ${input}`);
}

출력 결과:

사용자가 'exit'을 입력할 때까지 계속 입력한 값을 출력

위 예시에서는 prompt를 사용하여 사용자가 'exit'을 입력할 때까지 계속해서 입력을 받습니다. 사용자가 'exit'을 입력하면 조건식이 거짓이 되어 반복이 종료됩니다.

while 문은 조건식이 참인 동안 반복 작업을 수행하는 데 매우 유용합니다. 조건식이 거짓이 될 때까지 계속해서 반복할 수 있으며, 이를 통해 동적인 반복 작업을 효율적으로 처리할 수 있습니다.

 

4. do...while 문

4.1 do...while 문의 기본 구조와 동작 원리

do...while 문은 먼저 코드 블록을 한 번 실행한 후, 조건식을 평가하여 조건식이 참인 동안 반복 실행을 계속하는 반복문입니다. 이는 다른 반복문과는 달리, 조건식을 처음 평가하기 전에 코드 블록을 최소 한 번은 실행한다는 특징이 있습니다. 기본 구조는 다음과 같습니다:

do {
    // 실행할 코드
} while (조건식);

• 실행할 코드: 조건식이 평가되기 전에 한 번 실행됩니다.
• 조건식: 코드 블록이 한 번 실행된 후에 평가되며, 조건식이 참인 동안 코드 블록이 반복 실행됩니다.

4.2 사용 예시: 최소 한 번은 실행 후 조건 검사

do...while 문은 반복 작업을 최소 한 번은 실행해야 할 때 유용합니다. 아래는 몇 가지 예시입니다.

예시 1: 1부터 5까지 숫자 출력

let count = 1;
do {
    console.log(count);
    count++;
} while (count <= 5);

출력 결과:

1
2
3
4
5

위 예시에서는 count 변수를 1로 초기화하고, do 블록 내에서 count를 출력한 후, count를 1씩 증가시킵니다. while 조건식은 count가 5 이하인 동안 참이므로, 코드 블록이 반복 실행됩니다.

예시 2: 사용자가 'exit'을 입력할 때까지 반복

let input;
do {
    input = prompt('명령을 입력하세요 (종료하려면 exit 입력):');
    console.log(`입력한 명령: ${input}`);
} while (input !== 'exit');

출력 결과:

사용자가 'exit'을 입력할 때까지 계속 입력한 값을 출력

위 예시에서는 prompt를 사용하여 사용자가 'exit'을 입력할 때까지 계속해서 입력을 받습니다. do 블록 내에서 먼저 입력을 받고, 입력한 값을 출력한 후, while 조건식에서 'exit'이 아닌 경우에 반복을 계속합니다.

예시 3: 배열의 요소 출력

const fruits = ['apple', 'banana', 'cherry'];
let index = 0;
do {
    console.log(fruits[index]);
    index++;
} while (index < fruits.length);

출력 결과:

apple
banana
cherry

위 예시에서는 index 변수를 0으로 초기화하고, do 블록 내에서 배열의 요소를 출력한 후, index를 1씩 증가시킵니다. while 조건식에서 index가 배열의 길이보다 작은 동안 반복 실행됩니다.

do...while 문은 코드 블록을 최소 한 번 실행해야 하는 경우에 유용합니다. 조건식이 코드 블록이 실행된 후에 평가되므로, 다른 반복문과는 다른 상황에서 사용될 수 있습니다. 이러한 특징을 활용하여 적절한 반복 작업을 효율적으로 수행할 수 있습니다.

 

5. for...in 문

5.1 for...in 문의 기본 구조와 동작 원리

for...in 문은 객체의 열거 가능한 속성(enumerable property)을 반복할 때 사용됩니다. 객체의 모든 열거 가능한 속성에 대해 반복 작업을 수행하며, 각 반복마다 속성의 키(key)를 반환합니다. 기본 구조는 다음과 같습니다:

for (let key in 객체) {
    // 실행할 코드
}

• key: 객체의 각 열거 가능한 속성의 키를 나타냅니다.
• 객체: 반복할 객체를 나타냅니다.

for...in 문은 주로 객체의 속성을 반복하여 작업을 수행할 때 유용합니다. 다만, 배열보다는 객체를 다룰 때 주로 사용되며, 배열에는 for...of 문을 사용하는 것이 더 적합합니다.

5.2 사용 예시: 객체의 열거 가능한 속성 반복

for...in 문은 객체의 모든 열거 가능한 속성을 반복하여 처리할 때 유용합니다. 아래는 몇 가지 예시입니다.

예시 1: 객체의 모든 속성 출력

const person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

for (let key in person) {
    console.log(key + ": " + person[key]);
}

출력 결과:

name: John
age: 30
city: New York

위 예시에서는 person 객체의 모든 열거 가능한 속성을 반복하여 출력합니다. for...in 문은 person 객체의 각 속성 키를 key 변수에 할당하고, 해당 키와 값을 출력합니다.

예시 2: 중첩 객체의 속성 출력

const company = {
    name: 'Tech Corp',
    employees: {
        manager: 'Alice',
        developer: 'Bob',
        designer: 'Charlie'
    }
};

for (let key in company.employees) {
    console.log(key + ": " + company.employees[key]);
}

출력 결과:

manager: Alice
developer: Bob
designer: Charlie

위 예시에서는 company 객체 내의 employees 객체의 모든 열거 가능한 속성을 반복하여 출력합니다. for...in 문을 사용하여 중첩된 객체의 속성에도 접근할 수 있습니다.

예시 3: 객체의 속성과 값의 길이 계산

const dimensions = {
    width: 100,
    height: 200,
    depth: 50
};

let total = 0;
for (let key in dimensions) {
    total += dimensions[key];
}
console.log("Total dimensions: " + total);

출력 결과:

Total dimensions: 350

위 예시에서는 dimensions 객체의 모든 속성 값을 합산하여 총합을 계산합니다. for...in 문을 사용하여 각 속성 값을 반복적으로 접근하고, 이를 합산하여 총합을 출력합니다.

for...in 문은 객체의 열거 가능한 속성을 반복하여 작업을 수행할 때 매우 유용합니다. 객체의 각 속성에 접근하여 필요한 작업을 수행할 수 있으며, 이를 통해 객체의 속성을 효율적으로 다룰 수 있습니다.

 

6. for...of 문

6.1 for...of 문의 기본 구조와 동작 원리

for...of 문은 반복 가능한 객체(iterable object)의 값들을 순회(iterate)할 때 사용됩니다. 배열, 문자열, Map, Set 등의 객체를 반복하여 각 요소의 값을 처리할 수 있습니다. for...of 문은 각 반복마다 객체의 값을 반환하므로, 보다 간결하고 직관적인 코드를 작성할 수 있습니다. 기본 구조는 다음과 같습니다:

for (let value of iterable) {
    // 실행할 코드
}

• value: 반복 가능한 객체의 각 값을 나타냅니다.
• iterable: 반복할 수 있는 객체를 나타냅니다.

for...of 문은 배열과 같은 순차적인 데이터 구조를 처리할 때 특히 유용합니다.

6.2 사용 예시: 반복 가능한 객체의 값 반복

for...of 문은 배열, 문자열, Map, Set 등 다양한 반복 가능한 객체를 처리할 때 사용됩니다. 아래는 몇 가지 예시입니다.

예시 1: 배열의 모든 요소 출력

const fruits = ['apple', 'banana', 'cherry'];

for (let fruit of fruits) {
    console.log(fruit);
}

출력 결과:

apple
banana
cherry

위 예시에서는 fruits 배열의 모든 요소를 순회하며, 각 요소를 출력합니다. for...of 문을 사용하여 배열의 각 요소를 fruit 변수에 할당하고, 이를 출력합니다.

예시 2: 문자열의 각 문자 출력

const message = 'Hello';

for (let char of message) {
    console.log(char);
}

출력 결과:

H
e
l
l
o

위 예시에서는 message 문자열의 각 문자를 순회하며, 각 문자를 출력합니다. for...of 문을 사용하여 문자열의 각 문자를 char 변수에 할당하고, 이를 출력합니다.

예시 3: Set의 모든 요소 출력

const uniqueNumbers = new Set([1, 2, 3, 4, 5]);

for (let number of uniqueNumbers) {
    console.log(number);
}

출력 결과:

1
2
3
4
5

위 예시에서는 uniqueNumbers Set의 모든 요소를 순회하며, 각 요소를 출력합니다. for...of 문을 사용하여 Set의 각 요소를 number 변수에 할당하고, 이를 출력합니다.

예시 4: Map의 모든 키-값 쌍 출력

const userRoles = new Map([
    ['Alice', 'Admin'],
    ['Bob', 'User'],
    ['Charlie', 'Guest']
]);

for (let [user, role] of userRoles) {
    console.log(`${user}: ${role}`);
}

출력 결과:

Alice: Admin
Bob: User
Charlie: Guest

위 예시에서는 userRoles Map의 모든 키-값 쌍을 순회하며, 각 쌍을 출력합니다. for...of 문을 사용하여 Map의 각 키-값 쌍을 user와 role 변수에 할당하고, 이를 출력합니다.

for...of 문은 반복 가능한 객체를 처리할 때 매우 유용합니다. 간결하고 직관적인 구문을 제공하여 코드의 가독성을 높이며, 다양한 반복 가능한 객체를 효율적으로 순회할 수 있습니다.

 

7. break와 continue 문

7.1 break 문: 반복문 종료

break 문은 반복문 내에서 사용되어, 반복문을 즉시 종료하고 반복문 블록의 다음 코드로 실행을 이동시킵니다. break 문은 모든 반복문(for, while, do...while, for...in, for...of)에서 사용할 수 있습니다.

예시 1: 특정 조건에서 반복문 종료

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

출력 결과:

0
1
2
3
4

위 예시에서는 i가 5가 될 때 break 문이 실행되어 반복문이 종료됩니다. 따라서 5까지 출력되지 않고, 4까지 출력된 후 반복문이 종료됩니다.

예시 2: while 문에서 break 사용

let count = 0;
while (true) {
    console.log(count);
    count++;
    if (count === 3) {
        break;
    }
}

출력 결과:

0
1
2

위 예시에서는 무한 반복이지만, count가 3이 될 때 break 문이 실행되어 반복문이 종료됩니다.

7.2 continue 문: 다음 반복으로 건너뛰기

continue 문은 반복문 내에서 사용되어, 현재 반복 주기의 나머지 코드를 건너뛰고 다음 반복 주기로 이동합니다. continue 문 역시 모든 반복문에서 사용할 수 있습니다.

예시 1: 특정 조건에서 다음 반복으로 건너뛰기

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

출력 결과:

0
1
3
4

위 예시에서는 i가 2일 때 continue 문이 실행되어 console.log(i)가 실행되지 않고 다음 반복으로 넘어갑니다. 따라서 2는 출력되지 않습니다.

예시 2: while 문에서 continue 사용

let count = 0;
while (count < 5) {
    count++;
    if (count === 2) {
        continue;
    }
    console.log(count);
}

출력 결과:

1
3
4
5

위 예시에서는 count가 2일 때 continue 문이 실행되어 console.log(count)가 실행되지 않고 다음 반복으로 넘어갑니다. 따라서 2는 출력되지 않습니다.

break와 continue 문은 반복문 내에서 특정 조건을 만족할 때 반복문을 제어하는 데 매우 유용합니다. break 문은 반복문을 완전히 종료시키고, continue 문은 현재 반복 주기를 건너뛰고 다음 반복 주기로 이동하게 합니다. 이러한 제어문을 적절하게 사용하면 반복문 내에서 보다 유연한 흐름 제어가 가능합니다.

 

8. 반복문 선택 가이드

8.1 상황에 맞는 반복문 선택 방법

JavaScript에서 반복문을 선택할 때는 특정 상황과 목적에 따라 가장 적합한 반복문을 선택하는 것이 중요합니다. 각 반복문은 고유의 장점과 사용 사례가 있으므로, 이를 이해하고 올바르게 사용하는 것이 코드의 효율성과 가독성을 높이는 데 도움이 됩니다.

for 문:

• 사용 상황: 반복 횟수가 명확하게 정해져 있는 경우.
• 장점: 초기화, 조건식, 증감식을 한 줄에 작성하여 반복 구조를 명확히 표현할 수 있음.
• 예시: 배열의 요소를 순회할 때.

const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

while 문:

• 사용 상황: 반복 횟수가 명확하지 않고, 조건이 참인 동안 계속 반복해야 하는 경우.
• 장점: 조건식이 참일 때까지 반복할 수 있음.
• 예시: 사용자의 특정 입력을 기다릴 때.

let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

do...while 문:

• 사용 상황: 반복을 최소 한 번은 실행해야 하는 경우.
• 장점: 조건식을 평가하기 전에 코드 블록을 최소 한 번 실행.
• 예시: 사용자 입력을 받아야 하는 경우.

let input;
do {
    input = prompt('명령을 입력하세요 (종료하려면 exit 입력):');
    console.log(`입력한 명령: ${input}`);
} while (input !== 'exit');

for...in 문:

• 사용 상황: 객체의 열거 가능한 속성을 반복해야 하는 경우.
• 장점: 객체의 모든 열거 가능한 속성을 쉽게 순회할 수 있음.
• 예시: 객체의 속성과 값을 출력할 때.

const object = {a: 1, b: 2, c: 3};
for (let key in object) {
    console.log(key + ": " + object[key]);
}

for...of 문:

• 사용 상황: 반복 가능한 객체(배열, 문자열, Map, Set 등)의 값을 순회해야 하는 경우.
• 장점: 반복 가능한 객체의 값을 간단하게 순회할 수 있음.
• 예시: 배열의 요소를 출력할 때.

const array = ['apple', 'banana', 'cherry'];
for (let fruit of array) {
    console.log(fruit);
}

8.2 코드 효율성을 높이는 팁

반복문을 사용할 때 코드의 효율성을 높이는 몇 가지 팁을 고려하면 성능 향상에 도움이 됩니다.

1. 반복문 내에서 조건식 최소화:

조건식은 반복문이 실행될 때마다 평가되므로, 불필요한 조건식을 반복문 내에 작성하지 않도록 주의합니다. 조건식을 반복문 외부로 옮길 수 있다면 성능을 개선할 수 있습니다.

const length = array.length;
for (let i = 0; i < length; i++) {
    console.log(array[i]);
}

2. 중첩 반복문 피하기:

중첩 반복문은 성능에 큰 영향을 미칠 수 있으므로, 가능한 피하는 것이 좋습니다. 중첩 반복문을 사용해야 한다면, 외부 반복문의 횟수를 최소화하고, 내부 반복문이 효율적으로 작동하도록 최적화합니다.

3. break와 continue의 적절한 사용:

필요 없는 반복을 피하기 위해 break와 continue 문을 적절히 사용합니다. break 문은 반복문을 즉시 종료하고, continue 문은 현재 반복을 건너뛰고 다음 반복으로 이동하게 합니다.

4. 배열 메서드 활용:

배열을 순회할 때는 forEach, map, filter, reduce 등의 배열 메서드를 활용하면 코드가 간결해지고 가독성이 높아집니다.

array.forEach(item => console.log(item));

5. 변수 선언 위치 최적화:

반복문 내에서 사용되는 변수를 반복문 외부에 선언하여 불필요한 변수 선언을 피합니다.

let sum = 0;
for (let i = 0; i < array.length; i++) {
    sum += array[i];
}

상황에 맞는 반복문을 선택하고, 코드의 효율성을 높이는 다양한 팁을 적용하면, 보다 최적화된 JavaScript 코드를 작성할 수 있습니다. 이를 통해 성능 향상과 유지 보수성을 동시에 달성할 수 있습니다.

 

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.05 - [Study] - 10. JavaScript 연산자와 조건문 이해하기 | 웹 개발 기초

10. JavaScript 연산자와 조건문 이해하기 | 웹 개발 기초

2024.07.05 - [Study] - 09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

2024.07.04 - [Study] - 08. CSS Layout 종합 학습 | 웹 개발 기초

08. CSS Layout 종합 학습 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)