JavaScriptの演算子

どうも、ぺんしるです。

今日はJavaScriptの演算子について書きたいと思います。

代入

特定の値や変数値を変数に入れたい場合は、代入演算子を使用します。

代入演算子

代入は=を使用します。変数bの値をaに代入したい場合は、以下のように記載します。

var a = b;

多重代入

代入演算子は以下のように多重に利用することもできます。

以下の式では、変数cの値を変数aとbに代入しています。

var a = b = c;

算術演算子

算術演算子とは、変数値を計算する場合に使用する演算子です。

演算子	例	意味
+	a + b	a とb 加算する
–	a – b	a から b を減算する
*	a * b	a に b を乗算する
/	a / b	a を b で除算する
%	a % b	a を b で剰余する（割った余り値）

例えば、以下のコードを実行すると変数cには3が入ります。

var a = 1;
var b = 2;
var c = a + b;　//cには3が格納される

例えば、以下のコードを実行すると変数zには1が入ります。7÷3=2余りが1になるためです。

var x = 7;
var y = 3;
var z = x % y;　//zには1が格納される

優先度

演算子の優先順位は、演算子が評価される順番を決定します。より高い優先順位の演算子は最初に評価されます。

3 + 4 * 5 // 23 を返す

乗算演算子 (*) は加算演算子 (+) より高い優先順位を持つので、最初に評価されます。

カッコを使った優先度の変更方法

式を()で囲むことで、計算の優先度を変更することができます。

(3 + 4) * 5 // 35 を返す

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

インクリメント演算子には、前置と後置の2つの書き方があります。

//前置
i++;　// インクリメント
i--;　// デクリメント

//後置
++i;　// インクリメント
--i;　// デクリメント

前置と後置の違い

値を1プラスマイナスする、という意味では前置と後置は同じように見えますが違いがあります。

以下の具体例を見てみましょう。

//前置
var i = 10;
var a = i++;　// インクリメント
// 変数aには10がはいる

//後置
var i = 10;
var a = ++i;　// インクリメント
// 変数aには11がはいる

前置の場合は、変数iを変数aに返却した後にプラス1します。よって、変数aには10が格納されます。

後置の場合は、変数iをプラス1した後に、そのプラス1した値を変数aに返却します。よって、変数aには11が格納されます。

前置と後置は使い方を間違えると不具合につながるので、違いは理解しておいてくださいね。

代入演算子と算術演算子の組み合わせ

代入演算子と算術演算子を組み合わせて、代入時に算術をおこなうことができます。

演算子	例	意味
+=	a += b	aとbを加算した結果をaに代入する a = a + bと同じ意味です。
-=	a -= b	aからbを減算した結果をaに代入する a = a – bと同じ意味です。
*=	a *= b	aとbを乗算した結果をaに代入する a = a * bと同じ意味です。
/=	a /= b	aからbを除算した結果をaに代入する a = a / bと同じ意味です。
%=	a %= b	aからbを剰余 した値（割った余り値）をaに代入する a = a % bと同じ意味です。

比較演算子

別の記事で書く予定ですが、とある条件によって処理を分けたり、処理を繰り返し実行することが可能です。そのような場合、処理の条件式を記述するのに使うのが比較演算子です。

演算子	例	意味
<	a < b	a は b よりも小さい
<=	a <= b	a は b 以下
>	a > b	a は b よりも大きい
>=	a > b	a は b 以上
==	a == b	型は関係なく、a と bの値は等しい
===	a === b	型も含めて、a と bの値は等しい
!=	a != b	型は関係なく、a と bの値は等しくない
!==	a !== b	型も含めて、a と bの値は等しくない

迷うと思うので、==と===の違いをもう少し説明しますね。

三項演算子

ある式を比較した結果にもとづいて、2つの値のうち1つを返却する演算子を三項演算子と言います。

以下の場合だと、まずa==’cat’を評価して、その結果がtrueであれば’dog’をxに代入します。falseの場合は、’pig’を代入します。

var x = (a == 'cat') ? 'dog' : 'pig';

三項演算子は一見便利なようにも見えますが、以下の記事にもあるように利用については賛否両論あります。理解しづらいコードになることがあるので、ぺんしるも基本は好きではありません。

三項演算子?:は悪である。 - Qiita

三項演算子?:は悪である。異論は認める。1 三項演算子とは何か？ 悪である三項演算子(ternary operator)は?:というものだけである。それは次のようなものである。 条件演算子(conditional oper...

qiita.com

三項演算子の適切な使い方（条件演算子） - Qiita

皆さん三項演算子をif文の短縮形だと思っていませんか？ あくまでif文は文、三項演算子は演算子なので意味合いが違います。 三項演算子を適切に使用することで理解しやすいコードになるので、例題を見ながら三項演算子の使い所について学んでいっ...

qiita.com

論理演算子

複数の比較演算子を組み合わせて、 とある条件によって処理を分けたり、処理を繰り返し実行することが可能です。

演算子	使用例	意味
&&	a && b	a と b が共にtrueの時にtrue
||	a || b	a か b の少なくとも1つがtrueの場合にtrue
!	!a	a がtrueの場合にfalse、a がfalseの場合にtrue

最後に

いかがでしたか？

この辺はプログラムの基本的なところなので、覚えておいてくださいね。

分からないことが合ったら、遠慮なく質問してくださいね。

ではでは。