[Javascript] delete関数を使う時は気をつけろ!

2020年5月25日

Javascript テクノロジー プログラミング

プログラミングをしている時に、不要になったデータを削除するのは、deleteだと信じて疑わなかった、ユゲタです。 不要になったデータ(object)をdeleteすると、メモリ上から削除されて、スマートフォンなどで閲覧しているページでは、バッテリー容量を無駄に消費することを削減できると思って、 これまでバンバンdeleteしてきたんですが、実は配列内のデータをdeleteすると、不思議な状態になったので、気をつけるポイントがあることに、気がついた感じです。

本日のIT謎掛け

「delete操作」と、かけまして・・・ 「少し不要かもと思ったけど、ECサイトで高額な買い物をした時」と、ときます。 そのココロは・・・ 失敗したと気がついたけど、取り消せないと知った時に、愕然とします。

配列内のデータをdeleteすると、何が起きる?

実際に注意ポイントを確認するために、サンプルコードを見て見たほうが早いでしょう。 var arr1 = [0,1,2,3,4,5,6,7,8,9]; 上記のような配列と連想配列のデータを用意してみました。 配列の2番めのデータをdeleteしてみます。 delete a[1]; > true arr1 > [0, empty, 2, 3, 4, 5, 6, 7, 8, 9] deleteした箇所がemptyとなっている状態なのが確認できます。 この状態で、配列内の情報を変更せずに、データの削除ができていることがわかります。

lengthとemptyの関係

arr1.length > 10 lengthも確かにdeleteした分も含めて10個保持しているようになっていますが、loopで配列にアクセスすると、 for(var i=0; i<arr1.length; i++){ console.log(i +":"+ arr1[i]); } > 0:0 > 1:undefined > 2:2 > 3:3 > 4:4 > 5:5 > 6:6 > 7:7 > 8:8 > 9:9 該当箇所は、"undefined"になっていることがわかります。 for(var i in arr1){ console.log(i +":"+ arr1[i]); } > 0:0 > 2:2 > 3:3 > 4:4 > 5:5 > 6:6 > 7:7 > 8:8 > 9:9 for~inでloopさせると、undefinedはすっ飛ばされることもわかりますが、処理回数とlengthが食い違ってくるので、javascriptの配列情報でlengthを鵜呑みで信じてはいけないという事も理解できます。

連想配列とdeleteは相性がいい

配列のdelete状況がわかったところで、次に連想配列の内容をdeleteしてみます。 var arr2 = {"a":"aa","b":"bb","c":"cc","d":"dd","e":"ee"}; delete arr2.b > true arr2 > {a: "aa", c: "cc", d: "dd", e: "ee"} 対象のkey箇所がキレイに抜けているのがわかります。 どうやら連想配列には、emptyは発生しないようです。 このdeleteという機能は、配列などのobjectの順番を崩さないように行われている機能のようですが、同時にobjectが不思議な状態になっていしまうので、使う時には気をつけることと、 javascriptのobjectデータに、こうした状態があると、疑ってプログラミングするほうが、バグの発生率を低くすることになるでしょう。 自分も、古いブログデータをdeleteすることにしよう!!!

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。