[Javascript] 시나브로 자바스크립트 4주차 이모저모 - Array 메소드편

2025년 3월 7일

#Javascript#Inflearn#Sinabro#Array#Map#Reduce

JavaScript Array 메소드 - Map과 Reduce

배열 메소드의 올바른 사용법과 성능 최적화 전략에 대해 알아보자

들어가며

JavaScript에서 배열 처리에 사용되는 여러 메소드들이 있다.. 특히 map()과 reduce() 메소드는 함수형 프로그래밍 패러다임을 활용한 배열 처리의 강력한 도구이다. 이 글에서는 두 메소드의 올바른 사용법과 성능 최적화 전략에 대해 자세히 알아본다.

Map 메소드

기본 사용법

map() 메소드는 원본 배열의 각 요소를 변환하여 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

array.map(callback(currentValue, index, array), thisArg);

콜백 함수의 파라미터:

  1. currentValue: 현재 처리 중인 배열의 요소
  2. index (선택적): 현재 처리 중인 요소의 인덱스
  3. array (선택적): map()을 호출한 원본 배열
  4. thisArg (선택적): 콜백 함수 내에서 this로 사용할 값

간단한 예제:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

실전 예제

영화 정보가 담긴 배열에서 추가 속성을 생성해야 하는 상황을 생각해보자.

const movies = [
  {
    title: "Rent",
    year: 2005,
    genres: ["Musical", "Drama"],
  },
  {
    title: "Tick",
    year: 2011,
    genres: ["Biography", "Drama"],
  },
];

이 데이터에 genre 속성을 추가하고, genres 배열을 문자열로 변환해보자.

스프레드 연산자와 속성 복사

이 작업을 수행하는 두 가지 방법이 있다.

방법 1: 모든 속성을 명시적으로 나열

const result1 = movies.map((movie) => {
  return {
    title: movie.title,
    year: movie.year,
    genres: movie.genres,
    genre: movie.genres.join(" / "),
  };
});

방법 2: 스프레드 연산자 사용

const result2 = movies.map((movie) => {
  return {
    ...movie,
    genre: movie.genres.join(" / "),
  };
});

두 방법 모두 동일한 결과를 반환하지만, 동작 방식에는 차이가 있다.

구현 방식별 차이점

  1. 코드 작성 방식

    • 첫 번째 방식은 모든 속성을 명시적으로 나열한다.
    • 두 번째 방식은 스프레드 연산자를 사용해 기존 객체의 모든 속성을 새 객체에 복사한다.

  2. 유지보수성

    • 첫 번째 방식은 필요한 속성만 선택할 수 있어 더 명확할 수 있다.
    • 두 번째 방식은 코드가 더 간결하고, 원본 객체에 속성이 추가되더라도 코드를 수정할 필요가 없다.

  3. 성능

    • 일반적인 경우 성능 차이는 미미하다.
    • 객체에 많은 속성이 있을 경우 첫 번째 방식이 더 효율적일 수 있다.

추천 방식: 기존 속성을 모두 유지하면서 추가 속성만 다루는 경우 스프레드 방식이 더 적합하다.

  • 간결성: 코드가 짧고 읽기 쉽다.
  • 유지보수성: 원본 객체 구조가 변경되어도 코드 수정이 필요 없다.
  • 오류 가능성 감소: 속성을 누락할 가능성이 없다.
  • 의도 명확성: "원본 객체의 모든 속성을 유지하며 새 속성을 추가한다"는 의도가 명확하다.

Reduce 메소드

기본 구문

reduce() 메소드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

콜백 함수의 파라미터

  1. accumulator: 누적값. 이전 반복에서 반환된 값이 저장된다.
  2. currentValue: 현재 처리 중인 요소의 값.
  3. index (선택적): 현재 처리 중인 요소의 인덱스.
  4. array (선택적): reduce()를 호출한 원본 배열.

initialValue (선택적)

  • 첫 번째 콜백 호출에서 accumulator로 사용되는 값이다.
  • 제공하지 않으면 배열의 첫 번째 요소가 초기 accumulator가 되고, currentValue는 두 번째 요소부터 시작한다.
  • 빈 배열에서 initialValue 없이 reduce()를 호출하면 오류가 발생한다. (TypeError: Reduce of empty array with no initial value)
  • 안전하고 의도된 동작을 보장하기 위해 항상 initialValue를 제공하는 것이 좋은 습관이다.

