【JavaScript】プロパティの順序の意外な影響

はじめに

JavaScriptでオブジェクトを定義する際にプロパティの並び順は特に意識していなかったが、記述する順番が動作に影響するケースがあった。
今まで順番は動作に一切関係ないと思っていたため、個人的にはけっこう驚いたので簡単にメモしておく。

実行環境：Windows10 Chrome
詳しくは調べてないので、他の環境だとまた違うかも。

JSON.stringify

const object1 = {a: 1, b: 2}; // aを先に記述
const jsonString1 = JSON.stringify(object1);

const object2 = {b: 2, a: 1}; // bを先に記述
const jsonString2 = JSON.stringify(object2);

// 実行結果
console.log(jsonString1); // 結果: '{"a":1,"b":2}'
console.log(jsonString2); // 結果: '{"b":2,"a":1}'

JSON.stringifyによりオブジェクトをJSON文字列に変換したところ、
プロパティを定義する順番で出力される文字列が異なった。

エラー発生時のログを出す際にJSON.stringifyを使用していたが、
見やすいように先頭に表示されるプロパティを変更したいと思って試したところ、
上記のような違いがあった。
てっきりアルファベット順とかで並び順が決まるのかと思っていたのでまさかの結果。

Object.keys

const object1 = {a: 1, b: 2}; // aを先に記述
const keys1 = Object.keys(object1);

const object2 = {b: 2, a: 1}; // bを先に記述
const keys2 = Object.keys(object2);

// 実行結果
console.log(keys1); // 結果: ['a', 'b']
console.log(keys2); // 結果: ['b', 'a']

Object.keysはオブジェクトのキーを配列で取得する関数だが、
プロパティを定義する順番で取得する配列の並び順が変わった。

まとめ

{a: 1, b: 2}と{b: 2, a: 1}のように定義する順番が違うと動作も異なっていた。
この差異によって不具合が発生するようなコードはそもそも書くべきではないが、
私の場合はログ出力で少しだけ活用できたので、
知っておくとなにか使える時が来るかもしれない。