【JavaScript】オブジェクトから要素を削除する

今回はJavaScriptで以下のJavaの記事を同じ様なケース。

plugout.hateblo.jp

JavaScriptでクラスを利用せず、次の様にオブジェクト(連想配列)を生成した場合の話。

例: string1.js

let data = {"key": "value"};
console.log(data); // {key: 'value'}と出力される

この状態でkeyというキーを消し去りたい場合に、単純にnullを代入してもキー情報が残ってしまう。

例: string2.js

let data = {"key": "value"};
data["key"] = null;
console.log(data); // {key: null}と出力される
console.log(Object.keys(data)); // ['key']と出力される

値だけでなくキーも抹消したい場合にはdelete演算子を使用する。

developer.mozilla.org

例: string3.js

let data = {"key": "value"};
delete data['key']; // 問題なく削除できた場合にはtrueが返る
console.log(data); // {}と出力される
console.log(Object.keys(data)); // []と出力される

ただしstrictモードで編集不可のプロパティだった場合は例外が発生するので注意。

また配列に対してもdelete演算子が利用できるが、この場合は対象の要素だけが消える動きをする。

例: string4.js

let arr = ["A", "B", "C"];
delete data[1]; // 問題なく削除できた場合にはtrueが返る
console.log(arr); // ["A", empty, "C"]と出力される
console.log(arr.length) // 3と出力される

JSONの末尾のカンマにご用心

いつも気をつけているのだが、割とうっかりやらかすので割と戒めのためにメモ。

JSONは元々JavaScriptの記法を元にしたフォーマットだが、実はJavaScript上では許されているがJSONとしては許されていないものがある。

その代表例の一つが末尾のカンマだ。

例えば次はJavaScriptのオブジェクトの例だ。

例: sample1.js

let data = {"key": "value",};

ここで"value"の後ろに , が付いているのがお分かりいただけるだろうか。

これはJavaScriptの記法上OKとなる。

ただし以下の場合は例外が発生する。

例: sample2.js

let data = JSON.parse('{"key": "value",}');

これを実行するとJSON解析の例外としてUncaught SyntaxErrorが発生するのではないだろうか。

これはJSONの書式としては許可されておらず、きちんと , の後ろに要素が必要であることを意味している。

ちなみにこれはJSONの配列(Array)の場合も同様で、すなわちJavaScriptの場合は問題ないがJSONの場合はUncaught SyntaxErrorとなる

（もちろん例外の詳細については異なるが）

ちなみになぜ末尾のカンマをついつい付けてしまうのかについて。

これは割と僕の経験則によるものだが……パッと思いつくだけで以下の3つがある。

1. Gitなどの差分管理上
   1. なるべく関係のない行に変更を加えたくないから
   2. 衝突解決の際のマージの過程で紛れ込んだから
2. JSONを出力するfor文（主にテンプレートエンジン）で、分岐処理を書きたくないから（あるいは書き忘れたから）

特に多いのは 1.2. かなと思う。

最後の , の付いていない行を削除するコミットとその直前に行を追加するコミットがぶつかった場合に、気づかずに末尾に , が付与される状態が完成してしまうパターンだ。

しかもこの場合は衝突したどちらのコミットの行も正しくないという状態なので、きちんと自分で編集を加えなければならないことになる

（つまりは正しい行の採択だけで解決できない）

ちなみに , だけを別の行にする手もあるが、結局 , の有無をチェックしなければならないことには変わりない。

また衝突の際に行としての差分が出なくなる可能性もあるので、それはそれで逆に厄介な可能性もあるか。