truthy or falsy

truthyかfalsyか検証

console.log("0" ? "truthy" : "falsy");
console.log(0 ? "truthy" : "falsy");
console.log(10 ? "truthy" : "falsy");
console.log(undefined ? "truthy" : "falsy");
console.log(null ? "truthy" : "falsy");
console.log(false ? "truthy" : "falsy");
console.log(NaN ? "truhy" : "falsy");
console.log("" ? "truthy" : "falsy");
console.log([] ? "truthy" : "falsy");
console.log({} ? "truthy" : "falsy");

“0”は、truthy

0は、falsy

“ABC” は、truthy

undefined は、falsy

null は、falsy

false は、falsy

NaN は、falsy

“” は、falsy

[] は、truthy

{} は、truthy

まとめると、falsyなのは以下です。

|| の意味

左辺がtruthyの場合、その値を返し、

左辺がfalsyの場合、右辺の値を返します。

function greet(name) {
  name = name || 'ゲスト';
  console.log(`Hello, ${name}さん`);
}

この例のように変数がnullやundefinedなどのfalsyな値の場合にデフォルト値を設定するのに使えます。

分割代入でもデフォルト値を設定できましたね。分割代入についてはこちら↓

&&の意味

左辺がtruthyの場合、右辺の値を返します。

左辺がfalsyの場合、その時点で左辺の値を返します。

const isAuthenticated = true;
isAuthenticated && console.log('ユーザーは認証済みです。'); // 左辺がtrueのため、'ユーザーは認証済みです。' が出力されます

const isReady = false;
isReady && (
  console.log('アプリはすでに起動しています'), // この行はisReadyがfalseの場合には実行されません
  startApplication() // この行もisReadyがfalseの場合には実行されません
);

??の意味

おまけで??の意味も書いておきます。

左辺がnullまたはundefinedの場合に右辺を返し、

それ以外の場合は左辺の値を返します。