演算子と式 — 等価比較・短絡評価・オプショナルチェーン

console.log(1 == '1'); // true
console.log(1 === '1'); // false

console.log(0 == false); // true  — false が 0 に変換される
console.log('' == false); // true  — どちらも 0 に変換される
console.log(null == undefined); // true  — 特別ルール
console.log(null == 0); // false — null は null/undefined としか == で true にならない
console.log([] == false); // true  — [] → '' → 0、false → 0

console.log(1 === 1); // true
console.log(1 === '1'); // false — 型が違う
console.log(null === null); // true
console.log(null === undefined); // false — 型が違う

// null と undefined のどちらも弾きたい場合のみ == を使う例外的なパターン
if (value == null) {
  // value が null または undefined のときに入る
}
 
// 上と同じ意味（こちらの方が明示的）
if (value === null || value === undefined) {
  // ...
}

console.log(0 && 'hello'); // 0      — 左辺が falsy なので左辺を返す
console.log(1 && 'hello'); // 'hello' — 左辺が truthy なので右辺を返す
console.log('' && 'hello'); // ''     — 左辺が falsy
console.log('foo' && 'bar'); // 'bar'  — 左辺が truthy なので右辺を返す

// 右辺の関数はログが false のとき実行されない
const isLoggedIn = false;
isLoggedIn && console.log('ようこそ'); // 何も出力されない
 
// React でよく見るパターン：条件付きレンダリング
function UserGreeting({ user }) {
  return <div>{user && <span>こんにちは、{user.name}さん</span>}</div>;
}

console.log(0 || 'デフォルト'); // 'デフォルト' — 左辺が falsy
console.log('hello' || 'デフォルト'); // 'hello'  — 左辺が truthy
console.log(null || 'フォールバック'); // 'フォールバック'

function greet(name) {
  const displayName = name || '名無し';
  return `こんにちは、${displayName}さん`;
}
 
greet('Alice'); // "こんにちは、Aliceさん"
greet(''); // "こんにちは、名無しさん" — 空文字は falsy
greet(null); // "こんにちは、名無しさん"

const config = {
  timeout: 0, // タイムアウトなし（意図的な 0）
  label: '', // 空ラベル（意図的な空文字）
};
 
// || を使うと意図しない結果に
const timeout = config.timeout || 5000; // 5000 になってしまう（0 は falsy）
const label = config.label || '未設定'; // '未設定' になってしまう

console.log(0 ?? 'デフォルト'); // 0     — 0 は nullish ではない
console.log('' ?? 'デフォルト'); // ''    — '' は nullish ではない
console.log(null ?? 'デフォルト'); // 'デフォルト'
console.log(undefined ?? 'デフォルト'); // 'デフォルト'

const timeout = config.timeout ?? 5000; // 0 のまま
const label = config.label ?? '未設定'; // '' のまま

const user = null;
 
console.log(user.profile.name);
// TypeError: Cannot read properties of null (reading 'profile')

const name = user && user.profile && user.profile.name;
// 冗長で読みにくい

const user = null;
console.log(user?.profile?.name); // undefined（エラーにならない）
 
const user2 = { profile: { name: 'Alice' } };
console.log(user2?.profile?.name); // 'Alice'

const callback = null;
callback?.(); // エラーにならず undefined を返す
 
const arr = null;
arr?.map((x) => x * 2); // undefined（エラーにならない）

const data = null;
console.log(data?.['key']); // undefined

const user = { profile: null };
 
const name = user?.profile?.name ?? '名前未設定';
const country = user?.address?.country ?? '国籍不明';
 
console.log(name); // '名前未設定'
console.log(country); // '国籍不明'

// &&= : 左辺が truthy のときだけ右辺を代入
let a = 1;
a &&= 10; // a は truthy なので 10 が代入される → 10
let b = 0;
b &&= 10; // b は falsy なので代入されない → 0
 
// ||= : 左辺が falsy のときだけ右辺を代入
let c = null;
c ||= 'デフォルト'; // c は falsy なので代入される → 'デフォルト'
let d = 'hello';
d ||= 'デフォルト'; // d は truthy なので代入されない → 'hello'
 
// ??= : 左辺が null/undefined のときだけ右辺を代入
let e = 0;
e ??= 99; // 0 は nullish ではないので代入されない → 0
let f = null;
f ??= 99; // null なので代入される → 99

// && が先に評価される
true ||
  (false &&
    false(
      // → true || (false && false)
      // → true || false
      // → true
 
      // 意図を明確にするなら括弧を使う
      true || false,
    ) &&
    false); // → false

// エラー
null || undefined ?? 'デフォルト'; // SyntaxError
 
// 括弧で明示する
(null || undefined) ?? 'デフォルト'; // 'デフォルト'
null || (undefined ?? 'デフォルト'); // 'デフォルト'

console.log([] == false); // true  — == の型強制で変換されるから
if ([]) {
  console.log('空配列は truthy'); // こちらが実行される
}

console.log(NaN === NaN); // false — NaN は自分自身とも一致しない
console.log(NaN == NaN); // false
 
// 正しいチェック方法
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(undefined)); // false（isNaN() と挙動が異なる）