コンピューター上でプログラムを作成するためには、演算子(※)の理解が必要不可欠です。
言い換えると、演算子がなければプログラムを組み立てることができないくらい、プログラミング言語と演算子には密接な関係があります。

しかし、演算子にはたくさんの種類があるため、演算子の名前を聞いただけでは役割をイメージしにくいでしょう。そこで本記事では、JavaScriptにおける代表的な演算子の種類と役割を説明していきます。

演算子(※)
「演算子」とは、足し算や引き算などの計算を行う際や、値を比較する際などに用いられる記号のこと。演算子を使用する身近な場面としては、電卓やEXCELなどの数式計算が挙げられます。計算時に使用する「+」や「-」も演算子の一つです。

算術演算子

「算術演算子」は、値を計算する際に使用されます。数学的な考えに似ているため、理解しやすい演算子です。

基本的な算術演算子は、以下の種類があります。

  • 加算「+」
  • 減算「-」
  • 除算「/」
  • 乗算「*」
  • 剰余「%」

また、「+」と「-」には、以下の算術演算子としての役割も持っています。

  • 単項プラス「+y」:数値でないyを数値に変換する
  • 単項マイナス「-y」:yの符号を反転する
  • 前置インクリメント「++y」:yに1を加える。1を加えたあとの値を返す
  • 後置インクリメント「y++」:yに1を加える。1を加える前の値を返す
  • 前置デクリメント「–y」:yから1を引く。1を引いたあとの値を返す
  • 後置デクリメント「y–」:yから1を引く。1を引く前の値を返す

各算術演算子を使うと、このような計算結果が返ります。

let a = 7;
let b = 2 - -a; //9

++b //10
--b //9

b = b * 2; //18
b = b / 3; //6

「let b = – -a」の部分をみてみると、「9」という結果が出ています。これは、減算としての「-」ではなく、単項マイナスとして「-」が働いているからです。同じ「-」であっても、減算よりも単項マイナスの方が優先的に評価されるためです。

関係演算子

「関係演算子」は、2つの値の大きさを比較します。比較の評価を行い、trueかfalseを返します。関係演算子は、if文やfor文などの条件式に使用されることが多いです。

関係演算子には以下の種類が用意されています。

  • より大きい「>」
  • 以上「>=」
  • より小さい「<」
  • 以下「<=」
let a = 2;
let b = 3;

console.log(a > b); //false

if (a < b) console.log('aはbより小さいです'); //'aはbより小さいです'

「a > b」は正しい関係値でないため、falseという結果となります。
if文の「a < b」では、trueを返し、if文の処理が実行されていることがわかります。

比較演算子

「比較演算子」は、2つの値が等しいか異なるか評価を行います。さらに比較演算子は、「厳密等価演算子」と「等価演算子」に分かれます。

厳密等価演算子(厳密不等価演算子)

厳密等価演算子は、名前のとおり厳密なだけあり、2つの値の「データの型」と「値」が一致しているか評価します。その際、3つのイコール「===」を用います。

また、厳密不等価演算子「!==」を使用すると、「データの型」と「値」が不一致かどうか評価することが可能です。

等価演算子(不等価演算子)

等価演算子は、2つの値のデータの型の違いまでみることはなく、値が等しいかどうかだけ評価します。2つのイコール「==」を使用します。

また、不当価演算子「!=」を使用すると、値が不一致かどうか評価することが可能です。

厳密等価演算子と等価演算子は具体的にどのような違いがあるのかみてみましょう。

const a = 5;
const b = '5';

console.log(a === b); //false
console.log(a !== b );  //true;

console.log(a == b); //true;
console.log(a != b );  //false

JavaScript operator

このように、等価演算子を使うと、数値の「5」と文字列の「’5’」は同等の値とみなされることがわかります。一方で厳密等価演算子は、値のデータ型まで見るため、2つの値は一致しないと評価されます。
意図しない挙動を防ぐためにも、特別な理由がないかぎりは厳密等価演算子を使うと良いでしょう。

論理演算子

「論理演算子」は、複数の条件をまとめ、その結果をtrueかfalseで返します。比較演算子などと一緒に使われることが多いです。

論理演算子には、以下があります。

  • AND「&&」
  • OR「||」
  • NOT「!」

英語表記の意味通り、「AかつBの場合」や「AまたはBの場合」、「Aではない場合」といったイメージです。

const a = 5;
const b = 10;

console.log(a === 3 && a < b); //false
console.log(a === 3 || a < b); //true
console.log(!(a > b)); //true

JavaScript operator

「AND&&」の場合は、「a === 3」の部分が一致していないため、falseという結果になります。もしtrueを返す必要がある場合は、この部分が「a === 5」でなければいけません。

一方で、「OR||」の場合は、「a < b」の部分が一致しているため、「a === 3」が一致していなくてもtrueという結果になります。 「NOT!」は、「a > bが正しくない場合」という意味になり、条件としては一致するため、trueを返します。

論理演算子を使うと細かい条件定義を行うことができるため便利ですが、コードが長くなる可能性もあるため、変数宣言するなどして可読性を意識すると良いでしょう。

typeof演算子

「typeof演算子」は、値のデータ型を表します。値には数値や文字列、オブジェクトなどがあり、「typeof 値」と記述することで、値のデータ型を参照することができます。

JavaScriptにおけるデータ型の種類は、以下の記事で詳しく解説しています。気になる方はチェックしてみてください。

参考:

それでは、どのようなデータ型が返ってくるのか検証してみましょう。

console.log(typeof 10); //'number'
console.log(typeof '文字列です'); //'string'
console.log(typeof true); //'boolean'
console.log(typeof {a: 10}); //'object'
console.log(typeof [10, 20, 30]); //'object'
console.log(typeof undefined); //'undefined'
console.log(typeof null); //'object'

JavaScript operator

数値は「’number’」、文字列は「’string’」などとデータ型が返り、オブジェクトや配列は、「’object’」のデータ型が返ります。

注意するところは、nullが「’object’」というデータ型を返すという点です。本来であればnullは、空という意味を持つ特別な値なのですが、長年残り続けているバグの原因により、「’object’」が返ってきます。
オブジェクトや配列などのほかのオブジェクト型のデータを判定する際には、nullのデータ型にも注意しましょう。

代入演算子

「代入演算子」は、変数に値を代入するときに使用します。普段から頻繁に使用するイコール「=」は代入演算子です。

代入演算子にはほかにも以下の種類があります。

  • 代入「=」
  • 加算代入「+=」
  • 減算代入「-=」
  • 乗算代入「*=」
  • 余算代入「/=」
  • 剰余代入「%=」

もう少し具体的にみてみましょう。

let a = 5;
let b = 10;
let c = 'string';

a += b;
console.log(a); //15

c += 'は文字列です';
console.log(c); //'stringは文字列です'

JavaScript operator

「+=」を記述することにより、加算と代入を同時に行うことができます。このように代入演算子は、演算と代入が同時にできることが特徴です。省略した書きかたは便利ですので、覚えておくと良いでしょう。

まとめ

今回はJavaScriptにおけるいろいろな演算子について解説しました。
プログラムを書いていくには、異なる特徴を持った演算子を使い分ける必要があるため、それぞれの役割を理解することが大切です。

演算子の特徴を掴むことができると、省略した記述方法や可読性の高いコードを書くことへの意識が高まります。ぜひ本記事を通して、演算子への理解を深めてみてください。

Javascript関連記事