演算子を使用してJavaScriptで数学を行う方法

序章

数学演算は、あらゆるプログラミング言語の最も基本的で普遍的な機能の1つです。 JavaScriptでは、ブラウザのウィンドウサイズの寸法の検索、金銭的取引の最終価格の取得、Webサイトドキュメント内の要素間の距離の計算などの一般的なタスクに数値が頻繁に使用されます。

数学を高度に理解することは、有能な開発者であるための前提条件ではありませんが、JavaScriptで使用できる操作の種類と、実用的なタスクを実行するためのツールとして数学を使用する方法を知ることは重要です。

他のプログラミング言語とは異なり、JavaScriptには数値データ型が1つしかありません。 たとえば、整数（正または負の整数）と浮動小数点数（小数点付きの数値）は区別されません。

このチュートリアルでは、算術演算子、代入演算子、およびJavaScriptの数値データ型で使用される演算の順序について説明します。

算術演算子

算術演算子は、数学演算を示し、値を返す記号です。 式3 + 7 = 10で、+は加算を表す構文です。

JavaScriptには、基本的な数学からの多くの使い慣れた演算子と、プログラミングに固有のいくつかの追加の演算子があります。

JavaScript算術演算子の参照表を次に示します。

オペレーター	構文	例	意味
添加	+	x + y	xとyの合計
減算	-	x - y	xとyの違い
乗算	*	x * y	xとyの製品
分割	/	x / y	xとyの商
モジュロ	%	x % y	x / yの残り
べき乗	**	x ** y	xからyの累乗
インクリメント	++	x++	xプラス1
デクリメント	--	x--	xマイナス1

この記事では、これらの各演算子について詳しく説明します。

加減

加算および減算演算子はJavaScriptで使用可能であり、数値の合計と差を見つけるために使用できます。 JavaScriptには電卓が組み込まれており、数学演算はコンソールで直接実行できます。

プラス記号（+）を使用して、10と20を追加するなど、数値を使用して簡単に追加できます。

10 + 20;

Output30

単純な数値で数学を行うことに加えて、変数に数値を割り当てて同じ計算を実行することもできます。 この場合、xとyに数値を割り当て、その合計をzに入れます。

// Assign values to x and y
let x = 10;
let y = 20;

// Add x and y and assign the sum to z
let z = x + y;

console.log(z);

Output30

同様に、マイナス記号（-）を使用して、数値または数値を表す変数を減算します。

// Assign values to x and y
let x = 10;
let y = 20;

// Subtract x from y and assign the difference to z
let z = y - x;

console.log(z);

Output10

負の数と浮動小数点数（小数）で加算および減算することもできます。

// Assign values to x and y
let x = -5.2;
let y = 2.5;

// Subtract y from x and assign the difference to z
let z = x - y;

console.log(z);

Output-7.7

JavaScriptで注意し、注意すべき興味深い点の1つは、数値と文字列を追加した結果です。 1 + 1は2と等しくなければならないことはわかっていますが、この式は予期しない結果をもたらします。

let x = 1 + "1";

console.log(x);
typeof x;

Output11
'string'

JavaScriptは、2つの数値を加算する代わりに、ステートメント全体を文字列に変換し、それらを連結します。 JavaScriptの動的型付けの性質に注意することが重要です。これは、JavaScriptが望ましくない結果をもたらす可能性があるためです。

JavaScriptで加算または減算を使用する一般的な理由は、固定ナビゲーションバーのピクセル単位の高さを引いたIDまでスクロールすることです。

function scrollToId() {
    const navHeight = 60;
    window.scrollTo(0, window.pageYOffset - navHeight);
}

window.addEventListener('hashchange', scrollToId);

上記の例では、IDをクリックすると、IDの60ピクセル上までスクロールします。

足し算と引き算は、JavaScriptで使用する最も一般的な数式の2つです。

乗算と除算

乗算および除算演算子もJavaScriptで使用でき、数値の積と商を見つけるために使用されます。

アスタリスク（*）は、乗算演算子を表すために使用されます。

// Assign values to x and y
let x = 20;
let y = 5;

// Multiply x by y to get the product
let z = x * y;

console.log(z);

Output100

消費税を適用した後、乗算を使用してアイテムの価格を計算する場合があります。

const price = 26.5;    // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate

// Calculate total after tax to two decimal places
let totalPrice = price + (price * taxRate);
let fixedPrice = totalPrice.toFixed(2);

console.log("Total:", fixedPrice);

OutputTotal: 28.67

スラッシュ（/）は、除算演算子を表すために使用されます。

// Assign values to x and y
let x = 20;
let y = 5;

// Divide y into x to get the quotient
let z = x / y;

console.log(z);

Output4

除算は、分単位の時間数を求める場合や、テストで完了した正解の割合を計算する場合など、時間を計算する場合に特に役立ちます。

モジュロ

少し馴染みのない算術演算子の1つは、除算後の商の余りを計算するモジュロ（モジュラスとも呼ばれる）演算子です。 モジュロはパーセント記号（%）で表されます。

例として、3が9に正確に3回入り、余りがないことがわかります。

9 % 3;

Output0

この関数で見られるように、モジュロ演算子を使用して、数値が偶数か奇数かを判別できます。

