JavaScript の空配列を勘違いしていた

JavaScript の空配列の真偽値について誤った理解をしていたので、自戒の念を込めて記事にしました。もしよかったら読んでみてください。

空配列の真偽値を理解する

まずは私の誤解していたケースから見ていきます。

// コード①
const foo = [];  // 空の配列

if (foo) {
    console.log("Hello");
} else {
    console.log("Bye");
}

// console.log で表示される結果
Hello

コード①のように if 文の条件が空配列の場合は、false とみなされ Bye が表示されると思っていました。しかし、実際には上記のサンプルコードでは true となり、Hello が表示されます。
それでは空配列の場合に false と判断させたい場合のコードを見てみましょう。

// コード②
const bar = []; // 空の配列

if (bar.length) {
    console.log("Hello");
} else {
    console.log("Bye");
}

// console.log で表示される結果
Bye

コード②のように、空配列の場合に false と判断させるには 配列.length と書く必要があります。これは JavaScript の言語仕様で、空配列は true として判断されるという仕様であるためです。なので配列に .length を利用することで配列内の値の数をもとに真偽値を導き出しています。
また、空配列のように true になる値を Truthy な値と言います。ちなみに Falsy な値も存在します。ここでは Truthy な値と Falsy な値について詳しく言及はしないので、気になる方は以下の資料をご覧ください。

• Truthy - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
• Falsy (偽値) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

もうひとつ私が Truthy な値として認識できていなかった空オブジェクトについても見ていきます。

空オブジェクトの真偽値について

// コード①
const foo = {}; // 空のオブジェクト

if (foo) {
    console.log("Hello");
} else {
    console.log("Bye");
}

// console.log で表示される結果
Hello

// コード②
const bar = {};  // 空のオブジェクト

if (Object.keys(bar).length) {
    console.log("Hello");
} else {
    console.log("Bye");
}

// console.log で表示される結果
Bye

こちらも先ほどの空配列と同様、空オブジェクトは Truthy な値とみなされるので true となり、Hello が表示されます。そこでオブジェクトの値の有無の判断には Object.keys(オブジェクト).length と書きます。こうすることでオブジェクト内のキー (key) の数をもとに真偽値を導き出し Bye が表示されます。

最後に

空配列と空オブジェクトの真偽値については JavaScript を書き始めて半年ほど経ってから知った事実でした。まだまだ JavaScript の言語理解を深めていかないといけないですね（汗）
また、今回の件は取り扱っている値が自分の認識と乖離してしまっていたということでもあるので、普段から取り扱う値への認識を適切にする姿勢を持たないといけないなと考えさせられた一件でもありました。

参考資料

• Truthy - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
• Falsy (偽値) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN