Zenn
🎰

【JavaScript】演算子

2024/05/15に公開
JavaScript
Vue 3
tech

JavaScriptにある様々な演算子。
最近、新しく実装したり改修したりしていく中で、どうだっけ？となることが何度かあったので、よく見かける演算子をまとめておこうと思います。

算術演算子( +, -, *, /, % )

  • + : 加算。2つの値を足します。

    • 例: 5 + 3 は 8
      • 💡 文字列の結合にも使えます。
      • "Hello " + "World" は "Hello World"

  • - : 減算。一方から他方を引きます。

    • 例: 10 - 4 は 6

  • * : 乗算。2つの値を掛け合わせます。

    • 例: 3 * 4 は 12

  • / : 除算。被除数を除数で割ります。

    • 例: 12 / 3 は 4

  • % : 剰余。被除数を除数で割った余りを求めます。

    • 例: 10 % 3 は 1 (10を3で割ると3余り1であるため)

代入演算子( = )

  • =: 右側の値を左側の変数に代入します。
    • 例: let x = 5; であれば、変数 x には 5 が代入される。

比較演算子( ==, ===, !=, !==, >, < )

  • == : 等しい。2つの値が等しいかどうかを比較します。

    • 💡 型の違いは無視します。型が異なっていても値が等しければtrueになります。
    • 例: 5 == 5 は true 、5 == '5' も true

  • === : 値と型が等しい。値が等しいかつ型も等しいかどうかを比較します。

    • 💡 先ほどの == との違いは型の違いを見るかどうかです。先ほどとは違い、値が等しくても型が異なればfalseになります。
    • 例: 5 === 5 は true 、5 === '5' は false

  • != : 等しくない。2つの値が等しくないかどうかを比較します。

    • 型の違いは無視されます。
    • 例: 5 != 3 は true

  • !== : 値または型*が等しくない。値が等しくないかどうか、または型が等しくないかどうかを比較します。

    • 例: 5 !== '5' は true

  • > : より大きい。左側の値が右側の値より大きいかどうかを比較します。

    • 例: 10 > 5 は true

  • < : より小さい。左側の値が右側の値より小さいかどうかを比較します。

    • 例: 3 < 7 は true

論理演算子( &&, ||, ! )

  • && : AND。2つの値が両方ともtrueであれば結果はtrueになります。

    • 例: true && false は false 、true && true は true

  • || : OR。2つの値のどちらかがtrueであれば結果はtrueになります。

    • 例: true || false は true 、false || false は false

  • ! : NOT。値を反転させます。trueをfalseに、falseをtrueにします。

    • 例: !true は false 、!false は true

条件(三項)演算子( ?: )

  • ?: : 条件式の値に基づいて値を返します。
    • 構文: 条件式 ? 値1 : 値2
      • 条件式が true の場合、値1 が返されます。
      • 条件式が false の場合、値2 が返されます。

例:

let age = 17;
let drink = age >= 20 ? "ビール" : "ジュース";
console.log(drink); // "ジュース" が出力されます。

上の例では、age が 20 未満なので条件式 age >= 20 は false となり、"ジュース" が drink に代入されています。

型演算子( typeof, instanceof )

  • 値やオブジェクトの型を調べるのに使用します。

  • 型に基づいて処理を行う等の場面で役立ちます。​​​​​​​​​​​​​​​​

  • 主な型演算子は以下の2つです。

  • typeof : 値のデータ型を返します。

例:

typeof 42; // "number" を返します
typeof true; // "boolean" を返します
typeof "Hello"; // "string" を返します
  • instanceof : オブジェクトが特定のクラスのインスタンスであるかどうかを判別します。

例:

class Dog {} 
let pudding = new Dog();

console.log(pudding instanceof Dog); // true

console.log(pudding instanceof Array); // false
  • 上の例では、pudding は Dog クラスのインスタンスなので true を返し、Array のインスタンスではないので false を返しています。

合体演算子( ?? )

  • ?? : 左側の値が null または undefined の場合に右側の値を返す論理演算子です。
    • 構文 : 左側の値 ?? 右側の値
      • 左側の値が null または undefined の場合は右側の値を返します。
      • 左側の値がそれ以外の値の場合は左側の値を返します。

例:

let user = null;
let name = user ?? "ゲスト"; 
console.log(name); // "ゲスト" が出力される

let dogName = "ポチ";
let animal = dogName ?? "名無し"; 
console.log(animal); // "ポチ" が出力される

  • 上の例では、最初の name には user が入り、user は null なので、右側の "ゲスト" が出力されています。一方で、animal には dogName が入っているので、dogName に代入されている "ポチ" が出力されます。

  • 合体演算子は、変数に値が設定されているかどうかを確認し、設定されていない場合にデフォルト値を使うなどの処理に便利です。

  • || 演算子と同様の動作をしますが、0 や '' 空文字列などの「falsy」な値は無視しません。そのため、合体演算子の方が意図しない動作を避けられる場合があります。

今回まとめたものは基本的な演算子のほんの一部ですが、これだけでも覚えておくと改修の時や意図せぬ動作があったとき、ちょっと楽になりますよね。
もっとたくさんコード書いて演算子も組み合わせて、複雑な条件判断や計算もできるようになりたいです。

最後まで読んでいただきありがとうございました。

Discussion