JavaScriptの演算

jsコード JavaScript

本記事では、JavaScriptの演算について解説しています。
「演算」は、プログラムの主目的でもあるため、すべてのプログラミング言語に備わる機能です。

プログラミング言語ごとに若干の差異はあれど、一つの言語でしっかりと学習すればほとんどの内容は言語が変わっても通用するものです。

演算とは

演算とは平たく言えば計算のことです。演算(計算)には、演算子を使います。

演算子には様々な種類があり、中には人間の目から見ると「これは演算(計算)なのか?」と疑問を持たれるようなものもありますが、コンピュータにとってはすべての処理が演算(計算)です。

演算子の種類

まずは、演算に使用する記号「演算子」の種類をリストアップします。

基本的、且つ重要な演算子

  • 算術演算子
  • 代入演算子
  • 比較演算子
  • 関係演算子
  • 論理演算子
  • 文字列演算子

応用的な演算子

次に挙げる演算子は、入門編である本記事ではリストアップのみに留め、別の記事で説明します。

  • 条件(三項)演算子
  • ビット演算子

算術演算子

算術演算の基本は四則演算(加減乗除)です。

四則演算

種類演算子式の例
加算+2 + 3
減算6 – 4
乗算*(アスタリスク)3 * 8
除算/(スラッシュ)9 / 3

この4種類の演算および演算子は特に問題ないかと思います。
これまで学習してきた算数や数学と異なる点は、乗算(掛け算)と除算(割り算)の演算子ですね。

算数・数学での乗算には「×」記号を使いますが、JavaScriptでは「*」記号を使い、記号の読みは「アスタリスク」です。
また、除算では「÷」記号の代わりに「/」を使い、記号の読みは「スラッシュ」です。

剰余演算

剰余演算は、割り算の余りを得るための演算です。

種類演算子式の例
剰余%15 % 4

👆上記の「式の例」で示した演算の結果は「3」です。

増加と減少

種類演算子式の例
増加
インクリメント
++2 ++
++ 2
減少
デクリメント

(マイナス記号2つ)
6 —
— 6

インクリメントおよびデクリメントは、「単項演算子」でもありますが、算術演算の項に載せています。

インクリメント(++)は、対象となる項(値や変数、オペランド)に1を加えます。
デクリメント(–、マイナス記号2つ)は、対象となる項(値や変数、オペランド)から1を引きます。

インクリメント、デクリメントともに、項の前に置く書き方(前置)と後ろに置く書き方(後置)があり、挙動が異なります。
この点はサンプルプログラムを用いて解説しておきます。

script.js
let x = 3;
console.log( x ++ );

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

x = 3;
console.log( x -- );

x = 3;
console.log( -- x );
実行結果
> 3   👈3のままxが表示された後に1が加えられる
> 4   👈先に3に1が加えられて表示されている
> 3   👈3のままxが表示された後に1が引かれる
> 2   👈先に3から1が引かれて表示されている

今回のサンプルプログラムでは、x は 3です。

前置の「++ x」 は x に対して先に1増加させた4を返します。一方、後置の「x ++」は増加される前の値 3 を返したあと xを1増加させます。

「– x」、「x –」についても増減の違いがあるだけで、同様の優先順位で動作します。

「前置」で前に演算子を置けば先に増減され、「後置」で後ろに置けば後で増減されるので、覚えやすいですね。

ただし、注意点が一つあります。

forを使用した繰り返し(ループ)の条件として指定されている場合には、上記の挙動にはならず、常に「後置」として増減が行われます。

べき乗(累乗)

べき乗(累乗)とは、値aを、n回連続する乗算です。
数学では、aを底数(基数)、nを指数(べき指数)と呼びます。

種類演算子式の例
べき乗(累乗)**2 ** 4

👆上記の「式の例」で示した演算は「2の4乗」なので、結果は「16」です。

符号に関する演算子

「正の数」、「負の数」を表すための「+」(単項プラス)、「-」(単項符号反転)です。

種類演算子式の例
単項プラス++3
単項符号反転-6
-(-6)

