2.演算子

学習目標

算術演算子を使って計算し、結果を変数に代入できる
比較演算子を使って2つの値を比較し、true / false を得られる

1. 算術演算子

前のドキュメントでは、変数に値を入れて console.log() で出力する方法を学びました。ここでは、プログラムの中で計算を行うための 算術演算子 を学びます。

1-1. 演算子の一覧

プログラムで計算を行うには 演算子 と呼ばれる記号を使います。以下を Playground で実行してください。

console.log(10 + 3);  // 13
console.log(10 - 3);  // 7
console.log(10 * 3);  // 30
console.log(10 / 3);  // 3.3333333333333335
console.log(10 % 3);  // 1

以下の5つが算術演算子です。

演算子	意味
`+`	加算（足す）
`-`	減算（引く）
`*`	乗算（掛ける）
`/`	除算（割る）
`%`	剰余（割った余り）

1-2. 商と余り

10 / 3 の結果は 3.333... ですが、整数の商だけを求めたいときは Math.floor() を使います。

console.log(Math.floor(10 / 3)); // 3
console.log(Math.floor(8 / 2));  // 4

余りを求めるには % を使います。

console.log(10 % 3);  // 1
console.log(8 % 2);   // 0

10 % 3: 10 を 3 で割ると商は 3、余りは 1
8 % 2: 8 を 2 で割ると商は 4、余りは 0

余りの値を見ることで、その数が偶数か奇数か、あるいは特定の数の倍数かどうかが分かります。

x % 2 の結果が 0 → x は偶数（2 で割り切れる）
x % 2 の結果が 1 → x は奇数（2 で割り切れない）
x % 3 の結果が 0 → x は 3 の倍数

後で学ぶ条件分岐と組み合わせると、「偶数のときだけ処理をする」「3の倍数のとき特別な表示をする」といったプログラムが書けるようになります。

1-3. 文字列の連結

+ は数値同士では足し算ですが、文字列同士をつなげることもできます。これを連結と呼びます。

console.log("Hello" + "World"); // HelloWorld

変数に入った文字列も同様に連結できます。

const first = "田中";
const last = "太郎";
const fullName = first + last;
console.log(fullName); // 田中太郎

const greeting = "こんにちは、" + fullName + "さん";
console.log(greeting); // こんにちは、田中太郎さん

1-4. 計算の優先順位

数学と同じように、* と / は + と - より先に計算されます。

console.log(2 + 3 * 4); // 14

3 * 4 が先に計算されて 12 になり、2 + 12 で 14 です。

計算の順番を変えたいときは () で囲みます。

console.log((2 + 3) * 4); // 20

2 + 3 が先に計算されて 5 になり、5 * 4 で 20 です。

1-5. 変数の活用

演算子と変数を組み合わせると、計算結果を保存して別の計算に活用できます。

const price = 500;
const quantity = 3;

const subtotal = price * quantity;
const tax = subtotal * 0.1;

const total = subtotal + tax;
console.log(total); // 1650

const subtotal = price * quantity; では、右辺の price * quantity を先に計算し、結果の 1500 を左辺の subtotal に代入します。プログラムは常にこの「右辺を先に計算してから、左辺に代入する」という順序です。

subtotal を tax と total の両方の計算で使い回しています。

変数の現在の値を使って計算し、結果を同じ変数に代入することもできます。

let x = 0;

x = x + 1;
console.log(x); // 1

x = x + 1;
console.log(x); // 2

x = x + 1;
console.log(x); // 3

1回目の実行を追います。

右辺の x + 1 を計算する。x は現在 0 なので、0 + 1 = 1
結果の 1 を左辺の x に代入する。x が 1 に更新される

2回目は x が 1 なので 1 + 1 = 2、3回目は 2 + 1 = 3 になります。

このパターンは、次のドキュメントで学ぶループで繰り返し回数を数えるときに使います。

2. 比較演算子

算術演算子の結果は数値ですが、比較演算子の結果は true（真）または false（偽）の真偽値です。

2-1. 演算子の一覧

以下を Playground で実行してください。

console.log(10 === 10); // true
console.log(10 === 3);  // false
console.log(10 !== 3);  // true
console.log(10 > 3);    // true
console.log(10 < 3);    // false
console.log(10 >= 3);   // true
console.log(10 <= 3);   // false

演算子	意味
`===`	等しい
`!==`	等しくない
`>`	より大きい
`<`	より小さい
`>=`	以上
`<=`	以下

2-2. 変数を使った比較

実際のプログラムでは、数値を直接書いて比較するのではなく、変数に入った値を比較することがほとんどです。

const age = 20;
console.log(age >= 18); // true
console.log(age === 15); // false

age >= 18 が実行されると、コンピューターは以下の処理を行います。

age の中身を見る → 20
20 >= 18 を評価する → true

比較演算子は値を比較するだけで、変数の中身を変えることはありません。age >= 18 を実行した後も、age は 20 のままです。

3. 演習

演習: 演算子