주요 특징과 활용

  • 다양한 출력 타입: 배열을 숫자, 문자열, 객체, 새 배열 등 어떤 형태로든 변환 가능
  • 체이닝 대체: 여러 배열 메소드를 체이닝하는 대신 하나의 reduce로 대체 가능
  • 조기 종료 불가: 모든 배열 요소를 순회한다 (중간에 중단할 수 없음)

언제 Reduce를 사용해야 할까?

  1. 입/출력 데이터 타입이 다를 때

    // 배열을 객체로 변환 (id를 키로 사용)
const arrayToObject = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});

  2. 누적 계산이 필요할 때:

    • 합계, 평균, 최대/최소값 등을 구할 때 사용한다.

  3. 복잡한 데이터 변환 과정이 필요할 때:

    • 여러 단계의 필터링, 그룹화, 변환이 함께 필요한 경우 사용한다.

  4. 체이닝을 줄이고 싶을 때:

    • map().filter().sort() 같은 체이닝 대신 하나의 reduce로 처리할 때 사용한다.

실전 예제

영화를 장르별로 그룹화하는 예제를 살펴보자.

// 영화를 장르별로 그룹화
const moviesByGenre = movies.reduce((acc, movie) => {
  movie.genres.forEach((genre) => {
    if (!acc[genre]) acc[genre] = [];
    acc[genre].push(movie);
  });
  return acc;
}, {});

결과는 다음과 같다:

{
  "Musical": [{ title: "Rent", year: 2005, genres: ["Musical", "Drama"] }],
  "Drama": [
    { title: "Rent", year: 2005, genres: ["Musical", "Drama"] },
    { title: "Tick", year: 2011, genres: ["Biography", "Drama"] }
  ],
  "Biography": [{ title: "Tick", year: 2011, genres: ["Biography", "Drama"] }]
}

성능 비교

참고: 다음 성능 측정 결과는 Node.js v20.10.0 환경에서 테스트되었다. 결과는 하드웨어, 브라우저, JavaScript 엔진 등 실행 환경에 따라 달라질 수 있다.

배열 처리 메소드의 성능을 실제로 비교해보자.

메소드 체이닝 vs. Reduce

대량의 데이터(100만 개 항목)를 처리할 때 다양한 접근 방식의 성능을 비교해보자. 아래 코드로 테스트를 수행했다:

// 대량의 테스트 데이터 생성
const generateLargeData = (size) => {
  return Array.from({ length: size }, (_, index) => ({
    category: ["A", "B", "C", "D"][Math.floor(Math.random() * 4)],
    id: index,
    isActive: Math.random() > 0.3,
    value: Math.floor(Math.random() * 1000),
  }));
};

// 데이터 생성 (100만 항목)
const data = generateLargeData(1000000);

console.log(`테스트 데이터 크기: ${data.length}개 항목`);

// 예제 1: 활성 상태인 항목 중 카테고리가 'A'인 항목들의 value 합계 계산
console.log("\n예제 1: 조건에 맞는 항목의 합계 계산");

// 방법 1: 메소드 체이닝 (최적화하지 않은 버전)
console.time("체이닝 (비최적화)");
const resultChaining1 = data
  .filter((item) => item.isActive)
  .filter((item) => item.category === "A")
  .map((item) => item.value)
  .reduce((sum, value) => sum + value, 0);
console.timeEnd("체이닝 (비최적화)");

// 방법 2: 메소드 체이닝 (최적화 버전)
console.time("체이닝 (최적화)");
const resultChaining2 = data
  .filter((item) => item.isActive && item.category === "A")
  .reduce((sum, item) => sum + item.value, 0);
console.timeEnd("체이닝 (최적화)");

// 방법 3: 단일 reduce 사용
console.time("단일 reduce");
const resultReduce = data.reduce((sum, item) => {
  if (item.isActive && item.category === "A") {
    return sum + item.value;
  }
  return sum;
}, 0);
console.timeEnd("단일 reduce");

// 결과 확인
console.log("체이닝 (비최적화) 결과:", resultChaining1);
console.log("체이닝 (최적화) 결과:", resultChaining2);
console.log("단일 reduce 결과:", resultReduce);

// 예제 2: 카테고리별 활성 항목의 value 합계를 객체로 반환
console.log("\n예제 2: 카테고리별 합계 계산");

