[Javascript] Object, Map 순서를 보장 하는 순회

회사에서 프로젝트를 진행하는데 데이터의 값이 원하는 순서대로 들어오지 않았다. 어디서 문제가 났는지 디버그를 해보니 Object.value메서드에서 객체의 순서를 key 값의 오름차순으로 자동 변환시켰다.

객체

• 객체는 배열과 다르게 index(순서)가 없다. 그렇기 때문에 어떤 순서로 객체의 키 값에 접근하는지 알 수 없다.
• 객체의 값은 키를 통해서만 접근이 가능하다.
• 순서가 보장되지 않은 순회라고 한다.

Object.keys()

• mozilla 문서
• 메서드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다

아래의 예시 코드를 보자

const test = {
  1: { a: 1, b: 1 },
  4: { a: 4, b: 4 },
  2: { a: 2, b: 2 },
  3: { a: 3, b: 3 },
};
console.log(test);
// 1:Object, 4:Object, 2:Object, 3: Object

const testValue = Object.keys(test);
console.log(testValue);
// ["1", "2", "3", "4"]

객체의 키를 작성할 때 1,4,2,3 순으로 작성했지만 Object.keys() 메서드에서 배열로 반환될 때 순서가 보장되지 않았다.

객체 키를 숫자로 생성할 때 

const arr = [{key:3, value:'test1'},{key:1, value:'test2'},{key:2, value:'test3'}]
const obj = {}
arr.forEach(data => {
    obj[data.key] = data.value
})
console.log(obj)

// {1: 'test2', 2: 'test3', 3: 'test1'}

배열을 객체로 변환할 때 객체 키를 숫자로 주게 되면 기존 배열의 순서와 다르게 오름차순 정렬돼서 출력된다.

key 값이 알파벳이라면 작성한 순서대로 출력이 되었지만 숫자일 때는 오름차순 순서로 반환돼서 출력된다.

Map 객체를 사용해서 순서 보장

Map객체는 키-값 쌍을 보유하고 키의 원래 삽입 순서를 기억합니다  (MDN 문서)

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']
*/

Map 객체를 배열로 바꾸고 싶을 땐 스프레드를 사용하면 간단하다.
Object.keys() 메서드와 다르게 key의 값에 따라 자동으로 정렬이 되지 않고 순서가 보장된다.

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']