객체 정렬하기

2022. 9. 13. 14:21·JavaScript
반응형

코딩을 하다보면 빈번하게 객체를 정리 해야하는 경우를 만나게 된다. 

배열의 경우엔 Sort 함수를 사용하면 되지만 객체의 경우엔 몇 가지 제약이 있다. 

 

기본적으로 Object를 저장형 데이터로 사용할 경우에는 Object를 사용하기 보단 Map을 사용하는 것이 

좋다. 어쩔수 없이 Object를 사용하는데 정렬이 필요할 때 참고 바랍니다!

 

다양한 해결 방법이 있었는데, 그중 하나를 정리한다. 

let object = {
    a : 20,
    b : 30,
    c : 40,
    d : 35,
}

형식의 객체가 있다고 했을 때 Value를 기준으로 정리하는 방식이다. 

 

const sortObject = [];

for(const item in object) {
    sortObject.push([item, object[item]]);
}

sortObject.sort((a,b) => {
    return a[1] - b[1];
})

배열로 변환한 다음 Sort 함수를 사용해서 정렬하는 방식이다. 

Object.keys를 사용하는 방법도 있지만 배열로 변환해서 정렬하는 방식이 더 많은 상황에서

사용할 수 있다고 생각이 들어서 결정했다. 

 

const sortObject = [];

for(const item in object) {
    sortObject.push([item, object[item]]);
}

sortObject.sort((a,b) => {
    if(a[1] > b[1]) {
    	return -1;
    }else if(a[1] === b[1]) {
    	return b[0] - a[0];
    }else {
    	return 1;
    }
    return a[1] - b[1];
})

만약 Object의 value만 비교하는 것이 아닌 value가 같은 경우 key를 보고 정렬하는 상황도 조금만

수정해주면 정렬이 가능하다. 

 

만약 Map을 사용한다면 

const mapData = new Map();
mapData.set(1,123);
mapData.set(2,345);
mapData.set(3,789);

const mapToArray = [...mapData];

사용해서 배열로 변경 후 동일하게 사용하면 된다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

[JavaScript] ?? 문법  (1) 2022.09.22
[JavaScript] 콘솔로 입력받기  (1) 2022.09.15
[JavaScript] 일반 함수 vs 화살표 함수  (1) 2022.09.11
[JavaScript] 원하는 크기의 2차원 배열 만들기  (1) 2022.08.11
[JavaScript] ==과 === 차이  (1) 2022.06.20
'JavaScript' 카테고리의 다른 글
  • [JavaScript] ?? 문법
  • [JavaScript] 콘솔로 입력받기
  • [JavaScript] 일반 함수 vs 화살표 함수
  • [JavaScript] 원하는 크기의 2차원 배열 만들기
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    CSS
    다이소
    영어회화
    리얼학습일기
    Node.js
    webpack
    CCNA
    프로그래머스
    Babel
    redux
    타입스크립트
    Docker
    네이버 부스트캠프
    javascript
    바질
    식물
    덤프
    알고리즘
    자바스크립트
    react
    next.js
    ReactNative
    ChatGPT
    타일러영어
    영어독학
    네트워크
    리액트
    리얼클래스
    바질 키우기
    typescript
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
객체 정렬하기
상단으로

티스토리툴바