値の演算、結合 Javascript初学者講座

JavaScriptによる四則演算や文字列の結合など、変数やオブジェクトの操作をする方法を勉強していきます。

四則演算
剰余演算
文字列の結合
終わりに

四則演算

数値の計算をする際に使用しますので、基礎として覚えておきましょう。

// 足し算
const a = 1 + 2; 
console.log(a); // 3

// 引き算
const b = 2 - 1; 
console.log(b); // 1

// 掛け算
const c = 2 * 2;
console.log(c); // 4

//割り算
const d = 2 / 2;
console.log(d); // 1

剰余演算

ループ処理の中で割と使うのが剰余演算で、割り算をした時の余りを出力します。

const a = 3 % 2;
console.log(a); // 1

例えばループ処理中に1, 4, 7, 10…番目にのみ何かをしたい場合などに、下記のように記述することができます。

const ary = [1,2,3,4,5,6,7,8,9,10];

for (i = 0; i < ary.length; i++) {
  const a = ary[i] % 3
  if ( a == 1 ) {
    console.log(ary[i])
  }
}
// 1, 4, 7, 10

文字列の結合

２つ以上の文字列を結合する場合は下記の通り記述します。

const firstname = "taro";
const lastname = "yamada";
const fullname = firstname + " " + lastname;

console.log(fullname); // taro yamada

このように文字列に対して+を使うことで結合をすることができます。
では、先ほどの数値型と文字列型の２つに+を使うとどうなるでしょうか。

const age = 28;
const name = "taro";
const person = age + name;

console.log(person); // 28taro

このように文字列として結合されます。JavaScripは値のデータ型が動的に行われるプログラムです。
一見便利そうにも見えますが、データ型の定義が途中で変わってしまうことで思わぬエラーが生まれることもあります。

極端な例を下記に挙げます。

const age = 28;
const next = "1";
const nextAge = age + next;
const afterAge = nextAge + 1;

console.log(typeof(age)); // number 数字型
console.log(typeof(next)); // string 文字列型 ダブルクォーテーションで括られることで数字も文字列になる。
console.log(nextAge, typeof(nextAge)); // 281 string
console.log(afterAge, typeof(afterAge)); // 2811 string

typeofは変数に代入されている値のデータ型を返してくれる関数です。
このように数値型に対して文字列型を結合すると、今後は文字列として扱われるため計算がおかしくなるという現象が起こります。

本来であれば予めこの変数は数字型と定義していれば、その変数に文字列が代入された時点でエラーが起こって検知ができますが、JavaScriptの場合は良かれと思って文字列に変換してしまうということです。
（このような現象を防ぐためにTypeScriptという言語がありますが、本シリーズではそちらの内容には触れません。）