JavaScriptにおける演算子
この記事ではJavaScriptにおける演算子について説明します。
YouTube Video
JavaScriptにおける演算子
JavaScriptの演算子は、数値や変数に対して計算や比較を行うための記号やキーワードです。演算子にはさまざまな種類があり、それぞれ異なる操作を行います。主な演算子を以下にまとめます。
算術演算子
JavaScriptの算術演算子には、次のようなものがあります。
演算子 | 説明 | 例 | 結果 |
---|---|---|---|
+ |
加算 | 5 + 2 |
7 |
- |
減算 | 5 - 2 |
3 |
* |
乗算 | 5 * 2 |
10 |
/ |
除算 | 5 / 2 |
2.5 |
% |
剰余(あまり) | 5 % 2 |
1 |
++ |
インクリメント(1増加) | let x = 5; x++ |
6 |
-- |
デクリメント(1減少 ) | let x = 5; x-- |
4 |
1let a = 10; // Initialize variable 'a' with the value 10
2let b = 3; // Initialize variable 'b' with the value 3
3
4// Perform and display arithmetic operations between 'a' and 'b'
5console.log("Addition (a + b): ", a + b); // 13
6console.log("Subtraction (a - b): ", a - b); // 7
7console.log("Multiplication (a * b):", a * b); // 30
8console.log("Division (a / b): ", a / b); // 3.333...
9console.log("Modulus (a % b): ", a % b); // 1
10
11// Demonstrate post-increment operation on 'a'
12// Output the current value of 'a' (10), then increment
13console.log("Post-increment (a++): ", a++);
14// Display the incremented value of 'a' (11)
15console.log("Value of 'a' after increment:", a);
16
17// Demonstrate pre-increment operation on 'a'
18// Increment 'a' first (12) then output
19console.log("Pre-increment (++a): ", ++a);
20
21// Demonstrate post-decrement operation on 'a'
22// Output the current value of 'a' (12), then decrement
23console.log("Post-decrement (a--): ", a--);
24// Display the decremented value of 'a' (11)
25console.log("Value of 'a' after decrement:", a);
26
27// Demonstrate pre-decrement operation on 'a'
28// Decrement 'a' first (10) then output
29console.log("Pre-decrement (--a): ", --a);
算術演算子は数値に対して基本的な数学的操作を行います。加算、減算などの四則演算に加え、剰余やインクリメント、デクリメントを行えます。インクリメント、デクリメントは演算子を前に置くか、後ろに置くかで返す値が異なることに注意して下さい。
代入演算子
JavaScriptの代入演算子には、次のようなものがあります。
演算子 | 説明 | 例 | 結果 |
---|---|---|---|
= |
代入 | x = 5 |
x に5 が代入される |
+= |
加算して代入 | x += 5 |
x = x + 5 |
-= |
減算して代入 | x -= 5 |
x = x - 5 |
*= |
乗算して代入 | x *= 5 |
x = x * 5 |
/= |
除算して代入 | x /= 5 |
x = x / 5 |
%= |
剰余して代入 | x %= 5 |
x = x % 5 |
1let x = 10;
2
3x += 5; // x = x + 5, so x becomes 15
4console.log('After x += 5 : ', x); // 15
5
6x -= 10;
7console.log('After x -= 10 : ', x); // 5
8
9x *= 3;
10console.log('After x *= 3 : ', x); // 15
11
12x /= 3;
13console.log('After x /= 3 : ', x); // 5
14
15x %= 2;
16console.log('After x %= 2 : ', x); // 1
代入演算子は変数に値を代入したり、変数の値を更新するために使用します。通常の代入の他に、加算などの四則演算と剰余に対しての代入演算子があります。
比較演算子
JavaScriptの比較演算子には、次のようなものがあります。
演算子 | 説明 | 例 | 結果 |
---|---|---|---|
== |
等しい | 5 == "5" |
true |
=== |
厳密に等しい(型も値も等しい) | 5 === "5" |
false |
!= |
等しくない | 5 != "5" |
false |
!== |
厳密に等しくない | 5 !== "5" |
true |
> |
より大きい | 5 > 2 |
true |
< |
より小さい | 5 < 2 |
false |
>= |
以上 | 5 >= 5 |
true |
<= |
以下 | 5 <= 4 |
false |
1console.log("5 == '5' evaluates to:", 5 == "5"); // true (because the values are equal)
2console.log("5 === '5' evaluates to:", 5 === "5"); // false (because the types are different)
3console.log("5 != '5' evaluates to:", 5 != "5"); // false
4console.log("5 !== '5' evaluates to:", 5 !== "5"); // true
5console.log("5 > 2 evaluates to:", 5 > 2); // true
6console.log("5 < 2 evaluates to:", 5 < 2); // false
7console.log("5 >= 5 evaluates to:", 5 >= 5); // true
8console.log("5 <= 4 evaluates to:", 5 <= 4); // false
9console.log("5 >= '5' evaluates to:", 5 >= "5"); // true
10console.log("5 <= '5' evaluates to:", 5 <= "5"); // true
- 比較演算子は、値を比較し、真(
true
)か偽(false
)を返します。 - 等価演算子(
==
)は、 比較を行う前に、必要であれば異なる型同士を自動的に型変換します。厳密等価演算子(===
)は、比較を行う際に、型変換は一切行われず、両方の値が同じ型で同じ値でなければtrue
になりません。厳密等価演算子(===
)を使うことで、意図しない型変換によるバグを防ぐことができるため、厳密等価演算子を優先的に使用することが推奨されます。
論理演算子
JavaScriptの論理演算子には、次のようなものがあります。
演算子 | 説明 | 例 | 結果 |
---|---|---|---|
&& |
AND(両方とも真なら真) | true && false |
false |
|| |
OR(どちらかが真なら真) | true || false |
true |
! |
NOT(真を偽、偽を真にする) | !true |
false |
1let a = true;
2let b = false;
3
4console.log("a && b evaluates to:", a && b); // false
5console.log("a || b evaluates to:", a || b); // true
6console.log("!a evaluates to:", !a); // false
論理演算子は条件が複数ある場合に使用し、条件の組み合わせを判断します。
論理演算子の優先順位
JavaScript の論理演算子は、通常は NOT
が最も優先され、次に AND
、最後に OR
が評価されます。
NOT
の優先順位が最も高い
NOT
は単項演算子であり、最も優先的に評価されます。
1console.log(!true || false); // false
AND
は OR
より優先される
AND
は OR
より優先度が高いため、AND
の部分が先に評価されます。
1console.log(true || false && false); // true
このように、AND
(&&
) の部分が先に計算され、その結果が OR
(||
) に渡されます。
AND
と OR
は短絡評価(ショートサーキット)を行う
JavaScriptの AND
と OR
は短絡評価(ショートサーキット)を行います。左側の値で結果が決まる場合、右側の式を評価しません。
1let a = false && console.log("This will not be printed");
2console.log(a); // false
3
4let b = true || console.log("This will not be printed");
5console.log(b); // true
このようにどちらの場合も、console.log()
は実行されません。
明示的な優先順位をつける
括弧を使って明示的にグループ化することによって、優先順位の誤解を防ぐことができます。
1console.log(true || (false && false)); // true
自然言語とプログラムの解釈の違い
論理演算子を使う場合、自然言語における曖昧さにも留意する必要があります。例えば、「白い犬または猫」といった場合、「白い犬」もしくは「どんな色でもいい猫」という場合と、「白い犬」または「白い猫」という場合が考えられます。コードで書くと次のようになります。
1if (isWhite && isDog || isCat) {
2 console.log(' "A white dog" or "a cat of any color" ');
3}
4
5if (isWhite && (isDog || isCat)) {
6 console.log(' "A white dog" or "a white cat" ');
7}
8
9console.log(true || (false && false)); // true
このように自然言語には曖昧さが存在するため、コーディングや設計を行う際には注意が必要です。
三項演算子(条件演算子)
JavaScriptには、**三項演算子(条件演算子)**があります。
演算子 | 説明 | 例 | 結果 |
---|---|---|---|
? : |
条件が真なら左、偽なら右 | 条件 ? 真の場合 : 偽の場合 |
条件に基づく結果 |
1let age = 20;
2let message = age >= 18 ? "Adult" : "Minor";
3console.log(message); // "Adult"
このように、条件 ? 真の場合 : 偽の場合
の形式で記述します。
ビット演算子
JavaScriptのビット演算子には、次のようなものがあります。
演算子 | 説明 | 例 | 結果 |
---|---|---|---|
& |
AND | 5 & 1 |
1 |
| |
OR | 5 | 1 |
5 |
^ |
XOR | 5 ^ 1 |
4 |
~ |
NOT | ~5 |
-6 |
<< |
左シフト | 5 << 1 |
10 |
>> |
右シフト | 5 >> 1 |
2 |
1let x = 0x0F & 0x0C;
2console.log("0x0F & 0x0C evaluates to:", x, "(0x0C, 12)"); // 0x0C (12)
3
4x = 0x04 | 0x02;
5console.log("0x04 | 0x02 evaluates to:", x, "(0x06, 6)"); // 0x06 (6)
6
7x = 0x0F ^ 0x0C;
8console.log("0x0F ^ 0x0C evaluates to:", x, "(0x03, 3)"); // 0x03 (3)
9
10// The inverted number is represented as a negative value
11// because JavaScript numbers are stored as signed 32-bit integers.
12x = ~0x0C;
13console.log("~0x0C evaluates to:", x, "(-13, 0xF3)"); // 0xF3 (-13)
14
15x = 0x04 << 1;
16console.log("0x04 << 1 evaluates to:", x, "(0x08, 8)"); // 0x08 (8)
17x = 0x04 >> 1;
18console.log("0x04 >> 1 evaluates to:", x, "(0x02, 2)"); // 0x02 (2)
ビット演算子はビット単位で数値の計算を行います。通常は低レベルの処理に使われます。
型演算子
JavaScriptの型演算子には、次のようなものがあります。
演算子 | 説明 | 例 | 結果 |
---|---|---|---|
typeof |
変数の型を返す | typeof 123 |
"number" |
instanceof |
オブジェクトが特定のクラスに属するかを確認 | arr instanceof Array |
true |
1console.log(typeof "Hello"); // "string"
2console.log(typeof 42); // "number"
3
4let arr = [1, 2, 3];
5console.log("arr instanceof Array : ", arr instanceof Array); // true
型演算子は、値の型を確認したり、特定の型に変換するために使用します。
typeof
演算子は、変数の型を返します。
instanceof
演算子は、オブジェクトが特定のクラスに属するかを確認します。
まとめ
- 算術演算子は基本的な計算を行います。
- 代入演算子は変数に値を代入、更新します。
- 比較演算子は2つの値を比較し、真偽を返します。
- 論理演算子は条件の組み合わせを判断します。
- 三項演算子は
if
文を短縮して書けます。 - ビット演算子はビット単位の計算を行います。
- 型演算子は値の型を確認できます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。