자바스크립트 배열 반복: 6가지 고급 방법과 실무 활용

배열을 반복하는 작업은 자바스크립트 개발에서 필수적입니다. 상황에 따라 적절한 반복 방법을 선택하는 것이 코드 성능과 가독성에 큰 영향을 미칠 수 있습니다. 이번 포스팅에서는 배열을 반복하는 6가지 주요 방법을 소개하고, 각각의 실무 적용 시기를 설명하겠습니다.

1. `for` 루프

for 루프는 자바스크립트에서 가장 기본적인 반복 방식으로, 배열의 인덱스를 직접 제어할 수 있습니다. 복잡한 조건이 필요한 경우 유용합니다.

const arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

사용 시기:

인덱스를 직접 제어하거나, 조건에 따라 특정 요소를 건너뛰거나 중단할 때 유용합니다.

2. `for...of` 루프

for...of는 배열의 각 요소 값을 순차적으로 가져옵니다. 인덱스가 필요 없을 때 간편하게 사용할 수 있으며, 가독성도 뛰어납니다.

const arr = [1, 2, 3, 4];
for (const value of arr) {
  console.log(value);
}

사용 시기:

배열의 값만 필요할 때, 가독성을 중요시하는 코드에 적합합니다

3. `forEach` 메서드

forEach는 고차 함수로, 각 배열 요소에 대해 한 번씩 제공된 함수를 실행합니다. 부작용을 필요로 하는 작업, 예를 들어 DOM 조작 또는 콘솔 출력 작업에 자주 사용됩니다.

const arr = [1, 2, 3, 4];
arr.forEach(value => {
  console.log(value);
});

사용 시기:

반환값이 필요 없고, 부작용을 발생시키는 작업에 적합합니다.

4. `map` 메서드

map은 각 배열 요소에 대해 주어진 함수를 적용하고, 그 결과로 새로운 배열을 반환합니다. 배열을 변환해야 할 때 유용하며, 함수형 프로그래밍에서 자주 사용됩니다.

const arr = [1, 2, 3, 4];
const newArr = arr.map(value => value * 2);
console.log(newArr);  // [2, 4, 6, 8]

사용 시기:

배열 요소를 변환하고 새로운 배열이 필요할 때 유용합니다

5. `while` 루프

while 루프는 조건이 true인 동안 계속해서 반복합니다. 동적 조건이 필요한 반복 작업에 사용되며, 일반적인 for 루프보다 유연합니다.

let i = 0;
const arr = [1, 2, 3, 4];
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

사용 시기:

동적 조건에 따라 반복을 제어할 때 사용됩니다

6. `do...while` 루프

do...while은 while과 비슷하지만, 조건을 평가하기 전에 블록을 최소한 한 번 실행합니다.

let i = 0;
const arr = [1, 2, 3, 4];
do {
  console.log(arr[i]);
  i++;
} while (i < arr.length);

사용 시기:

반드시 한 번은 실행해야 하는 작업에 적합합니다

실무 활용 팁

데이터 변환: 데이터를 변환하여 새로운 배열을 생성할 때는 map()을 사용하는 것이 적합합니다. 예를 들어, API 응답을 처리하고 가공된 데이터를 사용할 때 유용합니다.
부작용 처리: forEach는 부작용이 필요한 작업에 적합합니다. 예를 들어, 각 배열 요소를 사용해 DOM을 조작하거나 콘솔에 로그를 찍는 경우 유용합니다.
성능 최적화: for 루프는 큰 데이터셋을 처리할 때 성능 최적화를 고려할 수 있는 방법 중 하나입니다. 반복 중단이나 조건부 반복이 필요한 경우 특히 유용합니다.
가독성 고려: 배열 요소에만 집중하고 싶을 때는 for...of 또는 forEach를 사용하는 것이 가독성을 높이는 데 도움이 됩니다.

결론

