자바스크립트 반복문: for, while, do-while등 사용법과 예제

자바스크립트 반복문: for, while, do-while등 사용법과 예제

프로그램에서 반복문은 코드의 중복을 줄이고 코드를 간결하면서 효율적으로 작성할 수 있습니다. 배열이나 객체와 같은 자료구조를 처리하는 데에도 반복문은 필수적입니다. 자바스크립에서는 for문, while문, do-while문 등 다양한 조건에서 반복문을 사용할 수 있습니다.

그럼 자바스크립트에서 각각의 반복문을 사용하는 방법에 대해서 알아보겠습니다.


▼ 자바스크립트 반복문 종류

반복설명
for문초기화, 조건식, 증감식으로 이루어진 세 가지 매개변수를 이용하여 반복 작업을 수행
while문조건식이 참일 동안 반복 작업을 수행
do-while문최소한 한 번은 작업을 수행하고 나서 조건식을 검사
for…in문객체의 속성을 반복적으로 처리
for…of문배열 또는 이터러블 객체의 요소를 반복적으로 처리


☞ 각각의 반복문은 상황에 맞게 선택하여 사용하시면 됩니다.

▼ 목차

  1. for문
  2. while문
  3. do-while문
  4. for…in문
  5. for…of문
  6. break문, continue문

1. for 문

for문은 초기화, 조건식, 증감식으로 이루어진 세 가지 매개변수를 이용하여 반복 작업을 수행하는 반복문입니다. 주어진 조건이 참일 경우에만 반복이 수행되고 조건이 거짓이 되면 반복문을 종료합니다.


1. 구문

for (초기화; 조건식; 증감식) {
    // 반복 작업 수행
}
  • 초기화: 반복문에서 사용할 변수를 초기화합니다.
  • 조건식: 반복문이 수행될 조건을 작성합니다.
  • 증감식: 반복문이 한 번 실행될 때마다 변수를 증가시키거나 감소시키는 식을 작성합니다.


2. 사용 예제

// 1부터 5까지의 합을 구하는 예제 코드입니다.

let sum = 0;

for (let i = 1; i <= 5; i++) {
    console.log(i);   // 1, 2, 3, 4, 5
    sum += i;   // sum = sum + i
}

console.log(sum);   // 15

2. while문

while문은 조건식이 참일 동안 반복 작업을 수행하는 반복문입니다. 반복문이 수행되기 전에 조건식이 먼저 검증하고 조건식이 참이면 반복문이 실행됩니다.


1. 구문

while (조건식) {
    // 조건이 참이면 반복 작업 수행
}
  • 조건식: 반복문이 수행될 조건을 작성합니다. 조건식이 참일 경우 반복문이 계속해서 실행되고 거짓일 경우 반복문이 종료됩니다.


2. 사용 예제

// 1부터 5까지의 합을 구하는 예제 코드입니다.

let sum = 0;
let i = 1;

while (i <= 5) {
    console.log(i);   // 1, 2, 3, 4, 5
    sum += i;   // sum = sum + i
    i++;   // 코드가 한 번 반복될 때 i 변수를 1씩 증가시킵니다.
}

console.log(sum);   // 15


☞ 주의사항: i++; 증가시키는 코드를 생략하게 되면 무한 루프가 발생합니다.

3. do-while문

do-while문은 최소한 한 번은 작업을 수행하고 나서 조건식을 검사하는 반복문입니다. 반복 작업을 한 번 이상 수행할 필요가 있는 경우에 사용할 수 있습니다.


1. 구문

do {
      // 반복 작업 수행
} while (조건식);
  • 조건식: 반복문이 수행될 조건을 작성합니다. 조건식이 참일 경우 반복문이 계속 실행되고 거짓일 경우 반복문을 종료합니다.


2. 사용 예제

// 1부터 5까지의 합을 구하는 예제 코드입니다.

let sum = 0;
let i = 1;

do {
    sum += i;   // sum = sum + i
    i++;   // i = i + 1
} while (i <= 5);

console.log(sum);   // 15

4. for…in문

for…in문은 객체의 속성을 반복적으로 처리하는 반복문입니다. 객체 내의 속성을 하나씩 처리할 수 있고 속성의 개수만큼 반복 작업을 수행합니다.


1. 구문

for (변수 in 객체) {
    // 반복 작업 수행
}
  • 변수: 객체 내의 속성 이름이 할당될 변수를 선언합니다.
  • 객체: 반복 작업을 수행할 객체를 지정합니다.


2. 사용 예제

const obj = {
    name: 'BlueShare',
    age: 20,
    gender: 'male'
};

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

// 출력값
// name: BlueShare
// age: 20
// gender: male

5. for…of문

for…of문은 배열을 반복적으로 처리하는 반복문입니다. 반복 작업을 수행할 때 인덱스를 사용할 필요가 없습니다.


1. 구문

for (변수 of 배열) {
    // 반복 작업 수행
}
  • 변수: 배열의 요소가 할당될 변수를 선언합니다.
  • 배열: 반복 작업을 수행할 배열을 지정합니다.


2. 사용 예제

// for...of문
const arr = [1, 2, 3, 4, 5];
let sum = 0;

for (let num of arr) {
    sum += num;
}

console.log(sum); // 15


// for문을 사용하는 경우
sum = 0;
for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
}

console.log(sum); // 15

6. break문, continue문

1.break문 vs continue문

  • break문: 반복문을 종료할 때 사용되는 키워드입니다. break문을 만나면 반복문을 빠져나가고 다음 문장으로 이동합니다.
  • continue문: 반복문의 실행을 건너뛸 때 사용되는 키워드입니다. continue문을 만나면 반복문 내부에서 해당 반복 실행을 건너뛰고 다음 반복을 수행합니다.


2. 사용 예제

// 1. break문 사용 예제
let sum = 0;

for (let i = 1; i <= 10; i++) {
    if (i === 6) break;   // i 값이 6인 경우 반복문을 종료
    sum += i;
}

console.log(sum);   // 15 (1 + 2 + 3 + 4 + 5)


// 2. continue문 사용 예제
sum = 0;
for (let i = 1; i <= 10; i++) {
    if (i % 2 === 1) continue;   // i값이 홀수인 경우 실행문을 건너 뜀
    sum += i;
}

console.log(sum);   // 30 (2 + 4 + 6 + 8 + 10)

자바스크립트 기초 이전 게시물

  1. 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
  2. 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
  3. 자바스크립트 자료형 종류 및 사용 예시
  4. 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
  5. 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
  6. 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
위로 스크롤