【初心者向け】JavaScriptの演算子を解説します

この記事では、JavaScriptの演算子について、初心者向けに解説しています。

本記事で解説するJavaScriptの演算子は下記の４つです。

それでは、1つずつ解説していきます。

算術演算子

算術演算子は、簡単に言ってしまえば、「足し算（加算）」「引き算（減算）」「掛け算（乗算）」「割り算（除算）」のことです。

JavaScriptでも基本的なこの算術演算子が用意されています。

プラス演算子

まず、プラス演算子は、「＋」で足し算をする演算子となります。

下記の様に、「＋」の右側のデータと左側のデータを加算することができます。

また、変数に格納した値を足すことも可能です。

console.log(11 + 23); //35と表示

let num = 10
let num2 = 20

console.log(11 + num); //21と表示

console.log(num + num2); //30と表示

文字列結合演算子

上記で説明したプラス演算子（＋）は、文字列を結合される時にも利用することが可能です。

「＋」で繋ぐことで右側のデータと左側のデータを連結することができ、変数に格納した値を足すことも可能です。

下記の「console.log(“2+3”)」のようにダブルクォーテーションで囲った中の「＋」については、文字列の一部と判断されるため演算されることはありません。

また、数字の文字列型の場合「＋」で繋ぐことで、足し算をされることなく文字列型として連結することが可能です。

※文字列型と数字型を「＋」で繋ぐ際にはデータ型で解説したとおり注意が必要です。

console.log("こんにちは！" + "トム"); //「こんにちは！トム」と表示

let str = "おはよう！"
let str2 = "エミリー"

console.log(str + "ジェシー"); //「おはよう！ジェシー」と表示

console.log(str + str2); //「おはよう！エミリー」と表示

console.log("2+3"); //「2+3」と表示

let strNumber = "2022";
let strNumber2 = "1225";

console.log(strNumber + strNumber2); //「20221225」と表示

マイナス演算子

マイナス演算子は、「－」で数値型のデータを繋ぐことで、「引き算（減算）」をすることができます。

console.log(15 - 10); //「5」と表示

let num = 20;
let num2 = 12;

console.log(35 - num); //「15」と表示

console.log(num - num2 ); //「8」と表示

乗算演算子

乗算演算子は、「*」で数値型のデータを繋ぐことで、「掛け算（乗算）」をすることができます。

console.log(15 * 10); //「150」と表示

let num = 20;
let num2 = 12;

console.log(35 * num); //「700」と表示

console.log(num * num2 ); //「240」と表示

徐算演算子

除算演算子は、「/」で数値型のデータを繋ぐことで、「割り算（除算）」をすることができます。

console.log(15 / 10); //「1.5」と表示

let num = 20;
let num2 = 5;

console.log(40 / num); //「2」と表示

console.log(num / num2 ); //「4」と表示

剰余演算子

ここまで「足し算（加算）」「引き算（減算）」「掛け算（乗算）」「割り算（除算）」と基本の４つ演算子を解説しましたが、プログラミングでは「剰余演算子」が存在し、これは、割り算のあまりの値を求める演算子となります。

「剰余演算子」は、「％」で数値型のデータを繋ぐことで、割り算のあまりの値を求めることができます。

console.log(15 % 10); //「5」と表示

let num = 20;
let num2 = 12;

console.log(40 % num); //「0」と表示

console.log(num % num2 ); //「8」と表示

インクリメント演算子

インクリメント演算子は、よく数値の演算で使われる１を加算もしくは、１を減算する記述を簡潔に記述する方法です。

※「－１」をする場合は、デクリメント演算といいます。

まず、インクリメント演算子を利用しないで変数に「＋１」をする場合ですが、下記のように「num = num +1;」のような記述をします。

let num = 20;

console.log(num); //「20」と表示

num = num +1;

console.log(num); //「21」と表示

それでは、同じことをインクリメント演算子を使って表現する場合ですが、「数値＋＋」と記述することで上記と同じ（「num = num +1;」）演算ができます。

let num = 20;

console.log(num); //「20」と表示

num++;

console.log(num); //「21」と表示

同様に、デクリメント演算では、「数値ーー」と記述することで上記と「－１」することができます。

let num = 20;

console.log(num); //「20」と表示

num--;

console.log(num); //「19」と表示

関係（比較）演算子

比較演算子は、値を比較して、その結果が「true」か「false」判定し、返されます。

つまり、論理演算子の返される値は、boolean型（真偽値）となります。

等価、不等価

まずは、「等価」、「不等価」ですが、これは右辺と左辺の値が等しいかどうかを判定するものです。

書き方としては、等価は「＝＝」、不等価は「！＝」と記載します。

※「！」は否定の時によく使われます。

let num = 20;

console.log(1 == 1); //「true」と表示
console.log(20 == num); //「true」と表示
console.log(30 == num); //「false」と表示

console.log(1 != 1); //「false」と表示
console.log(20 != num); //「false」と表示
console.log(30 != num); //「true」と表示

厳密等価、厳密不等価

次に、「厳密等価」、「厳密不等価」ですが、これは右辺と左辺の値が等しくかつ型が同じかどうかを判定するものです。

書き方としては、厳密等価は「＝＝＝」、厳密不等価は「！＝＝」と記載します。

※「！」は否定の時によく使われます。

 

let num = 20;

console.log(1 === 1); //「true」と表示
console.log(20 === num); //「true」と表示
console.log("20" === num); //「false」と表示

console.log(1 !== 1); //「false」と表示
console.log(20 !== num); //「false」と表示
console.log("20" !== num); //「true」と表示

等価と厳密等価の違い

上記で説明した、等価と厳密等価ですが、一見同じような結果が返ってくるように見えますが、

厳密というだけあって、厳密等価の方は、型まで判定されるため、より厳密に判定を行うことができます。

