前回の記事では基本の演算子について説明しました。
今回は引き続き演算子について、少し特殊な種類も含めて学習しましょう。
目次
代入演算子
これまでの記事でも変数に値を代入する「=」を何度か取り扱ってきました。
この「=」も演算子の一種類で、代入演算子と呼びます。
代入演算子には「=」以外にも特別な処理をほどこしながら代入を行う演算子が存在します。
それらを自己代入演算子と呼びます。
このセクションでは主に自己代入演算子について解説していきます。
自己代入演算子のうちの一つ、加算の自己代入演算子を見てみましょう。
let a = 0;
a += 3; // 自己代入演算子
console.log( a );
> 3上記のソースコードのうち、「+=」が自己代入演算子です。
この演算子は次のような処理を行います。
- a + 1 を計算する。この場合は 0 + 3 で 「3」 という結果になる
- 1の結果である 「3」 を a に代入する
つまりは、以下と同じ処理になります。
a = a + 3;
⇅ 同じ処理
a += 3このように、変数の値をもとにして計算をしつつ、その計算結果で変数の値を更新するのが自己代入演算子の処理になります。
以下は自己代入演算子の一覧です。
| 演算子 | 説明 | 例 | 結果 |
|---|---|---|---|
| += | 右側のオペランドを加算した結果で変数を更新する | let a = 5; a += 2; | 7 |
| -= | 右側のオペランドを減算した結果で変数を更新する | let a = 10; a -= 6; | 4 |
| /= | 右側のオペランドを除算した結果で変数を更新する | let a = 6; a /= 2; | 3 |
| *= | 右側のオペランドを乗算した結果で変数を更新する | let a = 4; a *= 4; | 16 |
| %= | 右側のオペランドを剰余を計算した結果で変数を更新する | let a = 11; a %= 4; | 3 |
| **= | 右側のオペランドでべき乗した結果で変数を更新する | let a = 2; a **= 2; | 4 |
| &&= | 右側のオペランドで論理積した結果で変数を更新する | let a = true; a &&= false; | false |
| ||= | 右側のオペランドで論理和した結果で変数を更新する | let a = false; a ||= true; | true |
| ??= | Null合体演算子（以降の節で詳しく説明） | let a = null; a ??= ‘テスト’; | ‘テスト’ |
単項演算子
オペランドが一つの演算子を単項演算子と言います。
オブジェクトのプロパティを削除する「delete」や、値の型を確認する「typeof」というものも、この単項演算子に含まれます。
| 演算子 | 用途 | 例 | 結果 |
|---|---|---|---|
| delete | オブジェクトから特定のプロパティを削除 | let obj = {val: 1}; delete obj.val | obj: {} |
| typeof | 値がどのデータ型かを確認 | typeof 1 | number |
| typeof ‘1’ | string | ||
| ! | Boolean型の値で、trueをfalseに、falseをtrueにひっくり返す | !true | false |
| !false | true | ||
| + | 値をNumber型へ変換する | +’10’ | 10 |
| +true | 1 | ||
| +false | 0 | ||
| – | 値をNumber型に変換して、正負を反対にする | -‘1’ | -1 |
これらの単項演算子のうちで、「!」はif文の条件式などでよく多用されます。
これを論理否定演算子と呼びます。
論理否定演算子は利用頻度が高いので、特によく覚えておきましょう。
三項演算子
オペランドを3つとる演算子を三項演算子と言います。
JavaScriptでは三項演算子は一つしかありません。
三項演算子では、条件式がtrueかfalseかによって、処理を切り替えることができます。
条件式 ? 条件式がtrueの場合に実行する処理 : 条件式がfalseの場合に実行する処理具体例を見てましょう。
// 例１
let a = ( 1 === 1 ) ? 'OK' : 'NG';
console.log( a );
> OK
// 例２
let b = ( 1 === '1' ) ? 'OK' : 'NG';
console.log( b );
> NG例1では条件式が「1 === 1」となっています。
これはtrueのため、「OK」の値が返却され、変数aに代入されます。
例2では条件式が「1 === ‘1’」となっています。
これはfalseのため（前回の記事の厳密等価演算子を思い出してください）、「NG」の値が返却され、変数bに入ります。
このように三項演算子は条件式によって実行したい処理を切り替えるのに使います。
if文の省略記法として見ることも可能です。
後ほどif文についても解説するので、その際に合わせて理解しておきましょう。
カンマ演算子
式を複数並べるために使われる演算子をカンマ演算子と言います。
式1, 式2, ・・・カンマ演算子で並べられた式は左から右へと順に評価され、最後のオペランドの評価値がカンマ演算子の返却値として返されます。
変数を一度に複数宣言する用途でよく利用されます。
let a = 0, b = 3;
console.log( a );
> 0
console.log( b );
> 3Null合体演算子
変数にnullやundefinedが代入されないようにガードの役目をするのがNull合体演算子になります。
「??」という演算子を使用します。
左のオペランドがnullまたはundefinedの場合、右のオペランドを返却します。
それ以外の場合は、左のオペランドを返します。
コードで具体的に見ていきましょう。
// 左のオペランドがnullの場合
let val1 = null;
let a = val1 ?? '初期値';
console.log( a );
> 初期値
// 左のオペランドがnullやundefinedじゃない場合
let val2 = 'Hello';
let b = val2 ?? '初期値';
console.log( b );
> Hello自己代入演算子でも「??=」というNull合体する代入演算子もあります。
こちらの動作も確認しましょう。
// 初期値がnullの場合
let val1 = null;
val1 ??= '初期値';
console.log( val1 );
> 初期値
// 初期値がnullやundefinedじゃない場合
let val2 = 'Good Morning';
val2 ??= '初期値';
console.log( val2 );
> Good Morningこのように、Null合体演算子はnullやundefinedを回避するために使われます。
エラーを発生させないようにnullやundefinedを回避するのは重要ですので、使い方を理解しておきましょう。
オプショナルチェイニング演算子
オブジェクトにプロパティが存在しない場合にundefinedを返すための演算子をオプショナルチェイニング演算子と言います。
オブジェクトのプロパティを取得する場合は「.」（ドット）でアクセスするのでした。
しかし、アクセスしようとしてるプロパティがそもそも存在しない場合、JavaScriptはエラーになってしまいます。
let obj = {
name: '太郎'
};
// 存在しないプロパティ「age」にアクセスする
console.log( obj.age );
> Uncaught TypeError: Cannot read property "age" of undefinedここでドット「.」の代わりにオプショナルチェイニング演算子を利用するとエラーにならずにundefinedが返却されるようになります。
オプショナル演算子はドット「.」の前にクエスチョンマークがついた「?.」という記号を利用します。
let obj = {
name: '太郎'
};
// 存在しないプロパティ「age」にオプショナルチェイニング演算子でアクセスする
console.log( obj?.age );
> undefinedこのように、存在するかどうか分からないプロパティにアクセスする場合に、エラーが発生する可能性を防ぐことができます。
Null合体演算子とともに、よく覚えておきましょう。
スプレッド演算子
オブジェクトや配列の要素を展開するための演算子をスプレッド演算子と言います。
この演算子は
- 配列の要素を、関数の引数に展開して渡す
- 複数の引数をオブジェクトや配列にまとめる
- 配列やオブジェクトを複製する
など、幅広い用途で利用できます。
今の段階では必要となる前提知識についてお伝えしていませんので、ここでの紹介は省略します。
後ほどイテレータやジェネレータという構文を解説する際に、改めて話題としてとりあげたいと思います。
まとめ
今回は様々な演算子を取り上げてその性質について解説しました。
演算子はプログラミングで処理を行う基礎となる文法なので、今回の内容をしっかりと理解しておきましょう。
次回はif文・switch文などの分岐処理について解説していきます。