【JavaScript】演算子の使い方まとめ｜=== vs ==・?? vs ||・?.オプショナルチェーン・論理代入・優先順位まで解説

// == は型変換を行うため直感と異なる結果になりやすい
console.log(1   == '1');    // true  （数値→文字列に変換して比較）
console.log(0   == false);  // true  （false→0に変換）
console.log(0   == '');     // true  （空文字→0に変換）
console.log(''  == false);  // true  （false→''に変換）
console.log(null == undefined); // true  （特例ルール）
console.log([]  == false);  // true  （[]→''→0, false→0）
console.log([]  == ![]);    // true  （!=[] = false, []==false）

// === は型変換しないため結果が直感的
console.log(1   === '1');   // false （型が違う）
console.log(0   === false); // false
console.log(null === undefined); // false

// value が null または undefined のどちらかであれば true
// これは意図的に == を使う唯一のケース
function isEmpty(value) {
  return value == null; // null === null || undefined === null はどちらも真
}
console.log(isEmpty(null));      // true
console.log(isEmpty(undefined)); // true
console.log(isEmpty(0));         // false（0はnullでもundefinedでもない）
console.log(isEmpty(''));        // false

// 数値の大小比較
console.log(5 > 3);    // true
console.log(5 >= 5);   // true
console.log(3 < 5);    // true
console.log(3 <= 2);   // false

// 文字列の比較（辞書順・Unicode順）
console.log('apple' < 'banana'); // true
console.log('B' < 'a');         // true （大文字のコードポイントが小さい）

// NaN との比較はすべて false
console.log(NaN === NaN); // false （NaN は自分自身とも等しくない！）
console.log(Number.isNaN(NaN)); // true （NaN の判定には isNaN を使う）

// && は左辺が falsy なら左辺を返す（右辺は評価しない）
console.log(false && 'hello'); // false
console.log(null  && 'hello'); // null
console.log(1     && 'hello'); // 'hello'（左辺が truthy → 右辺を返す）

// || は左辺が truthy なら左辺を返す（右辺は評価しない）
console.log('hi'  || 'default'); // 'hi'
console.log(null  || 'default'); // 'default'
console.log(0     || 'default'); // 'default'（0 は falsy）
console.log(''    || 'default'); // 'default'（空文字は falsy）

// 返り値は boolean ではなく、評価を止めた時点の値そのもの
const name = null;
const displayName = name || '名無し'; // '名無し'

// || は falsy（0・''・false など）でも右辺に切り替わる
const score1 = 0  || 100;  // 100 ← 意図しない上書き！0は有効な値なのに
const label1 = '' || '未設定'; // '未設定' ← 空文字も有効な場合に困る

// ?? は null / undefined だけに反応する
const score2 = 0    ?? 100;     // 0    ← 0はそのまま保持
const score3 = null ?? 100;     // 100  ← nullのときだけデフォルト
const label2 = ''   ?? '未設定'; // ''   ← 空文字はそのまま
const label3 = undefined ?? '未設定'; // '未設定'

const user = {
  name: '太郎',
  address: {
    city: '東京'
  }
};

// 従来の書き方（ネストが深いと冗長）
const city1 = user && user.address && user.address.city; // '東京'
const zip1  = user && user.address && user.address.zip;  // undefined

// ?. を使った書き方（短く読みやすい）
const city2 = user?.address?.city;    // '東京'
const zip2  = user?.address?.zip;     // undefined（エラーにならない）
const phone = user?.contact?.phone;   // undefined（contact が存在しない）

// null / undefined のオブジェクトに ?. を使っても安全
const nullObj = null;
console.log(nullObj?.prop);            // undefined（TypeError にならない）

// メソッド呼び出し
const arr = null;
console.log(arr?.map((x) => x * 2));  // undefined

// 配列要素へのアクセス
const list = null;
console.log(list?.[0]);                // undefined

// ?. と ?? を組み合わせると「存在すれば値を返し、なければデフォルト値」が1行で書ける
const user2 = null;
const cityName = user2?.address?.city ?? '未設定'; // '未設定'

const config = { timeout: 0 };
const timeout = config?.timeout ?? 3000; // 0 （??なので0はそのまま）

// &&= : 左辺が truthy のときだけ右辺を代入
let a = 1;
a &&= 10;   // a は truthy → a = 10
let b = 0;
b &&= 10;   // b は falsy → 代入されない（b = 0 のまま）

// ||= : 左辺が falsy のときだけ右辺を代入（デフォルト値の設定に便利）
let name = null;
name ||= '名無し'; // null は falsy → name = '名無し'
let score = 0;
score ||= 100;     // 0 は falsy → score = 100 ← 0も上書きされるので注意

// ??= : 左辺が null / undefined のときだけ右辺を代入
let x = null;
x ??= 42;    // null → x = 42
let y = 0;
y ??= 42;    // 0 は null でも undefined でもない → y = 0 のまま

// ??= はオブジェクトの初期化に特に便利
const cache = {};
cache.data ??= [];
cache.data.push('item'); // キャッシュが未初期化なら配列を作成してから追加

// typeof は値の型を文字列で返す
console.log(typeof 42);          // 'number'
console.log(typeof 'hello');     // 'string'
console.log(typeof true);        // 'boolean'
console.log(typeof undefined);   // 'undefined'
console.log(typeof Symbol());    // 'symbol'
console.log(typeof 42n);         // 'bigint'
console.log(typeof function(){}); // 'function'
console.log(typeof {});          // 'object'
console.log(typeof []);          // 'object' ← 配列も 'object'！
console.log(typeof null);        // 'object' ← これはJSの有名なバグ

// 配列かどうかは Array.isArray() で確認
console.log(Array.isArray([]));  // true
// null かどうかは === null で確認
console.log(null === null);      // true

// instanceof: オブジェクトがコンストラクタのインスタンスかどうか
console.log([] instanceof Array);   // true
console.log([] instanceof Object);  // true （Array は Object のサブクラス）
console.log('hi' instanceof String); // false （プリミティブには使えない）

// in: オブジェクトにプロパティが存在するか（継承チェーンも含む）
const obj = { name: '太郎', age: 25 };
console.log('name' in obj);         // true
console.log('email' in obj);        // false
console.log('toString' in obj);     // true （Object.prototypeから継承）

// hasOwnProperty で継承を除いた自身のプロパティだけ確認
console.log(Object.hasOwn(obj, 'name'));     // true
console.log(Object.hasOwn(obj, 'toString')); // false

let n = 10;
n += 5;   // n = n + 5  → 15
n -= 3;   // n = n - 3  → 12
n *= 2;   // n = n * 2  → 24
n /= 4;   // n = n / 4  → 6
n %= 4;   // n = n % 4  → 2
n **= 3;  // n = n ** 3 → 8

// 文字列への += も使える
let str = 'Hello';
str += ', World'; // 'Hello, World'

// ?? と || / && の混在はエラーになる（意図が曖昧なため）
// a ?? b || c  → SyntaxError（括弧が必要）
const result1 = (a ?? b) || c;  // OK: ?? を先に評価
const result2 = a ?? (b || c);  // OK: || を先に評価

// 算術と文字列結合の混在
console.log(2 + 3 + '円');    // '5円'  （2+3=5→'5'+'円'）
console.log('合計: ' + 2 + 3); // '合計: 23' ← 意図しない結果
console.log('合計: ' + (2 + 3)); // '合計: 5' ← 括弧で制御

// 前置・後置インクリメントの違い
let i = 5;
console.log(i++); // 5 （現在の値を返してからインクリメント）
console.log(i);   // 6
console.log(++i); // 7 （インクリメントしてから値を返す）