JavaScript에서의 객체 순서 보장법

{

    "id": 1,

    "name": "jaytsol",

    "address": "경기도 성남시 ...",

    "phone_number": "010-..."

}

 

흔히 사용하는 object.assign() 등으로 객체를 생성하면

키의 삽입 순서에 따라 객체의 형태가 정해진다.

기능적으로는 순서가 어떤들 아무 상관이 없겠으나,

프론트로 넘겨주려는 객체를 생성할 때

각 객체의 특징을 한눈에 알아보기 좋게 정렬하고 싶다.

가장 중요한 id값이나 name 등이 중요한 정보에 해당하므로 위쪽으로 올리는 식이다.

이는 팀의 개발 효율성을 높일 수 있다.

 

1. object.key()를 이용

Object.keys({
  2: true, 
  1: true,
  '00': true,
  'b': true,
  'a': true,
  '3': true,
})

위의 예제는 아래와 같이 키가 삽입되는데,

[ "1", "2", "3", "00", "b", "a" ]

숫자는 최우선순위. 오름차순으로 먼저 정렬한다.

문자는 삽입 순서에 따라 순서가 결정된다.

"00"의 경우.. JavaScript는 이를 숫자로 변환한 다음, toString()과 같은 동작을 실행하고 이를 기존의 문자열과 비교한다.

기존의 문자열과 일치하면 숫자화하고, 일치하지 않으면 문자열로 적용한다.

ex) "00" (문자) => "0" (숫자) => "0" (문자) => 기존 문자열 ("00") => 불일치 => "00"은 문자로 판단함

 

이를 이용해 객체의 키값으로 숫자 등을 이용한다면 원하는 순서를 보장할 수 있다.

 

2. Map 객체를 이용

Map 객체는 키-값 쌍을 보유하고, 키의 원래 삽입 순서를 기억한다.

const map = new Map();
map.set(3, 'test1')
map.set(1, 'test2')
map.set(2, 'test3')

for(const v of map){
    console.log(v)
}
/*
[3, 'test1']
[1, 'test2']
[2, 'test3']
*/

이를 배열로 바꾸고 싶으면

const map = new Map();
map.set(3, 'test1')
map.set(1, 'test2')
map.set(2, 'test3')

const arr = [...map.values()]

console.log(arr) //  ['test1', 'test2', 'test3']

 

3. 임시로 쉽고 빠르게 변환할 때

 

인적사항 객체, 성적 객체가 있다고 가정.

성적, 인적사항 순으로 객체를 배치하고 싶다면..

const result = {...성적, ...인적사항};

하면 된다.

 

이를 활용해서 보기에 편안~~하고 깔끔한 객체를 만들어서 리턴해주도록 하자