자바스크립트 반복문: for, while, do-while등 사용법과 예제
프로그램에서 반복문은 코드의 중복을 줄이고 코드를 간결하면서 효율적으로 작성할 수 있습니다. 배열이나 객체와 같은 자료구조를 처리하는 데에도 반복문은 필수적입니다. 자바스크립에서는 for문, while문, do-while문 등 다양한 조건에서 반복문을 사용할 수 있습니다.
그럼 자바스크립트에서 각각의 반복문을 사용하는 방법에 대해서 알아보겠습니다.
▼ 자바스크립트 반복문 종류
반복 | 설명 |
---|---|
for문 | 초기화, 조건식, 증감식으로 이루어진 세 가지 매개변수를 이용하여 반복 작업을 수행 |
while문 | 조건식이 참일 동안 반복 작업을 수행 |
do-while문 | 최소한 한 번은 작업을 수행하고 나서 조건식을 검사 |
for…in문 | 객체의 속성을 반복적으로 처리 |
for…of문 | 배열 또는 이터러블 객체의 요소를 반복적으로 처리 |
☞ 각각의 반복문은 상황에 맞게 선택하여 사용하시면 됩니다.
▼ 목차
- for문
- while문
- do-while문
- for…in문
- for…of문
- 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)
자바스크립트 기초 이전 게시물
- 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
- 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
- 자바스크립트 자료형 종류 및 사용 예시
- 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
- 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
- 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!