JavaScript에서 순서 번호가 포함된 문자열 배열을 정렬된 배열로 변환하는 방법

이미지 경로와 순서 번호(order number)가 쉼표로 연결된 형태의 문자열 배열이 있다고 가정해 보겠습니다.

const images = [
    'photo1.jpg,0',
    'photo2.jpg,2',
    'photo3.jpg,1'
];

순서 번호를 기준으로 하면 올바른 정렬 순서는 photo1 → photo3 → photo2입니다. 따라서 우리가 해야 할 일은 각 문자열을 순서 번호에 맞게 정렬한 뒤, 경로 값만 추출하여 새로운 배열을 만드는 것입니다. 최종적으로 원하는 결과는 다음과 같습니다.

const orderedImages = [
    'photo1.jpg',
    'photo3.jpg',
    'photo2.jpg'
]

구현 코드

이제 이미지 배열을 올바른 순서대로 정렬하는 코드를 작성해 보겠습니다.

const images = [
    'photo1.jpg,0',
    'photo2.jpg,2',
    'photo3.jpg,1'
];

// 순서 번호를 기준으로 두 요소를 비교하는 정렬 함수
const sorter = (a, b) => {
    return parseInt(a.split(",")[1]) - parseInt(b.split(",")[1]);
};

// 정렬 후 경로 값만 추출하는 함수
const sortArray = arr => {
    return arr
        .slice()               // 원본 배열 보존을 위한 복사
        .sort(sorter)          // 순서 번호 기준 오름차순 정렬
        .map(el => {
            return el.split(",")[0];  // 경로 부분만 반환
        });
};

console.log(sortArray(images));

코드 동작 원리

sorter 함수는 각 문자열을 split(",")으로 분리한 뒤, 두 번째 요소(순서 번호)를 parseInt()로 숫자로 변환하여 차이를 반환합니다. 이 값이 음수면 앞 요소가 먼저, 양수면 뒤 요소가 먼저 배치되므로 자연스럽게 오름차순 정렬이 이루어집니다.

sortArray 함수는 먼저 slice()를 호출해 원본 배열의 변경을 방지하고, sort()로 정렬한 후 map()을 사용해 쉼표 앞부분인 파일 경로만 남긴 새로운 배열을 생성합니다.

실행 결과

콘솔 출력 결과는 다음과 같습니다.

[ 'photo1.jpg', 'photo3.jpg', 'photo2.jpg' ]

이처럼 split(), sort(), map()을 조합하면 복합 데이터가 담긴 문자열 배열도 손쉽게 원하는 기준으로 정렬하고 필요한 값만 깔끔하게 추출할 수 있습니다.