【初心者向け】javascriptの演算子一覧：種類や使い方を解説

例えば、四則演算をする際に使用する「+」（足す）、「-」（引く）、「*」（掛ける）、「/」（割る）などがそれにあたります。

上記のコード例では、「=」と「+」を使って3と、4という一つ以上の値を受け取り、7という別の値を生み出していますね。

また、演算子をオペレーター、演算の対象となる値や変数のことをオペランドと言います。

先程の式でいうと、

そして、演算子には代入演算子「＝」や代数演算子「+」などの他にも様々な種類の演算子があります。

できるだけわかりやすく解説するので、ぜひ最後まで読んでみて下さいね！

 📖目次に戻る

算術演算子とは

代数演算子は、算術演算子ともいわれ、「+」（足す）、「-」（引く）、「*」（掛ける）、「/」（割る）などの一般的な計算を行う際に使用します。（数値と演算子- MDN Web Docs）

数値を掛ける乗算演算子「*」は「×」ではなく、数値を割る除算演算子「/」は、「÷」ではないので注意してください。

また、剰余演算子「%」は何に使用するの？と思う方がいるかもしれませんが、制御文（if文やfor文など）を使って、ある整数が偶数か奇数かを判別するときや、単に除算の余りを求めるときなどに使用します。

Javascriptのif文について詳しく知りたい方はコチラから！

 📖目次に戻る

インクリメント演算子とデクリメント演算子

インクリメントは、変数の値を１つ増やし、デクリメントは変数の値を１つ減らします。（数値と演算子- MDN Web Docs）

しかし、「++」「--」は変数の前にある場合と、後ろにある場合とで、挙動が変わりますので注意が必要です。

まずは、「++数値」前置加算子を見てみましょう。

 </>javascript
let num = 5;
document.write(++num); // 6

５に１が加えられ、６が返されました。

次に、「数値++」後置加算子を見てみましょう。

 </>javscript
let num = 5;
document.write(num++ ); // 5
document.write( '<br />' );
document.write(num); //6

１つ目の変数は変数がそのまま返されるので「５」になり、２つ目の変数は１が加えられるので「６」が返ります。

デクリメントでも同様に、前と後ろで値が引かれる順番が変わるから注意してね！

 📖目次に戻る

代入演算子とは

代入演算子

代入演算子とは、「=」（イコール）のことです。（式と演算子 - MDN Web Docs）

しかし、プログラミング世界の「＝」は等しいという意味ではなく、右側の値をコピーして左側の変数に代入するという意味になります。

 </>javascript
let num1 = 6;
let num2 = num1 + 1;
document.write(num1); // 6
document.write( '<br />' );
document.write(num2); // 7

num2が「7」を出力するのはもちろんですが、最初にnum1に代入された「６」は、１を足してnum2に代入した後も「６」のままです。

num1に代入された6がなくなるわけではありませんので注意してください。

JavaScriptの変数について詳しく知りたい方はコチラから！

📖目次に戻る

複合代入演算子

複合代入演算子とは、代入演算子「=」と代数演算子「+」「-」「*」「/」などの、その他の演算子を複合（２以上のものが１つになること）した演算子です。

複合代入演算子を使うことにより、少しだけコードを短く書くことができます。

例えば、変数自身に１を足したい場合は、代入演算子「=」と代数演算子「+」を使って次のように書きますが、

 </>javascript
let num = num + 1;

複合代入演算子を使用すると、

 </>javascript
let num =+ 1;

代入演算子「=」と代数演算子「+」を一つにまとめて記述することができます。

 📖目次に戻る

比較演算子とは

比較演算子は、値や文字などを比較する演算子です。（式と演算子 - MDN Web Docs）

「aはbより大きい」や「aとbは等しい」といった２つの値の大小を比較したり、値や文字列などが等しいかを判定し、等しければ「true」を、そうでない場合は「false」を返します。

比較演算子は、主にif文やfor文などの制御構文の条件式で表示結果を切り分ける際に使用されることが多いです。

比較演算子の使い方について、早速詳しく見てみよう！

📖目次に戻る

値の大小を比較する場合

比較演算子を使って値の大小を比較する場合に使用する演算子は、以下の通りです。

例として、20歳以上であれば「田中さんは、成人しています。」、20歳未満であれば「田中さんは、未成年です。」という文章を、比較演算子を使って表示してみましょう。

 </>javascript