// 방법 1: 체이닝 방식 (비최적화)
console.time("복합 체이닝 (비최적화)");
const activeItems = data.filter((item) => item.isActive);
const categories = [...new Set(activeItems.map((item) => item.category))];
const categoryTotals1 = categories.reduce((result, category) => {
  result[category] = activeItems
    .filter((item) => item.category === category)
    .reduce((sum, item) => sum + item.value, 0);
  return result;
}, {});
console.timeEnd("복합 체이닝 (비최적화)");

// 방법 2: 체이닝 방식 (최적화)
console.time("복합 체이닝 (최적화)");
const categoryTotals2 = data
  .filter((item) => item.isActive)
  .reduce((result, item) => {
    if (!result[item.category]) {
      result[item.category] = 0;
    }
    result[item.category] += item.value;
    return result;
  }, {});
console.timeEnd("복합 체이닝 (최적화)");

// 방법 3: 단일 reduce만 사용
console.time("복합 단일 reduce");
const categoryTotalsReduce = data.reduce((result, item) => {
  if (item.isActive) {
    if (!result[item.category]) {
      result[item.category] = 0;
    }
    result[item.category] += item.value;
  }
  return result;
}, {});
console.timeEnd("복합 단일 reduce");

실행 결과:

예제 1: 조건에 맞는 항목의 합계 계산
체이닝 (비최적화): 21.243ms
체이닝 (최적화): 13.388ms
단일 reduce: 7.668ms

예제 2: 카테고리별 합계 계산
복합 체이닝 (비최적화): 54.133ms
복합 체이닝 (최적화): 26.637ms
복합 단일 reduce: 19.557ms

결론: 복잡한 데이터 처리에서는 단일 reduce가 일반적으로 더 빠르다. 하지만 성능 차이는 실행 환경(브라우저, Node.js 버전 등)에 따라 달라질 수 있다.

Push vs. 스프레드 연산자

배열에 요소를 추가할 때 두 방식의 성능 차이를 알아보자. 다음 코드로 테스트했다:

// 성능 테스트를 위한 대량의 데이터 생성
const generateTestData = (size) => {
  return Array.from({ length: size }, (_, index) => ({
    id: index,
    value: Math.random() * 1000,
    text: `Item ${index}`,
    isValid: index % 3 === 0,
  }));
};

// 테스트 데이터 크기
const testSizes = [10000, 100000, 500000];

testSizes.forEach((size) => {
  console.log(`\n==== 테스트 크기: ${size.toLocaleString()} 항목 ====`);
  const data = generateTestData(size);

  // 테스트 1: 조건에 맞는 항목만 배열에 포함 (filter와 유사한 기능)
  console.log("\n----- 테스트 1: 조건부 필터링 -----");

  // Push 방식
  console.time("1. Push 방식");
  const resultPush = data.reduce((acc, item) => {
    if (item.isValid) {
      acc.push(item);
    }
    return acc;
  }, []);
  console.timeEnd("1. Push 방식");

  // Spread 방식
  console.time("2. Spread 방식");
  const resultSpread = data.reduce((acc, item) => {
    return item.isValid ? [...acc, item] : acc;
  }, []);
  console.timeEnd("2. Spread 방식");

  // 결과 검증
  console.log(`결과 배열 길이: ${resultPush.length}`);
  console.log(
    `두 결과가 동일한가: ${resultPush.length === resultSpread.length}`
  );

  // ========================================================================

  // 테스트 2: 모든 항목을 변환하여 새 배열 생성 (map과 유사한 기능)
  console.log("\n----- 테스트 2: 모든 항목 변환 -----");

  // Push 방식
  console.time("1. Push 방식");
  const transformedPush = data.reduce((acc, item) => {
    acc.push({
      id: item.id,
      formattedValue: `$${item.value.toFixed(2)}`,
      category: item.isValid ? "valid" : "invalid",
    });
    return acc;
  }, []);
  console.timeEnd("1. Push 방식");

  // Spread 방식
  console.time("2. Spread 방식");
  const transformedSpread = data.reduce((acc, item) => {
    return [
      ...acc,
      {
        id: item.id,
        formattedValue: `$${item.value.toFixed(2)}`,
        category: item.isValid ? "valid" : "invalid",
      },
    ];
  }, []);
  console.timeEnd("2. Spread 방식");

  console.log(`결과 배열 길이: ${transformedPush.length}`);

  // ========================================================================

  // 테스트 3: 배열 분할 (특정 크기의 청크로 나누기)
  console.log("\n----- 테스트 3: 배열 청킹 -----");
  const chunkSize = 1000;

  // Push 방식
  console.time("1. Push 방식");
  const chunksPush = data.reduce((chunks, item, index) => {
    const chunkIndex = Math.floor(index / chunkSize);

    if (!chunks[chunkIndex]) {
      chunks[chunkIndex] = [];
    }

    chunks[chunkIndex].push(item);
    return chunks;
  }, []);
  console.timeEnd("1. Push 방식");

  // Spread 방식
  console.time("2. Spread 방식");
  const chunksSpread = data.reduce((chunks, item, index) => {
    const chunkIndex = Math.floor(index / chunkSize);

    if (!chunks[chunkIndex]) {
      chunks[chunkIndex] = [];
    }

    chunks[chunkIndex] = [...chunks[chunkIndex], item];
    return chunks;
  }, []);
  console.timeEnd("2. Spread 방식");

  console.log(`청크 개수: ${chunksPush.length}`);

  // ========================================================================

  // 메모리 사용량 비교 (Node.js에서만 정확함)
  try {
    if (typeof process !== "undefined" && process.memoryUsage) {
      console.log("\n----- 메모리 사용량 -----");
      console.log(
        `초기: ${Math.round(process.memoryUsage().heapUsed / 1024 / 1024)}MB`
      );

      // 강제 가비지 컬렉션 (Node.js에서)
      if (global.gc) {
        global.gc();
        console.log(
          `GC 후: ${Math.round(process.memoryUsage().heapUsed / 1024 / 1024)}MB`
        );
      }
    }
  } catch (e) {
    console.log("메모리 측정은 Node.js에서만 가능합니다.");
  }
});

