演算子を知ろう！②｜1から始めるJavaScript#5

どうもRyokutyaです。
今回は前回に引き続き演算子について見ていきましょう！

++（–）について

前回の記事の算術演算子を説明しましたが、その際に飛ばした「++」について説明していきます。

＋＋は値を1増やす（–は値を1減らす）という意味です。
a++はa=a+1やa+=1と同じ意味になります。

let a=1;
a++  
console.log(a); //2が表示される

変数aに1を足した後aに代入するという文がa++だけで書くことができます。
変数に代入し直しているので変数に格納されているデータが更新されることに注意してください。

++（–）はどっちに付ける？

＋＋（–）は前後どちらに付けることもできます。
前に付けるのか、後ろに付けるのかで結果に違いがでるので注意してください。

let a=3;
let b=a++;
console.log(a);  //4
console.log(b);  //3

let x=3;
let y=++x;
console.log(x);  //4
console.log(y);  //4

a++のように後ろに++を付けた場合（後置加算）変数bに変数aを代入した後で変数aに+1して変数aを更新します。
そのため、consoleに表示するとaの値は4（+1して更新しているため）ｂの値は3（aの値が+1される前に代入されるため）となる。

++xのように前に++を付けた場合（前置加算）変数yに変数xを代入する前に変数xを更新するためconsoleに表示するとx,y両方とも4と表示されます。

文字の接続

算術演算子で説明した「+」は文字の接続に使うこともできます。

console.log(10 + '枚'); //10枚

この書き方は非常に便利で多用するので覚えておきましょう。
「変数と文字列型」の接続や「数値型と文字列型」の接続にも使えます。
文字の接続を行うとどのデータ型と接続しても接続後のデータ型は「文字列型」となります。

let x=5;
let y=3;
console.log(x+y+'枚');  //8枚

console.log('5'+3 );  //53(文字列型の5と数値型3の接続）

文字列型の数字と数値型の数字を文字の接続で繋いで表記することも可能です。（計算するのではなく続けて表記することができます）
文字の接続は非常に便利ですが注意も必要です。
例えば、 htmlのid名を5としておきid名の5を取得し、取得した5に+1したり-1した結果を表示するために次のようなプログラムを記述しました。

<div id="5"></div>

let x=document.getElementBuId('5').id;
console.log(x-1); //①
console.log(x+1); //②

①と②の結果がどうなるかわかりますか？

上記の例のようにJavaScriptでhtmlなどのデータを取得し計算に使おうとした場合、習得したデータのデータ型が何なのか理解することが非常に重要です。
今回の例の場合①と②では結果が異なります。
②の結果が6になると思った方は注意してください。

let x=document.getElementBuId('5').id;
console.log(x-1); //①　　結果4
console.log(x+1); //②　　結果51

何故このようなことが起こるのでしょうか？
これは、JavaScriptで取得したidの数字が「数値型」ではなく「文字列型」だったためです。
取得した5のデータ型が文字列型であったためJavaScriptに’5’+1として処理され、文字の接続が行われた結果51と表示されます。
ではなぜ①の結果は4と表示されのでしょうか？これは、JavaScriptが自動で判断してくれた結果です。
文字列型の5の後ろに来ている演算子が「-」だったため計算をしたいのだなと判断して文字列型の5を数値型の5として扱ってくれている結果、5-1と計算し4が表示されます。
「+」以外の演算子であればJavaScriptが自動で数値型として扱ってくれますが「+」に限り文字の接続として扱うため想定していたものと異なる動きをする場合があります。
前回の記事にも書きましたがJavaScriptはデータ型に寛容なプログラミング言語ですが、全くデータ型を意識しなくてもいいというわけではありません！
今回の例のような場合で②の結果を6としたい場合は、Number()を使って明示的に「数値型ですよ」とJavaScriptに教えてあげる必要があります。

let x=document.getElementBuId('5').id;
x=Number(x);  //Number(x)とすることでxは数値型ですと明示している
console.log(x+1); //6

三項演算子

条件式?処理1:処理2と書きます。
条件式の結果によって実行される処理が切り替わる珍しい演算子です。
条件式の結果がtrueの場合処理1が実行され、falseの場合処理２が実行されます。

let x=5;
(x === 5)?console.log('5です'):console.log('5じゃない！）'; //5です

論理演算子

&&について

&&は左辺と右辺の条件式が両方ともtrueであった時のみtrueを返します。
集合でいうところの「かつ」と「または」の「かつ」の方です。
左辺の条件を満たしかつ右辺の条件を満たしている時のみtrueとなります。
例えば、成人男性だけを絞り込みたい場合などは以下のように書けます。

let sex="男性";
let age=20;
sex==='男性'&& age>=20?console.log('成人男性です'):console.log('成人でないか男性ではありません');
//成人男性です

三項演算子や比較演算子、論理演算子など今まで覚えたものが詰め込まれた例でしたが理解できたでしょうか？
三項演算子の条件式の部分で変数sexが男性かつ変数ageが20以上を評価しています。
今回の場合は男性かつ20以上なので両方trueですね。
なので、処理1（trueの時のみ処理される）が実行されconsoleに成人男性ですと
表示されました。

｜｜について

｜｜は左辺と右辺の条件式どちらかがtrueであった場合trueを返します。
ちなみに両方trueの時もtrueで返してきます。
つまり両方がfalseでない限りtrueを返してきます。
「かつ」と「または」の「または」の方です。

let sex="女性";
let age=19;
sex==="男性"&&age>=20?console.log('成人してるまたは、男性です'):console.log('未成年女性です');
//未成年女性です

&&も｜｜一度に2つ以上を評価することも可能です。

 let sex="男性";
 let age=20;
 let from="日本";
 sex==="男性"&&age>=20&&from==="日本"?console.log('true'):console.log('false')//true

おわりに

今回で演算子およびデータ型の説明は終了となります。
次回はif文やfor文について説明していきます。
if文やfor文では比較演算子や論理演算子が頻繁にでてくるので、演算子をしっかり覚えておいてください。
それではまた次回！　(^^)/