JavaScript를 다루다 보면 객체 배열을 특정 속성 기준으로 정렬한 뒤, 그중 원하는 값만 추출해야 하는 경우가 자주 있습니다. 이번 글에서는 index 속성을 기준으로 객체 배열을 오름차순으로 정렬하고, 정렬된 결과에서 name 값만 모아 새로운 문자열 배열을 만드는 방법을 알아보겠습니다.
문제 상황
다음과 같은 객체 배열이 있다고 가정해 보겠습니다.
const arr = [
{
'name' : 'd',
'index' : 3
},
{
'name' : 'c',
'index' : 2
},
{
'name' : 'a',
'index' : 0
},
{
'name' : 'b',
'index' : 1
}
];여기서 요구되는 작업은 다음과 같습니다.
- 배열을 각 객체의
index속성 값을 기준으로 오름차순으로 정렬합니다. - 정렬된 배열을 각 객체의
name속성 값에 해당하는 문자열 배열로 변환(map)합니다.
따라서 위 배열에 대한 최종 출력 결과는 다음과 같아야 합니다.
const output = ["a", "b", "c", "d"];
해결 방법
이 문제는 Array.prototype.sort()와 Array.prototype.map() 메서드를 조합하면 간단하게 해결할 수 있습니다. 먼저 원본 배열이 변경되지 않도록 slice()로 복사본을 만들고, 비교 함수를 사용해 정렬한 뒤 map으로 name 값만 뽑아내면 됩니다.
const arr = [
{
'name' : 'd',
'index' : 3
},
{
'name' : 'c',
'index' : 2
},
{
'name' : 'a',
'index' : 0
},
{
'name' : 'b',
'index' : 1
}
];
const sortAndMap = (arr = []) => {
const copy = arr.slice();
const sorter = (a, b) => {
return a['index'] - b['index'];
};
copy.sort(sorter);
const res = copy.map(({name, index}) => {
return name;
});
return res;
};
console.log(sortAndMap(arr));실행 결과
콘솔에 출력되는 결과는 다음과 같습니다.
[ 'a', 'b', 'c', 'd' ]
코드 설명
핵심 로직을 단계별로 살펴보면 다음과 같습니다.
- 배열 복사:
arr.slice()를 사용해 원본 배열을 변경하지 않고 복사본을 생성합니다. 이렇게 하면 원본 데이터가 보존됩니다. - 정렬 기준 정의: 비교 함수
(a, b) => a['index'] - b['index']는 두 객체의 index 값 차이를 반환합니다. 결과가 음수면 a가 앞에, 양수면 b가 앞에 오므로 자연스럽게 오름차순 정렬이 됩니다. - 값 매핑:
map()에 구조 분해 할당({name, index})을 활용해 각 객체에서name값만 꺼내 새로운 배열을 만듭니다.
더 간결하게 작성하기
메서드 체이닝을 활용하면 위 코드를 한 줄로 줄일 수도 있습니다.
const result = [...arr]
.sort((a, b) => a.index - b.index)
.map(obj => obj.name);
console.log(result); // [ 'a', 'b', 'c', 'd' ]전개 연산자(...)로 복사본을 만들고 sort와 map을 체이닝하면 코드가 훨씬 깔끔해집니다. 실무에서는 이처럼 간결한 형태를 많이 사용합니다.