JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのdelete演算子の使い方！オブジェクトからプロパティを削除する方法

JavaScriptでは、delete演算子を使用することで、オブジェクトから特定のプロパティを削除することができます。この記事では、書籍情報を管理するオブジェクトから「価格（price）」プロパティを削除するサンプルコードを通じて、delete演算子の基本的な使い方をわかりやすく解説します。

サンプルコード

以下のコードでは、まずコンストラクタ関数で書籍オブジェクトを作成し、その後 delete 演算子で price プロパティを削除しています。削除前後でオブジェクトの中身がどのように変化するか確認してみましょう。

<html>
   <head>
      <title>JavaScript Delete Operator</title>
      <script>
         function book(title, author) {
            this.title = title;
            this.author = author;
         }
      </script>
   </head>
   
   <body>
      <script>
         var myBook = new book("WordPress Development", "Amit");
         book.prototype.price = null;
         myBook.price = 500;

         document.write("<h2>Details before deleting book price</h2>");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price);

         delete myBook.price;

         document.write("<br><h2>Details after deleting book price</h2>");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>
      
   </body>
</html>

実行結果のポイント

このコードを実行すると、次のような流れで結果が表示されます。

  • 削除前： 書籍タイトル「WordPress Development」、著者「Amit」、価格「500」がすべて正しく表示されます。
  • 削除後： delete myBook.price; の実行により price プロパティがオブジェクトから完全に取り除かれるため、価格の部分には undefined が表示されます。

delete演算子を使う際の注意点

delete演算子を正しく活用するために、以下の点に注意しておきましょう。

  • delete演算子はオブジェクトのプロパティ専用であり、var や let、const で宣言された通常の変数は削除できません。
  • 削除に成功した場合は true、失敗した場合は false を返します。
  • 配列に対して使用すると要素は削除されますが、配列の長さ（length）は変化せず、該当箇所が空き（undefined）になります。配列から要素を完全に取り除きたい場合は splice() メソッドの利用が推奨されます。

このように、delete演算子を使いこなすことで、不要になったプロパティを柔軟に管理できるようになります。ぜひ実際にコードを動かして挙動を確認してみてください。

  1. JavaScriptでオートコンプリート（入力補完）機能を実装する方法

    JavaScriptによるオートコンプリートの実装検索フォームなどでユーザーの入力に合わせて候補を自動的に表示する「オートコンプリート（入力補完）」機能は、JavaScriptを使えばライブラリなしでも実装できます。本記事では、配列に格納されたデータを候補として表示し、マウスクリックやキーボード操作で選択できるオートコンプリートの作り方を、完全なサンプルコードとともに解説します。実装のポイントこのサンプルでは以下のような仕組みでオートコンプリートを実現しています。inputイベント：テキストフィールドに入力があるたびに発火し、入力値と前方一致する項目を候補リストとして動的に生成します。キーボー

  2. CSSとJavaScriptで削除確認モーダルを作成する方法【初心者向け解説】

    Webアプリケーションでは、アカウントの削除など重要な操作を実行する前に、ユーザーに確認を求める「確認モーダル」がよく使われます。誤操作を防ぎ、ユーザーエクスペリエンスを向上させるために非常に有効なUIパターンです。この記事では、CSSとJavaScript（バニラJS）のみを使用して、シンプルで実用的な削除確認モーダルを作成する方法を解説します。外部ライブラリは不要なので、そのままコピーして使うこともできます。完成コードの全体像以下のコードでは、「Open Modal」ボタンをクリックするとモーダルが表示され、「Delete Account」ボタン・「Cancel」ボタン・閉じるアイコン（×