let age = 20;
if(age >= 20){
document.write("田中さんは、成人しています。"); // こちらが表示される。
} else if(age < 20) {
document.write("田中さんは、未成年です。");
}

「age >= 20」は、20以上という意味なので20を含むので、trueとなり「田中さんは、成人しています。」が表示されます。

📖目次に戻る

値が「等しい」「等しくない」を比較する場合

比較演算子を使って値が等しい、または等しくないかを比較する場合に使用する演算子は、以下の通りです。

例として、「==」と「===」を使用し、数字の20と文字列の「20」 を比較してみましょう。

ちなみに、数値を「'」（シングルクォーテーション）または「"」（ダブルクォーテーション）で囲むと文字列として扱われるよ！

 </>javascript
let num = 20;
if(num == '20'){
document.write(num + "と文字列の「20」は値が等しいです。"); // こちらが表示される。
} else if (num === '20'){
document.write(num + "と文字列の「20」は値と型も等しいです。");
}

(num == '20') では、型の判定まではしないので「true」となり、「20と文字列の「20」は値が等しいです。」が表示されます。

次に、「!=」と「!==」を使用して、数字の20と文字列の「20」を比較してみましょう。

 </>javascript
let num = 20;
if(num != '20'){
document.write( num + "と文字列の「20」は値が等しくありません。");
} else if (num !== '20'){
document.write( num + "と文字列の「20」は値または型が等しくありません。");// こちらが表示される。
}

(num !== '20')は、値は等しいがデータ型が違うのでtrueとなり、「20と文字列の「20」は値または型が等しくありません。」が表示されます。

同じ比較でも、データ型まで比較する場合は使い分けが必要だね！

 📖目次に戻る

論理演算子とは

論理演算子は、複数の条件式や真偽値を評価し、その結果をtrueまたはfalseで返します。（式と演算子 - MDN Web Docs）

論理積は「且つ」、論理和は「または」、否定は「ではない」で言い換えて考えるとわかりやすいよ！

📖目次に戻る

論理積「&&」

論理積の「&&」は左右のオペランドの両方がtrueの場合trueを返し、それ以外はfalseを返します。

例として、if文の中で「&&」を使用して、数値と文字列の「10」を「==」で比較した２つの式を評価してみましょう。

 </>javascript
let num = 10;
let a = 10;
let b = '10';
if((num == a) && (num == b)){
document.write('TRUEです。'); //こちらが表示される
} else {
document.write('FALSEです。');
}

(num == a)と(num == b)はどちらも型までは判定しないため、値が等しいとみなされtrueとなり「TRUEです。」が表示されます。

次に、if文の中で「&&」を使用して、数値と文字列の「10」を「===」で比較した２つの式を評価してみましょう。

 </>javascript
let num = 10;
let a = 10;
let b = '10';
if((num === a) && (num === b)){
document.write('TRUEです。');
} else {
document.write('FALSEです。'); //こちらが表示される
}

しかし、(num === b)は型も比較されてしまうためFALSEとなり「FALSEです。」が表示されます。

📖目次に戻る

論理和「||」

論理和の「||」は、左右のどちらか一方のオペランドがtrueの場合や、左右両方のオペランドがtrueの場合にtrueを返し、それ以外の場合はfalseを返します。

例として、if文の中で「||」を使用して、数値と文字列の「10」を「===」で比較した２つの式を評価してみましょう。

 </>javascript
let num = 10;
let a = 10;
let b = '10';
if((num === a) || (num === b)){
document.write('TRUEです。');  //こちらが表示される
} else {
document.write('FALSEです。');
}

(num === b)がfalseですが、(num === a)がtrueのため、trueが返されます。

📖目次に戻る

否定「!」

否定の「!」は、「!a」と記述した場合、aがtrueならばfalseを、falseならtrueを返します。

例として、数値と文字列の「10」を「===」を使って比較した条件式に、否定「!」を使うとどうなるか確認してみましょう。

 </>javascript
let num = 10;
let a = '10';
if(!(num === a)){
document.write('TRUEです。');  //こちらが表示される
} else {
document.write('FALSEです。');
}

(num === a)はfalseですが、否定「!」があるためtrueとなり「TRUEです。」が表示されます。

次に、同じコードで、緩やかな比較「==」を使った場合はどうなるか確認してみましょう。

 </>javascript
let num = 10;
let a = '10';
if(!(num == a)){
document.write('TRUEです。');
} else {
document.write('FALSEです。');  //こちらが表示される
}

(num == a)を評価するのでtrueですが、否定「!」があるのでfalseとなり「FALSEです。」が表示されます。

 📖目次に戻る

文字列演算子とは

文字列演算子は左右のオペランドを連結したものを返す結合演算子「+(プラス)」と、

左のオペランドに右のオペランドを追加したものを返す結合代入演算子「+=（プラスイコール）」の２種類があります。（式と演算子 - MDN Web Docs）

まずは、結合演算子「+(プラス)」から見てみましょう。

「田中さんは」という文章と、「成人しています。」という文章を連結してみます。

 </>javascript
let str = "田中さんは、" + "成人しています。";
document.write(str);

「+」（プラス）の左辺の「田中さんは、」という文字列と、右辺の「成人しています。」が連結して返されていますね。

次に、結合代入演算子「+=（プラスイコール）」の使用例を見てみましょう。

「田中さんは、成人しています。」という文字列の入った変数に、「歳は22です。」という文字列と数値が入った変数を追加してみます。

 </>javascript
let str = "田中さんは、成人しています。";
let a = "歳は" + 22 + "です。";
str += a;
document.write(str);

変数であるstrに、文字列を連結することができました。

ちなみに、数値を「+」（プラス）で連結すると自動的に文字列として扱われます。（ここでは数値の「22」を連結しています。）

「+=」は変数に格納してしまった文字列にさらに文字列を代入したい場合に使用するよ！

 📖目次に戻る

条件演算子（三項演算子）とは

条件演算子（三項演算子）は、３つのオペランドを使用する演算子です。（式と演算子 - MDN Web Docs）

条件式を評価し、trueの場合は「:」の左側の式を返し、falseの場合は右側の式を返します。

例として、三項演算子を使って、年齢が「20」以上の場合は「成人しています。」、それ以外の場合は「未成年です。」という文を作ってみましょう。

 </>javascript
let age = 19;
document.write(age >= 20 ? "成人しています。" : "未成年です。") ;

最初に「age = 19;」を代入しているので、「age >= 20」でfalseとなり、「未成年です。」が表示されました。

三項演算子は、簡単に言うと一行で書いたif文だね！

 📖目次に戻る

ビット演算子とは

ビット演算子とは、数値をビット形式にして処理することができる演算子です。（式と演算子 - MDN Web Docs）

ビットとは「０」か「１」で構成されるコンピューター世界の最小単位で、２進数で表現するものです。

ビット演算子には以下の7種類があります。

📖目次に戻る

ビット積「&」、ビット和「|」 、排他的論理和「^」、否定「~」

ビット演算子の中でも、ビット積「&」、ビット和「|」、排他的論理和「^」、否定「~」の４つは、数値を２進数にして各桁を比較して演算します。

と、聞いても最初はよくわからないと思いますので「ビット積」を例に見てみましょう。

ビット積「＆」は、「$a & $b」のように２つの値の間に配置します。

そして、＆の前後にある２つの数値のビットを比較し、同じ位置に１がある場合に１を、そうでない場合は０を返します。

ビット演算子は、私たちが普段使っている１０進数の数値を２進数に置き換えて処理をしますので、例えば「470」と「350」をビット論理積で比較する場合は、

では、実際に「&」を使用して処理してみましょう。

 </>javascript
let a = 470;
let b = 350;
console.log( a & b ); // 342

表示結果は「342」になりますが、計算過程は以下のようになります。

2進数である「101 010 110」が10進数に変換されて「342」が表示されていることがわかると思います。

ちなみに2進数の桁数が合わない場合は、「０」として処理されます。

このように、ビット積、ビット和、排他的論理和、否定の４つは、数値を２進数にして各桁を比較します。

📖目次に戻る

左シフト、符号あり右シフト、符号なし右シフト

左シフト「<<」と符号あり右シフト「>>」、符号なし右シフト「>>>」は、数値の桁をシフト（移動）する演算子です。

左辺の数値に対して、2進数でどれだけ桁数を移動するかを右辺で指定します。(32ビットを超えた分は破棄されます。)

と、聞いても最初はあまりピンと来ないと思います。

まずは左シフト「<<」を使って42（２進数では101010）という数値を左に３桁移動した場合を例に見てみましょう。

 </>javascript
let a = 42;
console.log( a << 3 ); // 336

42を３桁左に移動させるので、42000が返ると思いましたか？違います。

42を二進数に変換してから３桁左に移動させて、再度十進数に変換して返すので336が返ります。

次に、符号なし右シフト「>>>」を使って42（２進数では101010）を右に３桁移動した場合を例に見てみましょう。

 </>javascript
let a = 42;
console.log( a >>> 3 ); // 5

42を３桁右に移動させるので、0.042が返ると思いましたか？こちらも違います。

42を二進数に変換してから３桁右に移動させて、再度十進数に変換して返すので5が返ります。

二進数に変換した後、右に3桁移動した場合は、下３桁が消え、残りの数値を処理する点に注意してください。

最後に、符号あり右シフト「>>」を見てみましょう。

と、ここで今更ですが、

つまり、符号なし右シフトで「-」（マイナス）のついた数値を変換しても「+」（プラス）にしかなりませんが、

符号あり右シフトで変換すると「-」（マイナス）は維持されます。

それでは、「-42」を右シフトしてみましょう。

-42は２進数で表すと「1111 1111 1111 1111 1111 1111 1101 0110」となります。32ビットなので32桁です。

（先ほど説明した42も、便宜上２進数では「101010」と書きましたが、実はその前に0が入り32桁になります。）

符号あり右シフト「>>」を使ってこの-42を右に３桁移動した場合をみてみます。

 </>javascript
let a = -42;
console.log( a >> 3 ); // -6

マイナスの符号は維持され「-６」が返りました。

ちなみに、同じ「-42」を符号なし右シフト「>>>」で3桁右にシフトすると、「536870906」が返るよ！

 📖目次に戻る

in演算子とは

in演算子は、指定したプロパティが、指定したオブジェクトまたは配列内に存在するかを調べることができる演算子です。（in演算子 - MDN Web Docs）

A in B というように記述し、AというプロパティがBというオブジェクトまたは配列に存在している場合はtrueを返します。

 </>javascript
const apple = {
color : 'red',
price : 120,
category : 'fruits'}
console.log( 'color' in apple ); // true

例文では、「apple」というオブジェクトの中に「color」というプロパティが存在するかを調べました。

もちろん存在するので、trueが返りましたね。

今度は配列に対して、インデックス番号が存在するかを見てみましょう。

 </>javascript
const fruits = ['apple','melon','banana'];
console.log(0 in fruits); // true
console.log(2 in fruits); // true
console.log(3 in fruits); // false

「0」と「2」は存在するのでtrueが返りましたが、「3」は存在しないのでfalseが返りました。

「apple」などの要素を記述しても、存在の有無にかかわらずfalseが返ってしまうので注意しようね！

 📖目次に戻る

delete演算子とは

delete演算子は、オブジェクトやオブジェクトのプロパティ、配列の指定したインデックスの要素を削除します。（delete演算子 - MDN Web Docs）

📖目次に戻る

オブジェクトのプロパティを削除する場合

まずは、オブジェクトに入れたプロパティを削除してみましょう。

 </>javascript
const apple = {
color: 'red',
};
console.log(apple.color); // red
console.log(delete apple.color;) // true
console.log(apple.color); // undefined

オブジェクト「apple」のプロパティ「color」を削除したので、最後の console.log では、「undefined」が返りました。

また、２番目のconsole.logを見てわかる通り、削除に成功するとtrueを返します。そうでない場合はfalseを返します。（削除しようとしたプロパティがない場合もtrueを返します。）

📖目次に戻る

配列の要素を削除する場合

３つの要素が入った配列の２番目の要素を削除してみましょう。

 </>javascript
const fruits = ['apple','melon','banana']
delete fruits[1];
console.log(fruits); // (3)['apple', empty, 'banana']

要素数は同じですが、要素の中身だけが削除されました。（代わりにemptyが入ります。）

 📖目次に戻る

typeof演算子とは

typeof演算子は、指定した値のデータ型を調べることができる演算子です。（typeof演算子 - MDN Web Docs）

typeof演算子を利用すると、以下の表のようなデータ型に対応した文字列を返します。

では、実際に見てみましょう。

 </>javascript
console.log(typeof 10); //number
console.log(typeof Infinity); //number
console.log(typeof NaN); //number
console.log(typeof 100n); //bigint
console.log(typeof 'dog'); //string
console.log(typeof true); //boolean
console.log(typeof [10, 20, 30]); //object
console.log(typeof {color:'red'}); //object
console.log(typeof Symbol('a')); //symbol
console.log(typeof undefined); //undefined
let func = function(){};
console.log(typeof func); //function
console.log(typeof null); //object

数値型は「number」文字列型は「string」というように、typeof演算子の結果は文字列で返ってきましたね。

nullをtypeof演算子で調べた場合、「null」ではなく「object」が返る点に注意してね！

 📖目次に戻る

instanceof演算子とは

instanceof演算子は、オブジェクトが、あるオブジェクト（コンストラクタ）から作られているかを確認します。

（instanceof演算子 - MDN Web Docs）

オブジェクトやコンストラクタについて詳しく知りたい方は、まずはこちらの記事をご覧ください。

左辺に指定したオブジェクトに、右辺のオブジェクトのクラスの性質を持っているかを判定します。

一致する場合はtrue、不一致の場合はfalseを返します。

 </>javascript
function User(userId,pass) {
  this.userId = userId;
  this.pass = pass;
}
tanaka = new User(001,'p-001');
console.log(tanaka instanceof User); // true

オブジェクト「tanaka」は、クラス「user」の性質を持っているため、trueが返されました。

 📖目次に戻る

void演算子とは

void演算子は、与えられた式を評価し「undefined」を返します。（void演算子 - MDN Web Docs）

単にプリミティブ値「undefined」を得るために使用されることもあり、一般的に「void(0)」と書きます。（「void 0」と等価です。）

 </>javascript
console.log(void(0)); //undefined
console.log(void 0); //undefined
console.log(void 1); //undefined

全てundefinedが出力されました。

より安全に「undefined」を表示したい場合は、void演算子「void」を使用しようね。

 📖目次に戻る

カンマ演算子とは

カンマ演算子「,」は、左側のオペランドを評価し、次に右側のオペランドを評価し、最後に右側のオペランドの値を返します。（カンマ演算子 - MDN Web Docs）

上記コードは次のコードと同じ意味になります。

つまり、カンマ演算子「,」とは、複数の式を一行で書くことができる演算子です。

カンマ演算子は、for文で複数の式を処理する場合などに、式を一つしか書けない場所で利用されます。

 </>javascript
for (let i = 0, j = 3;  i <= 3;  i++, j--){
  console.log("i = " + i + ", j = " + j );
}

結果は次の通りです。

複数の処理を一度に行うことができました。

オブジェクトや配列、関数の引数内部のカンマとは異なる点に注意してね！

 📖目次に戻る

演算子の優先順位

javascriptの演算子は全てに優先順位が決められており、１つの式の中に複数の演算子がある場合、優先順の高い順に演算を行います。（演算子の優先順位 - MDN Web Docs）

例えば、1+5*3の答えは16であり18とはならないのは、「*」が「+」より高い優先順位だからです。

📖目次に戻る

優先順位

次の表では、優先順位が高い順に演算子を挙げています。 同じ行にある演算子は優先順位が等しくなります。そのような場合は、 結合時の評価にしたがってグループ分けが決まります。

優先順位	演算子
	new . [] ()
	++ -- +(単項プラス) -(単項マイナス) ~ ! delete typeof void
	* / %
	+(加算/文字列結合)   -(減算)
	<< >> >>>
	< <= > >= in instanceof
	== != === !==
	&
	^
	|
	&&
	||
	?:
	= += -= *= /= %= <<= >>= >>>= &= ^= |=
	,

📖目次に戻る

結合則

結合則とは、同じ優先順位の演算子が並んでいる場合に処理する順序を決めるルールです。

次の表では、その結合則で演算子を「左から右」または「右から左」の処理するかを記しています。

 📖目次に戻る

最後に

いかがでしたでしょうか、今回はjavascriptの基本である演算子の中でも、よく使用する演算子について解説しました。

もちろんこれ以外にもまだまだ演算子について解説していますので、もっと知りたい方はこちらもチェックしてみて下さい。

最後までお読みいただき、ありがとうございました！