驚くほど簡単！JavaScriptでビックリマーク2つの使い方7選

はじめに
●JavaScriptのビックリマーク2つとは
●ビックリマーク2つの使い方
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのビックリマーク2つ(!!)を使った便利な使い方や応用例をマスターできるようになります。

●JavaScriptのビックリマーク2つとは

JavaScriptでビックリマーク2つ(!!)は、論理演算子「!」を2回続けて使うことで、値を真偽値に変換する方法です。

これにより、コードを短く、シンプルにすることができます。

●ビックリマーク2つの使い方

ここでは、ビックリマーク2つの基本的な使い方をサンプルコード付きで紹介します。

○サンプルコード1：真偽値を反転させる

ビックリマークを使って値を真偽値に変換し、その反対の値を得ることができます。

次の例では、数値が0であるかどうかを判定しています。

const num = 0;
const isZero = !!num;
console.log(isZero); // false

○サンプルコード2：条件分岐の簡略化

このコードでは、ビックリマーク2つを使って条件分岐を簡単に書く方法を紹介しています。

この例では、文字列が空であるかどうかを判定し、空であれば「空です」と表示し、空でなければ「空ではありません」と表示しています。

const str = "";
const message = !!str ? "空ではありません" : "空です";
console.log(message); // 空です

○サンプルコード3：nullやundefinedのチェック

このコードでは、ビックリマーク2つを使ってnullやundefinedのチェックを行う方法を紹介しています。

この例では、変数がnullかundefinedであるかどうかを判定し、その結果を真偽値で取得しています。

const value = null;
const isNullOrUndefined = !!value;
console.log(isNullOrUndefined); // false

●ビックリマーク2つの応用例

ここでは、ビックリマーク2つを使った応用例をいくつか紹介します。

○サンプルコード4：フィルタリング

このコードでは、ビックリマーク2つを使って配列から空の要素をフィルタリングする方法を紹介しています。

この例では、空の文字列とnullを含む配列から空でない要素だけを抽出して新しい配列を作成しています。

const arr = ["apple", "", "banana", null, "orange"];
const filteredArr = arr.filter(item => !!item);
console.log(filteredArr); // ["apple", "banana", "orange"]

○サンプルコード5：オブジェクトのプロパティチェック

このコードでは、ビックリマーク2つを使ってオブジェクトのプロパティが存在するかどうかをチェックする方法を紹介しています。

この例では、オブジェクトに「name」プロパティが存在するかどうかを判定し、その結果を真偽値で取得しています。

const obj = {name: "Alice", age: 30};
const hasNameProperty = !!obj.name;
console.log(hasNameProperty); // true

○サンプルコード6：関数の存在チェック

このコードでは、ビックリマーク2つを使って関数が存在するかどうかをチェックする方法を紹介しています。

この例では、オブジェクトに「hello」関数が存在するかどうかを判定し、その結果を真偽値で取得しています。

const obj2 = {
  hello: function() {
    console.log("Hello!");
  }
};
const hasHelloFunction = !!obj2.hello;
console.log(hasHelloFunction); // true

○サンプルコード7：初期値設定

このコードでは、ビックリマーク2つを使って初期値の設定を行う方法を紹介しています。

この例では、引数がnullやundefinedの場合にデフォルト値を設定している機能を持つ関数を実装しています。

function greet(name) {
  const displayName = !!name ? name : "ゲスト";
  console.log(`こんにちは、${displayName}さん！`);
}

greet("太郎"); // こんにちは、太郎さん！
greet(null); // こんにちは、ゲストさん！