let num = 20;
let str = "20";

console.log(num == str); //「true」と表示
console.log(num === str); //「false」と表示

console.log(0 == false);  //「true」と表示
console.log(0 === false);  //「false」と表示

console.log(0 == null); //「false」と表示
console.log(0 === null); //「false」と表示

console.log(null == undefined); //「true」と表示
console.log(null === undefined); //「false」と表示

上記は、等価と厳密等価で挙動の違う例です。

等価の場合、型が違っていても、「true」と判定されるため、予期せぬ結果となる場合があります。しかたがって、一般的に等価はあまり使うべきではないです。

ただし、上記の例のとおり、等価の場合には「null」と「undefined」で挙動が変わるため、明白にこの二つを分けて比較したい場合には、等価を利用することとなります。

大なり、小なり

大なり、小なりについては、右辺と左辺を比べ、どちらが大きいかで真偽値を返します。

 

let num = 20;

console.log(num > 10); //「true」と表示
console.log(num > 20); //「false」と表示
console.log(num > 30); //「false」と表示

console.log(num >= 10); //「true」と表示
console.log(num >= 20); //「true」と表示
console.log(num >= 30); //「false」と表示

console.log(num < 10); //「false」と表示
console.log(num < 20); //「false」と表示
console.log(num < 30); //「true」と表示

console.log(num <= 10); //「false」と表示
console.log(num <= 20); //「true」と表示
console.log(num <= 30); //「true」と表示

論理演算子

論理演算子は、比較演算子などを使用する際に、一緒に使われることの多い演算子、比較演算子のパートで解説した比較演算子だけの場合、比較できるのは、1つだけでしたが、論理演算子を合わせて使うことで、条件を複数に増やすことが可能です。

AND演算子

AND演算子は、「値 ＆＆ 値」という記述の方法をし、両辺とも「true」の場合に「true」を返し、それ以外の場合には、「false」が返されます。AND演算子は一般的に論理積とも言われます。

let num = 20;
let num2 = 30;

//numは20以上でかつnum2は20より大きい場合にtrue
console.log(num >= 20 && num2 > 20); // 「true」と表示

//numは20以上でかつnum2は20より小さい場合にtrue
console.log(num >= 20 && num2 < 20 ); //「false」と表示

//numは20より大きい場合かつnum2は20より大きい場合にtrue
console.log(num > 20 && num2 > 20); //「false」と表示

//numは20より大きい場合かつnum2は20より小さい場合にtrue
console.log(num > 20 && num2 < 20); //「false」と表示

OR演算子

OR演算子は、「値 || 値」という記述の方法をし、片方でも「true」の場合に「true」を返し、両方とも「false」の場合には、「false」が返されます。OR演算子は一般的に論理和とも言われます。

let num = 20;
let num2 = 30;

//numは20以上またはnum2は20より大きい場合にtrue
console.log(num >= 20 || num2 > 20); // 「true」と表示

//numは20以上またはnum2は20より小さい場合にtrue
console.log(num >= 20 || num2 < 20 ); //「false」と表示

//numは20より大きい場合またはnum2は20より大きい場合にtrue
console.log(num > 20 || num2 > 20); //「false」と表示

//numは20より大きい場合またはnum2は20より小さい場合にtrue
console.log(num > 20 || num2 < 20); //「false」と表示

NOT演算子

NOT演算子は、「!値 」という記述の方法をし、値が「true」の場合に「false」を返し、値が「false」の場合に「true」を返します。

let num = 20;

console.log(num === 20); // 「true」と表示
console.log(!(num === 20)); // 「false」と表示

console.log(num === 10); // 「false」と表示
console.log(!(num === 10)); // 「true」と表示

代入演算子

代入演算子については、実はここまでも何度も使っている演算子で、「＝」でつなぐことで、右辺値を左辺に代入する演算子となります。

let num = 20;

console.log( num ); //「20」と表示される

分割演算子

基本的な代入演算子については、1つの値を右辺から左辺に代入するものですが、分割代入は、配列やオブジェクトの値を一度に複数の変数へ代入することができます。

配列の分割代入

例えば下記のような配列の値を1つずつ代入する場合、通常の代入演算子で行う場合、下記のようになります。

let arr = ["banana","apple"]

let text1 = arr[0];
let text2 = arr[1];

console.log(text1); //「banana」と表示 
console.log(text2); //「apple」と表示

これを分割演算子で行う場合、下記のようになります。

配列を分割する場合、左辺の[ ]内に配列の0番目から順番に代入する変数名をカンマで区切り記載し、イコールの左側には、分割元の配列の変数名を記載することで、分割代入することができます。

出力する際は、[ ]内に記載した変数名で出力可能です。

let arr = ["banana","apple"]

let [text1,text2] = arr;　//分割代入

console.log(text1);//「banana」と表示 
console.log(text2);//「apple」と表示

オブジェクトの分割代入

下記のようなオブジェクトの値を1つずつ代入する場合、通常の代入演算子で行う場合、下記のようになります。

let arr ={name:"Tom",age:25};

let name = arr.name;
let age = arr.age;

console.log(name);//「Tom」と表示 
console.log(age);//「25」と表示 

これを分割演算子で行う場合、下記のようになります。

配列を分割する場合、左辺の{ }内にオブジェクトのキーと同じ名称の変数名をカンマで区切り記載し、イコールの左側には、分割元のオブジェクトの変数名を記載することで、分割代入することができます。

出力する際は、｛｝内に記載した変数名で出力可能です。

let arr ={name:"Tom",age:25};

let {name,age} =arr;　//分割代入

console.log(name);//「Tom」と表示 
console.log(age);//「25」と表示 

「最近、独学での学習に限界を感じてませんか？」

 

私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！