単項プラスの場合は、値が「正の数」であることを明示するために使用されます。

単項符号反転「-」は、単に値を「負の数」にする訳ではないことに注意が必要です。
「式の例」の2つ目に示した「-(-6)」のように、単項符号反転を付与する対象がすでに負の数である場合は、反転して正の数になるからです。

代入演算子

代入演算子は、式の右辺(右オペランドの値)左辺(左のオペランド)へ値を代入するものです。 最も基本的な代入演算子はイコール (=)です。

数学では、イコール「=」は「等号」と呼ばれ、等号を挟んだ左辺と右辺が等価であることを意味しますが、プログラミングでは呼び名も意味も異なるため注意が必要です。

1. 基本的な代入演算

種類演算子式の例意味
代入=n = 3右辺3を左辺に代入
加算代入+=n += 2n = n + 2
減算代入-=n -= 2n = n – 2
乗算代入*=n *= 2n = n * 2
除算代入/=n /= 2n = n / 2
べき乗代入**=n **= 2n = n ** 2

2. 算術演算以外の高度な代入演算

種類演算子式の例意味
左シフト代入<<=n <<= 2n = n << 2
右シフト代入>>=n >>= 2n = n >> 2
符号なし右シフト代入>>>=n >>>= 2n = n >>> 2
ビット論理積 (AND) 代入&=n &= 2n = n & 2
ビット排他的論理和 (XOR) 代入^=n ^= 2n = n ^ 2
ビット論理和 (OR) 代入|=n |= 2n = n | 2
論理積 (AND) 代入&&=n &&= 2n = n && 2
論理和 (OR) 代入||=n ||= 2n = n || 2
Null合体代入??=n ??= 2n ?? (n = 2)

「2. 高度な代入演算」は、入門編としては大変難しいので、無理に理解する必要はありません。

比較演算子

比較演算子は左辺と右辺のオペランドを比較し、その結果が真(true)であるかを判定した結果に基づき論理値(真偽値)を返します。 

種類演算子説明trueになる式の例
【前提】x = 3
等価==オペランド同士が等しい場合にtrueを返すx == 3
不等価!=オペランド同士が等しくない場合にtrueを返すx == 2
厳密等価===オペランド同士が等しく、且つデータ型も同じである場合にtrueを返すx === 3
厳密不等価!==オペランド同士のデータ型、あるいは値が等しくない場合にtrueを返すx !== “3”
大なり>左オペランドが右オペランドよりも大きい場合にtrueを返すx > 2
大なりイコール(以上)>=左オペランドが右オペランド以上である場合にtrueを返すx >= 3
小なり<左オペランドが右オペランドよりも小さい場合にtrueを返すx < 4
小なりイコール(以下)<=左オペランドが右オペランド以下である場合にtrueを返すx <= 3

関係演算子

関係演算子は左辺と右辺のオペランドを比較し、その結果が真(true)であるかを判定した結果に基づき論理値(真偽値)を返します。

比較演算子は値自体を直接比較するのに対し、関係演算子はオブジェクトのプロパティやインスタンスの関係を比較するという点で異なります。

in 演算子

in 演算子は、左辺に指定したプロパティが、右辺に指定したオブジェクト内に存在する場合にtrueを返します。

in 演算子の構文

プロパティ名または数値 in オブジェクト

左辺の「プロパティ名または数値」には、プロパティの名前または配列のインデックス(添字)を文字列、数値、シンボルのいずれかで指定します。

以下に、簡単なサンプルプログラムを例示します。

script.js
// 配列のプロパティを in 演算子で確認する
let sithLords = ["Vader", "Bane", "Sidious"];

console.log( 0 in sithLords );
console.log( 4 in sithLords );
console.log( "Bane" in sithLords );
実行結果
> true
> false
> false

注意すべきは3つ目のconsole.logの結果です。
文字列“Bane”は、sithLords(シス卿)の中に存在しているので「true」が返されると予想した方もいるのではないでしょうか。

