자바스크립트에서 객체는 값의 순서를 보장하는가?

object arr (예제 소스코드의 출력결과)

정답은 객체는 값의 순서를 보장하지 않는다

그렇기때문에 순서를 보장해야하는 경우 배열을 사용해야한다

예를 들어서 아래의 예제에서 obj의 순서는 보장이 되지않는다

<body>
    <button onclick="showObjectOrder()">click</button>
    <p>For</p>
    <pre id="output1"></pre>
    <p>JSON</p>
    <pre id="output2"></pre>

    <script>
        function showObjectOrder() {
            const obj = {
                2: "number 2",
                1: "number 1",
                b: "string b",
                a: "string a",
                a2: "string a2",
                3: "number 3",
                a1: "string a1",
            };

            // for
            let output = "";
            for (let key in obj) {
                output += `${key}: ${obj[key]}\n`;
            }
            document.getElementById("output1").textContent = output;
            
            // json
            document.getElementById("output2").textContent =
                JSON.stringify(obj);
        }
    </script>
</body>

출력결과는 키의 숫자의 오름차순을 먼저 정렬해서 출력하고

그 다음 문자열은 순서대로 출력하게 된다 ( 이게 포인트 숫자오름차순정렬 + 문자열은 그대로 출력 )

위의 결과는 JSON.stringify등을 사용할때도 적용되므로 순서보장이 필요한 경우라면 배열을 사용하던가

Map을 사용하여 순서를 보장하는등의 방법등이 있다

1: number 1
2: number 2
3: number 3
b: string b
a: string a
a2: string a2
a1: string a1

이번 프로젝트에서 객체의 내용으로부터 동적으로 html을 생성해서 표시해야하는 기능이 있었다

하지만 출력해보니 순서가 맞지않아서 의문이 들어서 조사하기 시작했다

초보적인 실수지만 잊지 않기 위해서 적어둔다