// Initialize function to test if a number is even
const isEven = x => {
    // If the remainder after dividing by two is 0, return true
    if (x % 2 === 0) {
        return true;
    }
    // If the number is odd, return false
    return false;
}

// Test the number
isEven(12);

Outputtrue

上記の例では、12は2に均等に分割されるため、偶数になります。

多くの場合、プログラミングでは、モジュロはフロー制御の条件ステートメントと組み合わせて使用されます。

べき乗

Exponentiation はJavaScriptの新しい演算子の1つであり、指数によって数値の累乗を計算できます。 べき乗の構文は、連続する2つのアスタリスク（**）です。

10の5乗、つまり10 ^ 5は、次のように記述されます。

10 ** 5;

Output100000

10 ** 5は、10に10を5回掛けたものと同じです。

10 * 10 * 10 * 10 * 10;

これを書く別の方法は、Math.pow()メソッドを使用することです。

Math.pow(10, 5);

Output100000

べき乗演算子を使用することは、特定の数値の累乗を見つけるための簡潔な方法ですが、通常どおり、メソッドと演算子のどちらかを選択するときは、コードベースのスタイルと一貫性を保つことが重要です。

インクリメントとデクリメント

インクリメントおよびデクリメント演算子は、変数の数値を1つ増減します。 これらは、2つのプラス記号（++）または2つのマイナス記号（--）で表され、ループでよく使用されます。

インクリメント演算子とデクリメント演算子は変数でのみ使用できることに注意してください。 生の数値でそれらを使用しようとすると、エラーが発生します。

7++

OutputUncaught ReferenceError: Invalid left-hand side expression in postfix operation

インクリメント演算子とデクリメント演算子は、演算子が変数の前に配置されているか後に配置されているかに応じて、プレフィックス操作またはポストフィックス操作として分類できます。

まず、++xを使用して、プレフィックスの増分をテキスト送信できます。

// Set a variable
let x = 7;

// Use the prefix increment operation
let prefix = ++x;

console.log(prefix);

Output8

xの値が1つ増えました。 違いを確認するために、y++を使用して接尾辞のインクリメントをテストします。

// Set a variable
let y = 7;

// Use the prefix increment operation
let postfix = y++;

console.log(postfix);

Output7

yの値は、後置操作で増加しませんでした。 これは、式が評価されるまで値がインクリメントされないためです。

インクリメントまたはデクリメント演算子は、ループ内で最も頻繁に見られます。 このforループの例では、0から開始し、反復ごとに値を1ずつ増やして、操作を10回実行します。

// Run a loop ten times
for (let i = 0; i < 10; i++) {
  console.log(i);
}

Output0
1
2
3
4
5
6
7
8
9

上記のコードは、インクリメント演算子を使用して実現されるループの反復を示しています。

x++はx = x + 1の省略形、x--はx = x - 1の省略形と考えることができます。

代入演算子

最も一般的に使用される演算子の1つは割り当て演算子です。これはすでに見てきましたが、等号（=）で表されます。 =を使用して、右側の値を左側の変数に割り当てます。

// Assign 27 to age variable
let age = 27;

JavaScriptには、標準の代入演算子に加えて、複合代入演算子があり、算術演算子と=を組み合わせています。

たとえば、加算演算子は元の値から開始し、新しい値を加算します。

// Assign 27 to age variable
let age = 27;

age += 3;

console.log(age);

Output30

この場合、age += 3はage = age + 3と同じです。

すべての算術演算子を代入と組み合わせて、複合代入演算子を作成できます。 以下は、JavaScriptの代入演算子の参照表です。

オペレーター	構文
割り当て	=
追加の割り当て	+=
減算の割り当て	-=
乗算の割り当て	*=
部門の割り当て	/=
残りの割り当て	%=
べき乗の割り当て	**=

複合代入演算子は、インクリメントやデクリメントと同様にループで使用されることが多く、方程式を繰り返したり自動化したりする必要がある場合に使用されます。

演算子の優先順位

左から右に読んでいますが、通常の数学と同じように、演算子は優先順位の順に評価されます。

次の例では、乗算は加算よりも優先順位が高く、方程式の結果を決定します。

// First multiply 3 by 5, then add 10
10 + 3 * 5;

Output25

代わりに、最初に加算操作を実行する場合は、常に最高の優先順位を持つ括弧でグループ化する必要があります。

// First add 10 and 3, then multiply by 5
(10 + 3) * 5;

Output65

以下は、JavaScriptの算術演算子の演算子の優先順位の参照表です。最高から最低までです。 インクリメントとデクリメントの場合、postfixはprefixよりも優先されます。

インクリメント/デクリメント、乗算/除算、および加算/減算は同じレベルの優先順位を持ちます。

オペレーター	構文
括弧	()
インクリメント	++
デクリメント	--
べき乗	**
乗算	*
分割	/
添加	+
減算	-

演算子の優先順位には、算術演算子だけでなく、代入演算子、論理演算子、条件演算子なども含まれます。 完全なリストについては、Mozilla Developer Network（MDN）での演算子の優先順位を参照してください。

結論

この記事では、多くの使い慣れた数学演算子とプログラミングに固有のいくつかを含む、算術演算子と構文について説明しました。

さらに、算術代入と代入を組み合わせて複合代入演算子を作成する方法と、JavaScriptでの演算の順序についても学びました。