4. 자바스크립트 반복문

2024. 10. 23. 15:02·백엔드/자바스크립트

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
'백엔드/자바스크립트' 카테고리의 다른 글
  • 5. 자바스크립트 switch문
  • 3. 자바스크립트 논리 연산자 (Logical Operators)
  • 2. 자바스크립트 연산자와 조건문
  • 1. 자바스크립트 변수와 데이터 타입
작은응애
작은응애
응애부터 으른까지 나의 성장일지
  • 작은응애
    응애개발
    작은응애
  • 글쓰기 관리
  • 전체
    오늘
    어제
    • 분류 전체보기 (7)
      • GitHub (0)
      • 백엔드 (5)
        • 자바스크립트 (5)
        • Node.js (0)
      • 기타 (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    반복문
    js
    조건문
    데이터타입
    논리 연산자
    연산자
    switch
    변수
    자바스크립트
    JavaScript
  • 최근 댓글

  • hELLO· Designed By정상우.v4.10.0
작은응애
4. 자바스크립트 반복문
상단으로

티스토리툴바