[JS] Object Sorting Issue

Preview

json 파일을 object로 parsing해 사용하려고 봤더니 순서가 이상하다. 분명 원본 파일과 다르다.

{
  "fruits":
  {
    "001" : "사과",
    "002" : "배",
    "003" : "메론",
    "301" : "수박",
    "999" : "참외"
  }
}

이 json object는 과일 항목을 KEY VALUE 로 정의해놓은 값이다.

이 json object를 읽어 콘솔에 찍으면 웬걸..

당연히 정의된 object 그대로 불러올 줄 알았으나 JS 엔진은 Object를 호출할 때 자동으로 Key 값 기준으로 정렬을 해준다고 한다. 그런데, Key 값을 기준으로 정렬한다고 해도 001, 002, 003, 301, 999 이 순서대로 돼야 하지 않나 싶었다.

Methodology

---

그래서 도대체 JS 는 무슨 알고리즘으로 정렬을 할까 해서 sort 함수를 찾아봤다.

arr.sort([compareFunction])
compareFunction Optional정렬 순서를 정의하는 함수.
생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됩니다.
정렬한 배열. 원 배열이 정렬되는 것에 유의하세요. 복사본이 만들어지는 것이 아닙니다.
compareFunction이 제공되지 않으면 요소를 문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬됩니다. 예를 들어 "바나나"는 "체리"앞에 옵니다. 숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "80"은 유니 코드 순서에서 "9"앞에 옵니다.

Array 자료형일 경우 쓸 수 있는 함수이지만 내부적으로 알고리즘은 같을 것이라 생각한다. Array sort 함수에 특정 compareFunction을 제공하지 않으면 요소를 문자열로 변환하고 유니 코드 순서로 정렬을 하는 것처럼

Object 도 키 값을 문자열로 변환, 유니 코드 순서대로 정렬을 하는 것 아닐까? 찾아보니 역시 나이다.

The sort() method sorts the elements of an array in place and returns the array. The sort is not necessarily stable. The default sort order is according to string Unicode code points.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

나는 이 Object를 메타 파일에 정의되어 있는 대로 화면에 보여줘야 했기 때문에

우선 sort 함수를 사용할 수 있게끔 Array 형태로 바꿔주고 key value 값도 깔끔하게 정리해줬다.

var objArr = []; //object를 담아줄 배열을 만들어 sort를 하려고 한다.

for (var i = 0; i < Object.keys(obj).length; i++) {
  objArr.push({ code: Object.keys(obj)[i], data: Object.values(obj)[i] });
}

이제 sort() 함수를 쓰면 되는데 code 값을 기준으로 해야 하니 compareFunction을 다음과 같이 짜준다.

objArr.sort(function (a, b) {
  return a.code - b.code;
});
console.log(objArr);

 

The End

---

1. JS Object는 자동으로 Key 값을 기준으로 정렬해서 출력한다는 점.
2. 정렬의 기준은 key 값을 문자열로 변환 후 유니코드 코드 포인트 기준인 점.
3. 다음에 개발할 때는 당황하지 않고.. Object를 Array로, Array에 sort function을 정의해주기..