JavaScript map() 메서드에서 이전 요소에 접근하는 방법

JavaScript에서 map() 메서드를 사용할 때 현재 순회 중인 요소뿐만 아니라 바로 이전 요소에도 접근해야 하는 경우가 종종 있습니다. 예를 들어 각 항목과 그 앞에 위치한 항목을 함께 비교하거나, 이전 값을 기반으로 새로운 속성을 추가하고 싶을 때가 그렇습니다.

다행히 map() 콜백 함수는 두 번째 인자로 인덱스(index)를 제공하기 때문에, 원본 배열에 인덱스로 접근하면 이전 요소를 손쉽게 가져올 수 있습니다.

예제 데이터 준비

먼저 다음과 같은 과목 정보 배열이 있다고 가정해 보겠습니다.

var details = [
    {subjectId:110, subjectName: 'Java' },
    {subjectId:111, subjectName: 'JavaScript' },
    {subjectId:112, subjectName: 'MySQL' },
    {subjectId:113, subjectName: 'MongoDB' }
];

map()으로 이전 요소 접근하기

이제 map()을 사용하여 각 객체에 이전 과목 이름(previousSubjectName)을 담은 새로운 배열을 만들어 보겠습니다.

var details = [
    {subjectId:110, subjectName: 'Java' },
    {subjectId:111, subjectName: 'JavaScript' },
    {subjectId:112, subjectName: 'MySQL' },
    {subjectId:113, subjectName: 'MongoDB' }
];

var output = details.map((detailsObject, index) => {
    var tempObject = {};
    tempObject.subjectId = detailsObject.subjectId;
    tempObject.subjectName = detailsObject.subjectName;

    // 첫 번째 요소가 아니라면 바로 이전 요소를 가져옴
    const getThePreviousObject = index != 0 ? details[index-1] : null;

    // 이전 요소가 존재하면 과목명을, 없으면 'Not Available' 할당
    tempObject.previousSubjectName = getThePreviousObject
        ? getThePreviousObject.subjectName
        : 'Not Available';

    return tempObject;
});

console.log(output);

코드 동작 원리

• index 매개변수 활용: map()의 콜백 함수는 (요소, 인덱스)를 인자로 받습니다. 이 인덱스를 이용해 details[index-1]처럼 원본 배열의 이전 요소에 접근합니다.
• 첫 번째 요소 처리: 첫 번째 요소(index가 0)는 이전 요소가 존재하지 않으므로, 삼항 연산자를 통해 null을 반환하고 최종적으로 'Not Available' 문자열이 할당됩니다.
• 새로운 객체 생성: 기존 객체를 직접 수정하지 않고 새로운 객체(tempObject)를 만들어 반환하므로, 원본 배열은 변경되지 않습니다.

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다.

node fileName.js

여기서는 파일 이름이 demo204.js라고 가정합니다.

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\javascript-code> node demo204.js
[
    {
        subjectId: 110,
        subjectName: 'Java',
        previousSubjectName: 'Not Available'
    },
    {
        subjectId: 111,
        subjectName: 'JavaScript',
        previousSubjectName: 'Java'
    },
    {
        subjectId: 112,
        subjectName: 'MySQL',
        previousSubjectName: 'JavaScript'
    },
    {
        subjectId: 113,
        subjectName: 'MongoDB',
        previousSubjectName: 'MySQL'
    }
]

마무리

이처럼 map() 메서드의 인덱스 매개변수와 원본 배열 참조를 조합하면, 별도의 반복문 없이도 이전 요소에 깔끔하게 접근할 수 있습니다. 이 패턴은 연속된 데이터 비교, 변화량 계산, 누적 처리 등 다양한 상황에서 유용하게 활용할 수 있습니다.