Object, map 키 반복문 순서

• 참고 오버플로 글
• https://stackoverflow.com/a/5525820
• https://stackoverflow.com/a/38218582

Object 순서보장 예시

ES5까지는 명시적인 order가 없었다. (순서가 보장되지 않았다는 뜻) ES2015부터 특정 상황에 대해 order 순서가 정의되었고, 점진적으로 이 순서가 적용되어 왔고, ES2020부터는 for…in에서도 이 순서가 보장된다.

정렬 순서

1. 첫번째로 integer-like 요소들이 오름차순 순으로 맨 앞에 정렬된다.

2. 두번째로 문자열 요소들이 삽입 순서대로 나열된다.

3. 마지막으로 symbol 요소들이 삽입 순서대로 나열된다.

const obj = Object.create(null, {
  m: {value: function() {}, enumerable: true}, // string이라서 2순위, 삽입순서대로
  "2": {value: "2", enumerable: true}, // integer-like 라서 1순위, 오름차순 적용
  b: {value: "b", enumerable: true}, // string이라서 2순위, 삽입순서대로
  0: {value: 0, enumerable: true}, // integer-like 라서 1순위, 오름차순 적용
  [Symbol('c')]: {value: "sym", enumerable: true}, // symbol이라서 3순위, 삽입순서대로
  "1": {value: "1", enumerable: true}, // integer-like 라서 1순위. 오름차순 적용
  "a": {value: "a", enumerable: true}, // string이라서 2순위, 삽입순서대로
  [Symbol('a')]: {value: "sym", enumerable: true}, // symbol이라서 3순위, 삽입순서대로
  [Symbol('b')]: {value: "sym", enumerable: true}, // symbol이라서 3순위, 삽입순서대로
});

console.log(Reflect.ownKeys(obj));

// [LOG]: ["0", "1", "2", "m", "b", "a", Symbol(c), Symbol(a), Symbol(b)]

Map 순서보장 예시

정렬 순서

• Object는 앞서 봤듯이 정렬되는 순서와 로직이 있다.

• 반면에 map은 무조건 삽입 순서대로 반환됨을 보장한다.

const map1 = new Map();

// 값 삽입 순서 보장
map1.set("a", {});
map1.set("C", {});
map1.set("b", {});
map1.set([Symbol('3')], {});
map1.set(5, {});
map1.set(2, {});
map1.set([Symbol('1')], {});
map1.set("4", {});
map1.set("c", {});

// 삽입된 요소의 값을 변경해도 그대로
map1.get("a")["1"] = 1;
map1.get("a")["2"] = 2;

// 반복문에서 반환 순서 확인
for(const [key, value] of map1.entries()){
  console.log("key", key, "value", value);
}

// [LOG]: "key",  "a",  "value",  { "1": 1, "2": 2 } 
// [LOG]: "key",  "C",  "value",  {} 
// [LOG]: "key",  "b",  "value",  {} 
// [LOG]: "key",  [Symbol(3)],  "value",  {} 
// [LOG]: "key",  5,  "value",  {} 
// [LOG]: "key",  2,  "value",  {} 
// [LOG]: "key",  [Symbol(1)],  "value",  {} 
// [LOG]: "key",  "4",  "value",  {} 
// [LOG]: "key",  "c",  "value",  {}