배열을 반복하는 방법은 다양하지만, 각각의 상황에 맞는 방식을 선택하는 것이 중요합니다. 데이터 처리, 부작용 관리, 성능 최적화 등 요구사항에 따라 가장 적합한 반복 방법을 사용하는 것이 코드의 효율성과 가독성을 모두 높일 수 있습니다.

이 포스팅을 통해 여러분도 다양한 배열 반복 방법을 더 잘 이해하고, 실무에 맞게 적용할 수 있기를 바랍니다. 💡

실무

아래는 https://jsonplaceholder.typicode.com API를 활용하여 배열 데이터를 반복하면서 JSON 데이터를 출력하는 예제입니다. 각 반복 방법(for, for...of, forEach, map, while, do...while)을 사용해 API로부터 가져온 데이터를 처리하는 코드를 보여줍니다.

예제: 배열 반복 방법을 사용해 API 데이터 처리하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API 데이터 반복 처리</title>
</head>
<body>

  <h1>API 데이터를 다양한 반복 방법으로 출력</h1>
  <button id="fetchData">API 데이터 가져오기</button>

  <script>
    const apiUrl = 'https://jsonplaceholder.typicode.com/posts';

    // API 데이터를 가져오는 함수
    const fetchData = async () => {
      try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        return data;
      } catch (error) {
        console.error('API 요청 실패:', error);
      }
    };

    document.getElementById('fetchData').addEventListener('click', async () => {
      const data = await fetchData();

      if (!data) return;

      console.log("1. for 루프 사용:");
      for (let i = 0; i < data.length; i++) {
        console.log(`ID: ${data[i].id}, Title: ${data[i].title}`);
      }

      console.log("\n2. for...of 루프 사용:");
      for (const post of data) {
        console.log(`ID: ${post.id}, Title: ${post.title}`);
      }

      console.log("\n3. forEach 메서드 사용:");
      data.forEach(post => {
        console.log(`ID: ${post.id}, Title: ${post.title}`);
      });

      console.log("\n4. map 메서드 사용:");
      const postTitles = data.map(post => post.title);
      console.log(postTitles);

      console.log("\n5. while 루프 사용:");
      let index = 0;
      while (index < data.length) {
        console.log(`ID: ${data[index].id}, Title: ${data[index].title}`);
        index++;
      }

      console.log("\n6. do...while 루프 사용:");
      let counter = 0;
      do {
        console.log(`ID: ${data[counter].id}, Title: ${data[counter].title}`);
        counter++;
      } while (counter < data.length);
    });
  </script>

</body>
</html>

코드 설명:

API 데이터 가져오기: fetchData() 함수는 fetch()를 통해 https://jsonplaceholder.typicode.com/posts에서 데이터를 가져옵니다. 이 데이터를 JSON으로 변환하여 배열 형태로 반환합니다.
배열 반복 방법: 버튼을 클릭하면 다양한 반복 방법을 사용하여 API에서 가져온 게시물의 id와 title을 출력합니다.
- for 루프: 배열의 길이를 기준으로 반복하면서 각 요소에 접근.
- for...of: 배열의 각 요소를 순차적으로 가져와서 출력.
- forEach: 고차 함수를 사용해 배열의 각 요소에 대해 지정된 작업을 수행.
- map: 각 게시물의 제목을 변환하여 새로운 배열로 반환.
- while: 조건에 따라 배열을 순차적으로 반복.
- do...while: 조건을 나중에 검사하는 반복문으로 최소 한 번은 실행.

실무 활용

이 코드는 API 데이터를 처리하는 기본적인 예제로, 실무에서 비동기 작업을 처리하는 상황에서 자주 사용됩니다. 특히, 각 반복 방식의 장점을 활용해 데이터를 효과적으로 처리할 수 있습니다.

LUCKY BLOG

이 블로그 검색

Pinned Post

배우자 유산·사산휴가 신설부터 출산 전 배우자 출산휴가, 임신 중 배우자를 위한 육아휴직까지 핵심 내용 정리