5.

JavaScriptの演算子

編集

本稿は JavaScript の演算子に関する記事です。演算子とは、データに対して計算や比較などを行うための記号のことです。一般的なものとして代入演算子算術演算子比較演算子論理演算子などがあります。

子ページから個別の演算子を選択してください。

本ページの子ページ

演算子の分類

分類主な記号用途
算術演算子+ - * / % **四則演算・剰余・べき乗
代入演算子= += -= *= /= %=値の代入・複合代入
比較演算子=== !== == != < > <= >=真偽判定
論理演算子&& || !論理 AND / OR / NOT
ビット演算子& | ^ ~ << >>2進数ビット操作
インクリメント / デクリメント++ --1 ずつ加減
条件 (三項)cond ? a : b1 行の条件分岐
ぬる合体??null / undefined のとき右辺を使う
オプショナルチェイン?.途中が null/undefined ならエラーにせず undefined
スプレッド / レスト...展開・可変長引数
typeof / instanceoftypeof x / x instanceof Y型判定
カンマ,左から評価し最後の値を結果に
deletedelete obj.kプロパティ削除

== と === の違い

結果説明
0 == "0"true型変換あり比較
0 === "0"false厳密比較 (型も含めて一致が必要)
null == undefinedtrue緩い比較では同一視
null === undefinedfalse厳密比較では別物
NaN === NaNfalseNumber.isNaN(x) で判定する

新しいコードでは原則 === / !== を使います。

論理演算子と短絡評価

// AND は最初に falsy になった値を返す
0 && "hello"      // 0

// OR は最初に truthy になった値を返す
0 || "hello"      // "hello"

// ??: null / undefined のときだけ右辺
0 ?? "hello"      // 0 (0 は null ではない)
null ?? "hello"   // "hello"

OR (||) と ぬる合体 (??) は似て見えますが、空文字や 0 を「値あり」として扱いたい場合は ?? を使います。

オプショナルチェイン

const user = { name: "Taro" };

// 普通のドット参照
user.profile.age        // TypeError

// オプショナルチェイン
user.profile?.age      // undefined (エラーにならない)

演算子の優先順位 (抜粋)

優先度演算子
() 関数呼出 / [] プロパティ参照 / .
! typeof ++ -- (単項)
 ** (べき乗)
 * / %
 + -
 < <= > >= instanceof in
 === !== == !=
 &&
 || ??
= / += / 三項 ? : / カンマ

迷ったら明示的に括弧を付けるのが安全です。

注意点

  • 常に === を使う== は予想外の真理値になりがち
  • + は文字列連結も兼ねる: 1 + "2""12"
  • 小数演算0.1 + 0.2 !== 0.3 の浮動小数点誤差がある
  • インクリメント前置・後置で評価タイミングが違う (++ii++)
  • delete は変数ではなくプロパティ削除専用 (旧スタイル変数では効かない)
  • 厳密モード ('use strict';) / モジュールでは挙動が一部厳しくなる

関連

編集
Post Share
子ページ
  1. 代入演算子
  2. 算術演算子
  3. 比較演算子
同階層のページ
  1. 記述方法
  2. コメント
  3. 変数の宣言
  4. 関数
  5. 演算子
  6. 条件文
  7. 配列
  8. 連想配列
  9. ループ処理
  10. 非同期処理
  11. 同期処理
  12. 確認ウィンドウを表示する方法
  13. 文字の置換
  14. base urlを取得する方法
  15. formのsubmit前にjavascriptを呼び出す方法
  16. undefinedのイコール判定
  17. Javascript のみで form を post で submit する方法