こんにちは、Ryohei(@ityryohei)です!

本記事では、JavaScriptでオブジェクト内で空の値を持つプロパティを削除する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

本記事で実現したいこと

実現したいことはとてもシンプルです。

オブジェクト内で空の値を持つプロパティを削除したい!ただそれだけです!

オブジェクトなのでプロパティを削除する必要があるケースはあまりないと思いますが、空の値を持たせておきたくない場合に参考にしていただければと思います!

空の値を持つプロパティを削除する

これを実現しようとしたときは空の値を持つプロパティを削除する素敵メソッドがあるはず!と思っていたのですが、探すよりも普通にループしてdeleteした方が早い気がしたので、その方法で実装しました。

何はともあれオブジェクトが必要ですので、テスト用に適当にオブジェクトを作成します。何か面白いオブジェクトにしようとしばらく考えたのですが、特に思いつかないので、私の個人情報のオブジェクトを作成します。

const person = {
    name: "ryohei",
    age: "",
    hobby: "game",
    from: "fukuoka"
};

ちなみに趣味はゲームで、最近は Dead by Daylight にハマってます。(どうでもいい)

上記のオブジェクトを見ていただくと、年齢にあたるageの値が空になっていますね。こちらが削除対象のプロパティです。ループしてdeleteしてあげましょう。

オブジェクトのループ方法はいくつかありますが、今回はfor...inを使用します。本来であればundefinednullであるかも確認するべきですが、ここでは長くなるので省略します。

で、完成したループがこちら!

for(let k in person) {
    if(person[k] === ""){
        delete person[k];
    }
}

ループ処理後にコンソールでオブジェクトを確認すると……

Object {
  from: "fukuoka",
  hobby: "game",
  name: "ryohei"
}

ageがきちんと削除されていますね!これにてミッションコンプリートです!

最後に

最近はインターネットの成長によって、真偽の程はともかく欲しい情報がいつでもどこでも手に入れられるようになりました。

本記事でご紹介した内容も、思いついた後は早くて、JavaScriptのドキュメントを少し読むだけで実現することができました。

有益な情報は生活を豊かにしてくれるので、私も少しでも多く有益な情報が残せるようにがんばっていきたいなと思います。

以上、JavaScriptでオブジェクト内で空の値を持つプロパティを削除する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。