티스토리 뷰

IT지식

반복문, JavaScript 문의 종류(1)

고슈슈 2024. 8. 21. 14:15

목차



    반응형

     

    저번 포스팅을 통해 JavaScript의 표현식과 문에 대해서 알아보았습니다. 

    이번 포스팅에서는 JavaScript의 문 중에서도 유용하게 사용할 수 있는 반복문에 대해서 알아보고, 실제 코드 예시와 함께 어떻게 사용할 수 있는지 알아보겠습니다.

     

    ※ 반복문이란?

    반복문(Loop)은 특정 코드를 여러 번 반복해서 실행할 수 있게 해주는 구조입니다. 예를 들어, 1부터 10까지의 숫자를 출력하고 싶다고 가정해볼까요? 일일이 console.log(1); console.log(2); ... console.log(10);처럼 작성할 수도 있지만, 반복문을 사용하면 훨씬 간단하게 작성할 수 있습니다.

    JavaScript에는 몇 가지 주요 반복문이 있는데, 각기 다른 상황에서 유용하게 사용할 수 있습니다.

     

    1. for 반복문

    for 반복문은 가장 기본적이고 널리 사용되는 반복문입니다. 특정 횟수만큼 반복해야 할 때 유용합니다.

    for 반복문은 다음과 같은 구조를 가지고 있습니다

    for (초기값; 조건; 증감) {
    // 반복해서 실행할 코드
}

     

    예시를 통해 더 쉽게 이해해보겠습니다.

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

    이 코드에서는 i의 초기값을 1로 설정하고, i가 10 이하일 때까지 반복하며, 매번 i를 1씩 증가시킵니다. 결과적으로 1부터 10까지의 숫자가 순서대로 출력됩니다.

     

    ▶ 예시

    만약 쇼핑몰에서 여러 개의 상품 가격을 계산해야 한다고 가정해봅시다. 배열에 담긴 상품 가격들을 모두 더하는 코드를 작성할 수 있습니다.

    const prices = [100, 200, 300, 400, 500];
let total = 0;

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

console.log("총 가격: " + total);

    이 코드는 배열 prices에 있는 모든 상품 가격을 더해 총 가격을 출력합니다. prices.length는 배열의 길이를 나타내므로, 배열에 있는 모든 요소를 한 번씩 반복하게 됩니다.

     

    2. while 반복문

    while 반복문은 조건이 참인 동안 계속해서 코드를 실행합니다. 조건을 만족하는 한, 무한히 반복될 수 있기 때문에 반복 조건을 잘 설정해야 합니다. 구조는 다음과 같습니다.

    while (조건) {
    // 반복해서 실행할 코드
}

     

    예시를 통해 이해해보겠습니다.

    let count = 1;

while (count <= 5) {
    console.log("카운트: " + count);
    count++;
}

    이 코드는 count가 5 이하일 때까지 "카운트: "와 현재 숫자를 출력하고, 매번 count를 1씩 증가시킵니다. 그래서 "카운트: 1"부터 "카운트: 5"까지 출력된 후 반복이 종료됩니다.

     

    ▶ 예시

    게임에서 플레이어가 남은 목숨이 있을 때까지 계속 게임을 진행해야 한다고 가정해봅시다.

    let lives = 3;

while (lives > 0) {
    console.log("게임 진행 중...");
    // 게임이 끝나면 목숨이 줄어듭니다
    lives--;
}

console.log("게임 오버");

    이 코드는 lives가 0이 될 때까지 "게임 진행 중..." 메시지를 출력하고, 목숨이 하나씩 줄어듭니다. 목숨이 모두 소진되면 "게임 오버" 메시지가 출력됩니다.

     

    3. do...while 반복문

    do...while 반복문은 while 반복문과 비슷하지만, 중요한 차이점이 하나 있습니다. 바로 반복 조건을 나중에 검사한다는 점입니다. 즉, 조건이 처음부터 거짓이어도 코드가 최소한 한 번은 실행됩니다. 구조는 다음과 같습니다.

    do {
    // 반복해서 실행할 코드
} while (조건);

     

    예시를 보면 더 쉽게 이해할 수 있습니다.

    let number = 0;

do {
    console.log("숫자: " + number);
    number++;
} while (number < 5);

    이 코드는 number가 5보다 작을 때까지 "숫자: "와 현재 값을 출력하고, number를 1씩 증가시킵니다. 이 코드도 "숫자: 0"부터 "숫자: 4"까지 출력한 후 반복이 종료됩니다.

     

    ▶ 예시

    비밀번호를 맞출 때까지 계속해서 입력을 받는 시나리오를 생각해봅시다.

    let correctPassword = "1234";
let inputPassword;

do {
    inputPassword = prompt("비밀번호를 입력하세요:");
} while (inputPassword !== correctPassword);

console.log("로그인 성공!");

    이 코드는 사용자가 비밀번호를 맞출 때까지 계속해서 입력을 받습니다. 비밀번호가 맞으면 "로그인 성공!" 메시지가 출력됩니다.

     

    4. for...in 반복문

    for...in 반복문은 객체의 속성(key)을 반복할 때 유용합니다. 객체의 각 속성에 대해 반복하며 코드를 실행할 수 있습니다. 구조는 다음과 같습니다.

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

     

    예시를 살펴봅시다.

    const user = {
    name: "Alice",
    age: 30,
    city: "Seoul"
};

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

    이 코드는 객체 user의 각 속성을 반복하며 키(key)와 그에 해당하는 값을 출력합니다. 그래서 "name: Alice", "age: 30", "city: Seoul"이 순서대로 출력됩니다.

     

    ▶ 예시

    사용자 정보를 출력하는 웹 페이지에서 데이터를 반복해서 표시해야 할 때 유용합니다.

    const product = {
    id: 101,
    name: "스마트폰",
    price: 799000,
    brand: "BrandName"
};

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

    이 코드는 상품의 ID, 이름, 가격, 브랜드 정보를 반복하며 출력합니다.

     

    5. for...of 반복문

    for...of 반복문은 배열이나 문자열 같은 이터러블 객체의 요소들을 반복할 때 사용합니다. 이 반복문은 배열의 각 요소를 순회하며 코드를 실행할 수 있습니다. 구조는 다음과 같습니다.

    for (let element of 이터러블) {
    // 반복해서 실행할 코드
}

    예시를 통해 알아보겠습니다.

    const colors = ["red", "green", "blue"];

for (let color of colors) {
    console.log(color);
}

    이 코드는 배열 colors의 각 요소를 반복하며 순서대로 출력합니다. 결과적으로 "red", "green", "blue"가 차례대로 출력됩니다.

     

    ▶ 예시

    리스트 형태의 데이터를 화면에 출력해야 할 때 유용합니다.

    const shoppingList = ["사과", "바나나", "우유"];

for (let item of shoppingList) {
    console.log("구매할 항목: " + item);
}

    이 코드는 쇼핑 리스트에 있는 각 항목을 반복하며 "구매할 항목: 사과", "구매할 항목: 바나나", "구매할 항목: 우유"를 출력합니다.

     

    반복문은 JavaScript에서 매우 강력한 도구입니다. 반복적으로 실행해야 하는 작업을 간단하고 효율적으로 처리할 수 있습니다. 이번 포스팅에서 다룬 for, while, do...while, for...in, for...of 반복문을 잘 활용하면, 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있을 것입니다.

    반응형