[JS] order of object properties

공용 테이블 컴포넌트를 개발하며 생긴 궁금증을 해결한다.

 

관리자단 기능을 개발하면서 가장 많이 사용될 요소는 데이터 테이블 형식의 UI라고 생각이 되어
재사용 가능한 데이터 테이블 컴포넌트를 구성하는데, 객체의 각 데이터 field들의 정렬에 대해 고민한 내용을 정리

 

기획
어느 형태의 객체 배열이 data로 들어오더라도, 기본적으로 랜더링이 이뤄질 수 있도록 구현하려 함

랜더링 할 때, column의 순서를 정해줄 수 밖에 없는데 이 순서를 Object.keys method를 사용하여 가져오려다
해당 메서드의 작동 방식이 궁금하여 조사를 진행

 

• Object.keys method의 작동 방식에는 룰에 따른 순서가 있었다.
• number, string, symbol 순으로 정렬이 이루어지며
• number 정렬은 오름차순
• string, symbol 정렬은 insertion order(삽입 순서)를 따른다.

 

e.g.)

Object.keys({
  3: true, // [3]
  2: true, // [2]
  1: true, // [1]
  'b': true, // [4] (insertion order)
  '00': true, // [5] (insertion order)
  'a': true, // [6] (insertion order)
  '0': true, // [0]
})

참조
https://dev.to/frehner/the-order-of-js-object-keys-458d