「javascriptの学習を始めてみたけど、数値の足し算がうまくいかない」
このように悩んでいる方もいるのではないでしょうか？
本記事では、javasrciptの演算子という計算方法を使って、足し算や引き算などの計算方法について解説します。サンプルコードを多用しているのでコピペして利用することも可能です。
javascriptで足し算する方法について知りたい方や、うまくいかなくて悩んでいる方はぜひチェックしてみてください。
目次
javascriptで行う基本的な足し算の方法
義務教育で習った計算のように、左右の数値を計算する方法を算術演算子といいます。javascriptで行う算術演算子は下記の表のように表されます。
| 記号 | 名前 | 意味 |
| + | 加算(足し算) | 左右の数値を足す |
| – | 減算(引き算) | 左の数値から右の数値を引く |
| * | 乗算(掛け算) | 左右の数値を掛ける |
| / | 除算(割り算) | 左の数値を右の数値で割る |
実際に算術演算時で足し算や引き算をするサンプルコードは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//足し算 console.log(5 + 3); //出力結果：8 //引き算 console.log(5 - 3); //出力結果：2 //掛け算 console.log(5 * 3); //出力結果：15 //割り算 console.log(5 / 3); //出力結果：1.6666666666666667 |
【javascript】代入演算子で足し算してみよう
代入演算子は、イコール記号(=)を使って変数へ代入する演算子のことです。
変数に値を代入するだけでなく、変数に入っている値を足した合計を代入する「加算代入」があり、イコールにプラスを追加した「+=」という記号を利用します。
加算代入を利用して足し算する方法が下記になります。
|
1 2 3 4 5 6 7 |
var x = 20; //xの値は20 x += 30; //xの値20と30を足した合計50が変数xに代入される console.log(x); //50 |
足し算だけでなく、変数に入っている値を引いた値を代入する「減算代入」もあります。減算演算子は変数に入っている値からイコールの右側にある値を引いた額を変数に代入する演算子です。減算演算子のサンプルコードは下記になります。
|
1 2 3 4 5 6 7 |
var x = 30; //xの値は30 x -= 20; //xの値30から20を引いた値10が変数xに代入される console.log(x); //10 |
足し算や引き算だけでなく、代入演算子を使って割り算や掛け算もできます。代入演算子の種類と使い方は下記になります。
| 記号 | 名前 | 意味 | 使用方法 |
| = | 代入演算子 | x = y | x = y |
| += | 加算演算子(足し算) | x = x + y | x += y |
| -= | 減算演算子(引き算) | x = x – y | x -= y |
| *= | 乗算演算子(掛け算) | x = x * y | x *= y |
| /= | 除算演算子(割り算) | x = x / y | x /= y |
【javascript】単項演算子で足し算と引き算をしてみよう
これまでの演算子は、イコールをはさんだ左右の値を足したり引いたりする演算子でしたが、単項演算子は変数に直接働きかける演算子です。
単項演算子には、足し算をするインクリメント演算子と引き算をするディクリメント演算子の2種類あります。どちらも繰り返し構文であるfor文やwhile文で利用されることが多く、プログラミングの仕事でも多用する演算子になります。
インクリメント演算子とディクリメント演算子の解説をサンプルコードと一緒に解説していきます。
インクリメント演算子の使用例
インクリメント演算子は、記号「++」を用いて変数に数字の1をプラスする演算子です。サンプルコードは下記になります。
|
1 2 3 4 5 6 |
var x = 10; //xの値は10 x++ //Xに入っている値に+1を追加する console.log(x); //11 |
ディクリメント演算子の使用例
ディクリメント演算子は、記号「–」を用いて変数に数字の1を引く演算子です。サンプルコードは下記になります。
|
1 2 3 4 5 6 |
var x = 10; //xの値は10 x-- //Xに入っている値から1を引く console.log(x); //9 |
【単項演算子の応用】javascriptのfor文を使って足し算をループする方法
上記で解説したインクリメント演算子と繰り返し構文であるfor文を活用して、足し算をループする方法を解説します。プログラミングの基礎であり、実案件でも多く利用する方法なので、本項目をきっかけに身につけておきましょう。
インクリメント演算子とfor文を使って変数の数値を1ずつ追加し、変数の値が10になるまでループするサンプルコードが下記になります。
|
1 2 3 |
for(var i = 0; i <= 10; i++){ console.log(i); } |
for文の左から順に解説すると下記の流れになります。
- var i = 0で変数に0を代入
- i <= 10でiが10と同じ数値か小さい場合はfor文を繰り返す
- i++で変数iに+1を追加する
- console.logでループした回数分変数iの値を出力する
インクリメント演算子はこのように1を足し続けて処理する方法として利用することが多いので、javascriptを学び始めたばかりの方はぜひ参考にしてみてください。
インクリメント演算子とディクリメント演算子についてより詳しく学びたい方は、下記の記事もチェックしてみるとよいでしょう。
【JavaScript】インクリメント演算子「i++」と「++i」の違いをご紹介
【文字列だと上手くいかない！】javascriptで足し算する際に理解すべきこと
プログラミングには、数値を文字として認識するString型と数字として認識するint型があります。javascriptで足し算をするときに数値がString型だと足し算がうまくいきません。
例えば、1 + 1の計算をする際、1という値がint型だと1と1を足した2が出力されますが、String方だと1という文字と1という文字を足した11が出力されます。
|
1 2 3 4 5 6 7 8 9 |
//String型の場合 var x = 1; var y = 1; console.log("計算結果は" + x + y + "です。"); //int型 var x = 1; var y = 1; console.log("計算結果は" + (x + y) + "です。"); |
プログラミングは左から順に実行されていくので、上記コードのStringの場合、「計算結果は」とxの値が繋がっているので、「計算結果は1」になり、そこにyを追加するので「計算結果は11」という結果になるので数値の足し算がうまくいきません。
解決策として、「x + y」を弧線のカッコで囲うことで、プログラミングを実行する順番がカッコ内の数値からになります。そのため「x + y」の合計値である2が出力されて足し算が成り立ちます。
プログラミングを学んで間もない方だと、String型とint型の違いで足し算が上手くいかなくて躓くことが多いので気をつけましょう。
まとめ
いかがでしたか？
本記事では、javascriptの演算子を使って足し算する方法について、サンプルコードを用いて解説しました。簡単な足し算から、変数を利用したりfor文の中で使う足し算など、さまざまな方法について理解できたのではないでしょうか。
本記事で紹介した演算子は、プログラミングの仕事やこれから学ぶjavascriptの基礎知識の中でも活用することが多いので、本記事をきっかけに覚えておくとよいでしょう。
また、javascriptで足し算する際は、数字がString型になっていると上手くいかない点にもチェックしておくとよいでしょう。
ぜひ参考にしてみてください。
