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

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을 생성해서 표시해야하는 기능이 있었다

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

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

Oct 12, 2024 Views 50