しかし、in 演算子で存在の有無を判定できるのはプロパティなので、値の存在は判定できません

これは配列だけでなく、オブジェクトの場合も同様です。
その事実を確認するため、次にユーザー定義オブジェクトを扱うサンプルプログラムを例示します。

script.js
const jedi = {
  fullName: "Anakin Skywalker", born: "Tatooine",
};

console.log( "born" in jedi );
console.log( "Anakin Skywalker" in jedi );
実行結果
> true
> false

instanceof 演算子

instanceof 演算子は、左辺に指定されたオブジェクトが、右辺に指定されたオブジェクトの種類と一致する場合にtrueを返します。

instanceof 演算子の構文

オブジェクト名 instanceof オブジェクトの型

以下に、簡単なサンプルプログラムを例示します。

script.js
// 👇配列(Array)としてnumbersを初期化
let numbers = [1, 2, 3];
console.log( numbers instanceof Array );
console.log( numbers instanceof Number );

// 👇Dateオブジェクトとしてbirthを初期化
let birth = new Date(1995, 12, 31);
console.log( birth instanceof Date );
console.log( birth instanceof String );
実行結果
> true
> false
> true
> false

論理演算子

論理演算は、プログラミングや数学において使用される演算の一種で、真(true)または偽(false)の論理値(真偽値)を操作します。真偽値とは、真(true)または偽(false)のいずれかの値になります。

論理演算は、条件付き処理や論理的判断を行う際に重要な役割を果たします。

論理演算子の種類

JavaScriptの論理演算子は、次の3種類です。

種類演算子使用例
論理積(AND)&&a && b
論理和(OR)||a || b
論理否定(NOT)!!a

論理積(AND)

論理積(AND)は、演算子として「&&」を使用します。

基本的には、「&&」を挟む左辺と右辺が双方ともに真(true)の場合のみ、真(true)を返します。
いずれか一方でも偽(false)だった場合には偽(false)を返します。

しかしこれは、あくまでも「基本的には」という挙動で、JavaScriptの論理演算は、比較演算のように常に必ず論理値(真偽値)が返るわけではないことに注意が必要です。

