JavaScript 객체 배열을 역순으로 순회하는 방법

다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

let data = [
    {id:1, Name: "Abe", RowNumber: 1 },
    {id:2, Name: "Bob", RowNumber: 2 },
    {id:3, Name: "Clair", RowNumber: 3 },
    {id:4, Name: "Don", RowNumber: 3.0 },
    {id:5, Name: "Edna", RowNumber: 3.1 },
    {id:6, Name: "Frank", RowNumber: 3.2 },
    {id:7, Name: "Gabe", RowNumber: 4 },
    {id:8, Name: "Helen", RowNumber: 5 },
    {id:9, Name: "Isabelle", RowNumber: 6 },
    {id:10, Name: "Jane", RowNumber: 7 },
    {id:11, Name: "Ken", RowNumber: 8 },
];

이 배열을 인자로 받아, 마지막 객체부터 첫 번째 객체까지 각 요소의 Name 값을 순서대로 이어 붙인 뒤, 항목 사이를 쉼표(", ")로 구분하는 하나의 문자열로 반환하는 JavaScript 함수를 작성해야 합니다.

그럼 이 함수를 직접 구현해 보겠습니다.

구현 방법

핵심 아이디어는 for 반복문을 사용해 배열의 마지막 인덱스(arr.length - 1)에서 시작하여 첫 번째 인덱스(0)까지 거꾸로 순회하는 것입니다. 각 단계에서 해당 객체의 이름을 문자열에 추가하고, 마지막에는 불필요하게 붙은 끝부분의 쉼표와 공백을 제거하기 위해 substring() 메서드를 활용합니다.

예제 코드

const data = [
    {id:1, Name: "Abe", RowNumber: 1 },
    {id:2, Name: "Bob", RowNumber: 2 },
    {id:3, Name: "Clair", RowNumber: 3 },
    {id:4, Name: "Don", RowNumber: 3.0 },
    {id:5, Name: "Edna", RowNumber: 3.1 },
    {id:6, Name: "Frank", RowNumber: 3.2 },
    {id:7, Name: "Gabe", RowNumber: 4 },
    {id:8, Name: "Helen", RowNumber: 5 },
    {id:9, Name: "Isabelle", RowNumber: 6 },
    {id:10, Name: "Jane", RowNumber: 7 },
    {id:11, Name: "Ken", RowNumber: 8 },
];
const buildString = arr => {
    let str = '';
    for(let i = arr.length-1; i > -1; i--){
        str += `${arr[i]["Name"]}, `;
    };
    return str.substring(0, str.length-2);
};
console.log(buildString(data));

출력 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

Ken, Jane, Isabelle, Helen, Gabe, Frank, Edna, Don, Clair, Bob, Abe

이처럼 반복문의 초기값과 증감 조건만 조절하면 배열을 원하는 방향으로 자유롭게 순회할 수 있으며, 참고로 ES6 환경에서는 Array.prototype.map()과 reverse(), 그리고 join(', ')을 조합하면 같은 결과를 더 간결하게 얻을 수도 있습니다.