1. 자바스크립트의 기본 반복문
(1) for 반복문
가장 많이 사용되는 반복문 중 하나로, 고정된 횟수만큼 반복 실행할 때 유용합니다. for 문은 초기화 ,조건, 증감을 설정하여 루프의 실행을 제어합니다.
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
(2) while 반복문
while 문은 조건이 참일 때 반복 실행됩니다. 조건이 처음부터 거짓일 경우 한 번도 실행되지 않을 수 있습니다.
let i = 0;
while (i < 5) {
console.log(i); // 0, 1, 2, 3, 4
i++;
}
(3) do...while 반복문
do...while 문은 한 번은 무조건 실행된다는 점에서 while 문과 차이가 있습니다. 조건이 나중에 평가되므로 최소 한 번의 실행을 보장합니다.
let i = 0;
do {
console.log(i); // 0, 1, 2, 3, 4
i++;
} while (i < 5);
(4) for...in 반복문
for...in은 객체의 속성 이름(key)을 순회할 때 사용됩니다. 배열에도 사용할 수 있지만, 주로 객체에 적합합니다.
const person = { name: 'John', age: 30, city: 'Seoul' };
for (let key in person) {
console.log(key + ": " + person[key]);
// name: John, age: 30, city: Seoul
}
(5) for...of 반복문
for...of는 배열, 문자열과 같은 반복 가능한 객체를 순회할 때 사용합니다. for...in과는 달리 값을 직접 반환합니다.
let numbers = [1, 2, 3, 4, 5];
for (let num of numbers) {
console.log(num); // 1, 2, 3, 4, 5
}
2. 그 외 자바스크립트 반복문
(1) forEach 메서드
forEach는 배열을 순회하며 각 요소에 대해 함수를 실행하는 메서드입니다. 배열에 직접적으로 사용할 수 있으며, 고차 함수로서 콜백 함수를 전달받아 반복을 수행합니다.
let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach((fruit) => {
console.log(fruit); // apple, banana, cherry
});
- 장점: 반복문에 비해 가독성이 좋고, 특히 콜백 함수와 결합하여 비동기 작업에서 유용하게 사용됩니다.
- 단점: break, continue 문을 사용할 수 없어서 중간에 반복을 종료하거나 건너뛸 수 없습니다.
(2) map 메서드
map은 배열의 각 요소를 변환한 새로울 배열을 반환합니다. 원본 배열은 수정되지 않으며, 변환된 배열을 반환한다는 점에서 forEach와 차이가 있습니다.
let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]
(3) filter 메서드
filter는배열의 각 요소를 조건에 따라 필터링하여 새로운 배열을 반환합니다.
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
(4) reduce 메서드
reduce는 배열의 각 요소를 순회하며 누적된 결과를 반환합니다. 배열의 합산, 곱셈 등 집계 작업에 많이 사용됩니다.
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15
(5) for await...of
비동기 작업을 처리할 때 사용할수있는 최신 문법입니다. 프로미스를 포함한 비동기 반복 객체를 순회 할 때 유용합니다. 특히 비동기 함수 내에서 await과 결합하여 반복을 비동기적으로 처리할 수 있습니다.
async function fetchData(urls) {
for await (let url of urls) {
let response = await fetch(url);
let data = await response.json();
console.log(data);
}
}
let urls = ['https://api.example.com/1', 'https://api.example.com/2'];
fetchData(urls);
3. 그 외
break와 continue
- break: 반복을 즉시 종료하고, 루프 밖으로 나갑니다
for (let i = 0; i < 10; i++) {
if (i === 5) break;
console.log(i); // 0, 1, 2, 3, 4
}
- continue: 현재 반복을 건너뛰고 다음 반복으로 넘어갑니다.
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) continue;
console.log(i); // 1, 3, 5, 7, 9
}
'백엔드 > 자바스크립트' 카테고리의 다른 글
5. 자바스크립트 switch문 (1) | 2024.10.23 |
---|---|
3. 자바스크립트 논리 연산자 (Logical Operators) (0) | 2024.10.23 |
2. 자바스크립트 연산자와 조건문 (0) | 2024.10.21 |
1. 자바스크립트 변수와 데이터 타입 (0) | 2024.10.21 |