실행 결과:

10,000개 항목 처리 시:

----- 테스트 1: 조건부 필터링 -----
1. Push 방식: 0.582ms
2. Spread 방식: 6.308ms
결과 배열 길이: 3334
두 결과가 동일한가: true

----- 테스트 2: 모든 항목 변환 -----
1. Push 방식: 1.500ms
2. Spread 방식: 39.152ms
결과 배열 길이: 10000

----- 테스트 3: 배열 청킹 -----
1. Push 방식: 0.772ms
2. Spread 방식: 4.342ms
청크 개수: 10

----- 메모리 사용량 -----
초기: 7MB
GC 후: 6MB

100,000개 항목 처리 시:

----- 테스트 1: 조건부 필터링 -----
1. Push 방식: 0.772ms
2. Spread 방식: 1.376s
결과 배열 길이: 33334
두 결과가 동일한가: true

----- 테스트 2: 모든 항목 변환 -----
1. Push 방식: 8.321ms
2. Spread 방식: 11.174s
결과 배열 길이: 100000

----- 테스트 3: 배열 청킹 -----
1. Push 방식: 1.552ms
2. Spread 방식: 35.95ms
청크 개수: 100

----- 메모리 사용량 -----
초기: 95MB
GC 후: 32MB

500,000개 항목 처리 시:

500,000개의 경우 많은 테스트를 해보지 못함

----- 테스트 1: 조건부 필터링 -----
1. Push 방식: 3.48ms
2. Spread 방식: 29.570s
결과 배열 길이: 166667
두 결과가 동일한가: true

----- 테스트 2: 모든 항목 변환 -----
1. Push 방식: 45.211ms
2. Spread 방식: 6:05.839 (m:ss.mmm)
결과 배열 길이: 500000

----- 테스트 3: 배열 청킹 -----
1. Push 방식: 5.473ms
2. Spread 방식: 187.348ms
청크 개수: 500

----- 메모리 사용량 -----
초기: 515MB
GC 후: 149MB

결론: 대용량 데이터 처리 시 push 방식이 압도적으로 빠르다. 하지만 소규모 데이터(수백 개 이하)에서는 그 차이가 크게 체감되지 않을 수 있으며, 코드 가독성을 위해 스프레드 연산자를 사용하는 것도 합리적인 선택일 수 있다.

가비지 컬렉션(GC)과 배열 처리

JavaScript의 가비지 컬렉션은 메모리 관리에 중요한 역할을 한다. 배열 메소드 사용 방식에 따라 GC 동작과 메모리 사용 패턴이 크게 달라질 수 있다.

스프레드 연산자와 GC의 관계

스프레드 연산자(...)를 사용하여 배열을 조작할 때, 매 연산마다 새로운 배열이 생성되고 이전 배열은 GC의 대상이 된다.