この内容を理解するためには、値、あるいは式が「trueに相当する」のか「falseに相当する」のかの判定基準を知る必要があります。

  • trueに相当する
    • 非ゼロの数値(例えば、1、-10、3.14など)
    • 空ではない文字列(例えば、”hello”、”0″、”false”など)
    • 配列(空の配列であってもtrue相当
    • オブジェクト(空オブジェクトも含む
    • 関数
    • true
  • falseに相当する
    • 0(ゼロ)
    • ""(空文字列)
    • null
    • undefined
    • NaN(Not a Number)
    • false

以下に、論理積演算の例をいくつか簡単なサンプルプログラムで紹介します。
ぜひ、実際にプログラミングして、動作を確認するとともに、結果を納得できる状態に昇華させてください。

分かりやすい例
console.log( true && true );  // 👈true を返す
console.log( true && false ); // 👈false を返す
console.log( false && true ); // 👈false を返す

次は「式」同士を論理演算するサンプルです。
実際にプログラミングして結果を確認してみてください。

「式」同士の論理演算
console.log( 1 === 1 && 2 === 2 );
console.log( 1 === 2 && 2 === 2 );
console.log( 1 === 1 && 2 === 3 );

最後は、論理値以外の値同士の論理演算です。

論理値以外の論理演算
console.log( "Jedi" && "Sith" );
console.log( "Jedi" && "Jedi" );
console.log( "" && null );
console.log( null && "");
console.log( 0 && 1);
結果
> Sith
> Jedi
> 
> null
> 0

この結果は少々分かりづらいかと思います。

この法則を説明すると、次の通りです。

  • 左辺が false に相当する(falseに変換可能な)場合
    • 左辺の値をそのまま返し、右辺は評価されません。
  • 左辺が true に相当する場合
    • 続いて右辺を評価し、その値を返します。

論理和(OR)

論理和(OR)は、演算子として「||」を使用します。

※「|」👈この記号の読み方は「パイプ」です。キーボードの「¥」キーをShiftと同時に押下することで入力できます。

左辺が true に変換できる場合は、左辺をそのまま返します。 そうでなければ、右辺を返します。
論理値を用いた場合、左右いずれかの項(オペランド)が真であれば論理和「||」は true を返し、それ以外の場合は false を返します。

以下に、論理和演算の例をいくつか簡単なサンプルプログラムで紹介します。
ぜひ、実際にプログラミングして、動作を確認するとともに、結果を納得できる状態に昇華させてください。

分かりやすい例
console.log( true || true );  // 👈true を返す
console.log( true || false ); // 👈true を返す
console.log( false || true ); // 👈true を返す
console.log( false || false); // 👈false を返す

次は「式」同士を論理演算するサンプルです。
実際にプログラミングして結果を確認してみてください。

「式」同士の論理演算
console.log( 1 === 1 || 2 === 2 );
console.log( 1 === 2 || 2 === 2 );
console.log( 1 === 1 || 2 === 3 );
console.log( 1 === 2 || 2 === 3 );

最後は、論理値以外の値同士の論理演算です。

論理値以外の論理演算
console.log( "Jedi" || "Sith" );
console.log( "Jedi" || "Jedi" );
console.log( "" || null );
console.log( null || "");
console.log( 0 || 1);
結果
> Jedi
> Jedi
> null
> 
> 1

論理否定(NOT)

論理否定(論理反転、否定)演算子 は、真値に付加すると偽値になり、偽値に付加すれば真値になるという天邪鬼的な演算子です。
演算子の記号にはエクスクラメーションマーク「!」を使用します。

基本的には論理型 (真偽値型、ブール型) の値に対して使用されますが、論理型以外の値に使用した場合、単一の項(オペランド)が true に変換できる場合は false を返し、それ以外は true を返します。

よって、論理積や論理和のように、論理型以外の値が返ることはありません。

以下に簡単なサンプルプログラムを例示します。

論理否定のサンプル
console.log( !true );  // 👈trueが反転され、falseを返す
console.log( !false ); // 👈falseが反転され、trueを返す

次は「式」を論理否定するサンプルです。
実際にプログラミングして結果を確認してみてください。

「式」同士の論理否定
console.log( !(2 === 2) );
console.log( !(3 === 2) );

最後は、論理値以外の値同士の論理演算です。

論理値以外の論理否定
console.log( !"Jedi" );
console.log( !1 );
console.log( !"" );
console.log( !null );
console.log( !0 );
結果
> false
> false
> true
> true
> true

文字列演算子

JavaScriptで文字列に対して使用できる演算子には、前述の比較演算子や代入演算子のひとつである「+=」に加えて、文字列同士を結合するための演算子があります。
演算子の記号には、「+」を使用します。

基本的には、文字列同士を結合する際に使われますが、結合される値の中にひとつでも文字列がある場合、数値が含まれていても全体を文字列として結合します。

以下に簡単なサンプルプログラムを例示します。

文字列結合のサンプル
const greetings = "Hello";
let target= "there";

console.log( greetings + " " + target + ".");
結果
> Hello there.
文字列結合(数値入り)のサンプル
console.log( 0 + "と" + "ゼロ");

// 👇丸カッコ内(1 + 1)は優先的に計算される
console.log( 1 + "+" + 1 + "=" + (1 + 1) );
結果
> 0とゼロ
> 1+1=2

ECMAScript 2015(ES6)以降、テンプレートリテラルという機能が追加されたため、文字列結合演算子を使うことなく、文字列内に変数を組み込むことができるようになっています。

テンプレートリテラルについては、記事『JavaScriptのデータ型 「文字列」』の「バッククォーテーションについて」の項で詳しく説明していますので、ご確認ください。

最後に

次に学習するのは『JavaScriptの制御構文』です。


本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

長い長い記事になりましたが、最後までお読みいただき、ありがとうございました。

『詳説 JavaScript』メニューに戻る

コメント

タイトルとURLをコピーしました