// 스프레드 방식
const resultSpread = data.reduce((acc, item) => {
  return [...acc, item]; // 매번 새 배열 생성
}, []);

이 방식은 다음과 같은 영향을 미친다:

  1. 메모리 사용량 증가: 일시적으로 많은 메모리를 사용한다.
  2. GC 부하 증가: 가비지 컬렉터가 더 자주, 더 많은 작업을 수행해야 한다.
  3. 성능 저하 가능성: GC가 실행될 때 JavaScript 실행이 잠시 중단될 수 있다(특히 대규모 메모리 정리 시).

Push 메소드와 GC의 관계

반면, push() 메소드는 동일한 배열 객체를 계속 사용하므로 추가 메모리 할당이나 GC가 거의 필요하지 않다.

// Push 방식
const resultPush = data.reduce((acc, item) => {
  acc.push(item); // 동일한 배열 객체 재사용
  return acc;
}, []);

이 방식의 장점:

  1. 안정적인 메모리 사용: 단일 배열 객체만 유지한다.
  2. GC 부하 감소: 임시 객체가 적게 생성되어 GC 작업이 줄어든다.
  3. 성능 안정성: GC로 인한 성능 저하가 적다.

스프레드 방식은 처리 과정에서 메모리 사용량이 크게 증가했다가 GC 후에 감소한다. 반면 push 방식은 메모리 사용이 일정하게 유지된다.

실제 애플리케이션에 미치는 영향

  1. 웹 애플리케이션 응답성: GC가 빈번하게 실행되면 UI 스레드가 차단될 수 있어 사용자 경험이 저하될 수 있다.
  2. 모바일 기기: 제한된 메모리를 가진 모바일 기기에서는 메모리 효율이 더욱 중요하다.
  3. 대규모 데이터 처리: 데이터 분석, 시각화 등 대량의 데이터를 다루는 애플리케이션에서 차이가 두드러진다.

최적화 전략

성능 테스트 결과와 GC 영향을 고려하여 다음과 같은 최적화 전략을 적용할 수 있다:

  1. reduce와 push 조합하기: 배열 결과를 반환하는 reduce 내에서는 스프레드 대신 push 사용하기

    // 좋음
const filtered = data.reduce((acc, item) => {
  if (someCondition(item)) {
    acc.push(transformItem(item));
  }
  return acc;
}, []);

// 피할 것
const filtered = data.reduce((acc, item) => {
  if (someCondition(item)) {
    return [...acc, transformItem(item)];
  }
  return acc;
}, []);

  2. 메소드 체이닝 최적화: 여러 번 필터링할 경우 조건을 결합하기

    // 일반적으로 좋음
const result = data
  .filter((item) => condition1(item) && condition2(item))
  .map((item) => transform(item));

// 일반적으로 피할 것
const result = data
  .filter((item) => condition1(item))
  .filter((item) => condition2(item))
  .map((item) => transform(item));

    참고: 첫 번째 조건(condition1)이 복잡하고 계산 비용이 크며, 많은 항목을 필터링하는 반면, 두 번째 조건(condition2)이 간단하다면 별도의 filter 체인이 더 효율적일 수 있다. 각 상황에 맞게 판단해야 한다.

  3. 적절한 메소드 선택: 용도에 맞게 메소드 선택하기

    • 단순 변환: map
    • 필터링: filter
    • 복잡한 변환/계산: reduce

  4. 메모리 사용량 고려: 대용량 데이터 처리 시 메모리 사용량이 중요할 수 있다.

    • 스프레드 연산은 새 배열을 계속 생성하므로 메모리 사용량이 높다.
    • push는 동일한 배열을 재사용하므로 메모리 효율이 좋다.

마치며

JavaScript 배열 메소드는 데이터 처리의 핵심 도구다. 각 메소드의 특성과 성능 영향을 이해하면 더 효율적인 코드를 작성할 수 있다.

주요 포인트:

  • 간단한 변환은 map을 사용
  • 데이터 형태 변환이나 복잡한 처리는 reduce가 효율적
  • 대용량 데이터 처리 시 스프레드 연산자보다 push가 성능적으로 유리
  • 메소드 체이닝 시 필터 조건을 가능한 한 결합하여 처리

여러분의 프로젝트에서 이런 최적화 전략을 적용해보고, 실제 성능 향상을 경험해보기 바란다.

참고 자료