From 9959cbb4ec295d7b04e533d31d6fa0bba37fc68e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 21 Feb 2022 23:44:45 +0900 Subject: 2022/02/18 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../operators/operator_precedence/index.md | 861 ++++++++++++--------- 1 file changed, 474 insertions(+), 387 deletions(-) (limited to 'files') diff --git a/files/ja/web/javascript/reference/operators/operator_precedence/index.md b/files/ja/web/javascript/reference/operators/operator_precedence/index.md index 48cf7fe15e..37cce5efdc 100644 --- a/files/ja/web/javascript/reference/operators/operator_precedence/index.md +++ b/files/ja/web/javascript/reference/operators/operator_precedence/index.md @@ -2,52 +2,52 @@ title: 演算子の優先順位 slug: Web/JavaScript/Reference/Operators/Operator_Precedence tags: - - Guide - - JavaScript - - precedence - ガイド + - JavaScript - 優先順位 translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence --- -
{{jsSidebar("Operators")}}
- -

演算子の優先順位は、演算子が互いにどのように解析されるかを決定します。優先度の高い演算子は、優先度の低い演算子のオペランドになります。

+{{jsSidebar("Operators")}} -
{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}
+**演算子の優先順位**は、演算子が互いにどのように解釈されるかを決定します。優先度の高い演算子は、優先度の低い演算子のオペランドになります。 - +{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}} -

優先度と結合性

+## 優先度と結合性 -

以下の表現で記述できる式を考えてみましょう。なお、OP1 と OP2 は演算子に置き換わります。

+以下の表現で記述できる式を考えてみましょう。なお、`OP1` と `OP2` は演算子に置き換わります。 -
a OP1 b OP2 c
+```js +a OP1 b OP2 c +``` -

OP1 と OP2 の優先順位 (下記の一覧表を参照) が異なる場合は、優先順位の高い演算子が先に実行され、結合性は関係ありません。コードの中で加算が先に書かれているにもかかわらず、乗算の方が加算よりも優先順位が高く、先に実行されていることを確認してください。

+`OP1` と `OP2` の優先順位（下記の一覧表を参照）が異なる場合は、優先順位の高い演算子が先に実行され、結合性は関係ありません。コードの中で加算が先に書かれているにもかかわらず、乗算の方が加算よりも優先順位が高く、先に実行されていることを確認してください。 -
console.log(3 + 10 * 2);   // 23 を出力
+```js
+console.log(3 + 10 * 2);   // 23 を出力
 console.log(3 + (10 * 2)); // 括弧の優先順位が高いので、23 を出力
 console.log((3 + 10) * 2); // 括弧が順位を変更するので 26 を出力
-
+``` -

左結合 (左から右) は (a OP1 b) OP2 c のように処理されることであり、右結合 (右から左) は a OP1 (b OP2 c) のように解釈されることです。代入演算子は右結合なので、このように書くことができます。

+左結合（左から右）は `(a OP1 b) OP2 c` のように処理されることであり、右結合（右から左）は `a OP1 (b OP2 c)` のように解釈されることです。代入演算子は右結合なので、このように書くことができます。 -
a = b = 5; // a = (b = 5); と書いたのと同じ
-
+```js +a = b = 5; // a = (b = 5); と書いたのと同じ +``` -

これで、a と b が 5 の値を得るという期待通りの結果を得ることができます。これは代入演算子が代入した値を返すためです。まず b に 5 が設定されます。そして a にも、代入演算子の右オペランドである b = 5 が返す 5 が設定されるのです。

+これで、`a` と `b` が 5 の値を得るという期待通りの結果を得ることができます。これは代入演算子が代入した値を返すためです。まず `b` に 5 が設定されます。そして `a` にも、代入演算子の右オペランドである `b = 5` が返す 5 が設定されるのです。 -

他の例として、べき乗演算子だけが右結合性を持ちますが、他の算術演算子は左結合性を持ちます。興味深いのは、結合性や優先順位に関係なく、評価の順序は常に左から右になることです。

+他の例として、べき乗演算子だけが右結合性を持ちますが、他の算術演算子は左結合性を持ちます。興味深いのは、結合性や優先順位に関係なく、評価の順序は常に左から右になることです。 - - - - - - - + + + + + + - + - - - + + + - + - - + + +
コード出力結果
- 
+
コード出力結果
+ 
 function echo(name, num) {
     console.log("Evaluating the " + name + " side");
     return num;
@@ -55,46 +55,47 @@ function echo(name, num) {
 // 除算演算子 (/) の場合
 console.log(echo("left", 6) / echo("right", 2));
- 		- 
+
+ 
 Evaluating the left side
 Evaluating the right side
 3
-
- 
+
+ 
 function echo(name, num) {
     console.log("Evaluating the " + name + " side");
     return num;
 }
 // べき乗演算子 (**) の場合
-console.log(echo("left", 2) ** echo("right", 3));
- 		- 
+console.log(echo("left", 2) ** echo("right", 3));
+
+ 		+ 
 Evaluating the left side
 Evaluating the right side
 8
-
-

結合性の違いは、同じ優先順位の演算子が複数存在する場合に現れます。上の例のように演算子が一つだけの場合や、演算子の優先順位が異なる場合は、結合性は出力に影響を与えません。下の例では、同じ演算子が複数使われている場合に、結合性が出力結果にどのような影響を与えるかを見てみましょう。

+結合性の違いは、同じ優先順位の演算子が複数存在する場合に現れます。上の例のように演算子が一つだけの場合や、演算子の優先順位が異なる場合は、結合性は出力に影響を与えません。下の例では、同じ演算子が複数使われている場合に、結合性が出力結果にどのような影響を与えるかを見てみましょう。 - - - - - - - + + + + + + - + - - - + + + - + - - - + + + - + - - +64 + + +
コード出力結果
- 
+
コード出力結果
+ 
 function echo(name, num) {
     console.log("Evaluating the " + name + " side");
     return num;
@@ -102,19 +103,19 @@ function echo(name, num) {
 // 除算演算子 (/) の場合
 console.log(echo("left", 6) / echo("middle", 2) / echo("right", 3));
- 		- 
+
+ 
 Evaluating the left side
 Evaluating the middle side
 Evaluating the right side
 1
-
- 
+
+ 
 function echo(name, num) {
     console.log("Evaluating the " + name + " side");
     return num;
@@ -122,360 +123,446 @@ function echo(name, num) {
 // べき乗演算子 (**) の場合
 console.log(echo("left", 2) ** echo("middle", 3) ** echo("right", 2));
- 		- 
+
+ 
 Evaluating the left side
 Evaluating the middle side
 Evaluating the right side
 512
-
- 
+
+ 
 function echo(name, num) {
     console.log("Evaluating the " + name + " side");
     return num;
 }
 // 左と中央の間のべき乗を括弧で囲んだ場合
 console.log((echo("left", 2) ** echo("middle", 3)) ** echo("right", 2));
- 		- 
+
+ 
 Evaluating the left side
 Evaluating the middle side
 Evaluating the right side
-64
-
-

上記のコードを見てください。6 / 3 / 2 は、除算が左結合なので (6 / 3) / 2 と同じになります。一方で、べき乗は右結合なので、2 ** 3 ** 2 は 2 ** (3 ** 2) と同じになります。したがって、(2 ** 3) ** 2 とすると上記の表にある通り、演算順序が変わって結果が 64 になります。

+上記のコードを見てください。`6 / 3 / 2` は、除算が左結合なので `(6 / 3) / 2` と同じになります。一方で、べき乗は右結合なので、`2 ** 3 ** 2` は `2 ** (3 ** 2)` と同じになります。したがって、 `(2 ** 3) ** 2` とすると上記の表にある通り、演算順序が変わって結果が 64 になります。 -

優先順位は結合度よりも優先されることを忘れないでください。そのため、割り算とべき乗を交ぜた場合、べき乗は割り算よりも先に計算されます。例えば 2 ** 3 / 3 ** 2 の結果は 0.8888888888888888 となります。これは (2 ** 3) / (3 ** 2) と同じだからです。

+優先順位は結合度よりも優先されることを忘れないでください。そのため、割り算とべき乗を交ぜた場合、べき乗は割り算よりも先に計算されます。例えば `2 ** 3 / 3 ** 2` の結果は 0.8888888888888888 となります。これは `(2 ** 3) / (3 ** 2)` と同じだからです。 -

グループ化と短絡の注意

+### グループ化と短絡評価の注意 -

下記の表では、グループ化が最上位の優先順位を持つものとして挙げられています。しかし、特に短絡が発生する場合は、グループ化記号 ( … ) の中の式が最初に評価されるとは限りません。

+下記の表では、**グループ化**が最上位の優先順位を持つものとして挙げられています。しかし、特に短絡が発生する場合は、グループ化記号 `( … )` の中の式が最初に評価されるとは限りません。 -

短絡は、条件付き評価を表す用語です。例えば、a && (b + c) という式において、a が {{Glossary("falsy")}} である場合、従属式である (b + c) は括弧で囲まれていても評価されません。この論理的分離演算子 ("OR") は「短絡的」といえるでしょう。論理的分離演算子の他にも、ほかに短絡が発生する演算子には、論理的結合 ("AND") 演算子、Null 合体演算子、オプションチェーン演算子、条件演算子があります。いかに例を示します。

+短絡評価は、条件付き評価を表す用語です。例えば、`a && (b + c)` という式において、`a` が{{Glossary("falsy", "偽値")}}である場合、従属式である `(b + c)` は括弧で囲まれていても評価されません。この論理的分離演算子 ("OR") は「短絡的」といえるでしょう。論理的分離演算子の他にも、ほかに短絡が発生する演算子には、論理的結合 ("AND") 演算子、Null 合体演算子、オプション連鎖演算子、条件演算子があります。以下に例を示します。 -
a || (b * c);  // `a` を最初に評価し、`a` が "truthy" であれば `a` を出力
-a && (b < c);  // `a` を最初に評価し、`a` が "falsy" であれば `a` を出力
-a ?? (b || c); // `a` を最初に評価し、`a` が `null` または `undefined` でなければ `a` を出力
-a?.b.c;        // `a` を最初に評価し、then produce `a` if `a` is `null` or `undefined`
-
+```js +a || (b * c); // 最初に `a` を評価し、 `a` が「真値」であれば `a` を出力 +a && (b < c); // 最初に `a` を評価し、 `a` が「偽値」であれば `a` を出力 +a ?? (b || c); // 最初に `a` を評価し、 `a` が `null` または `undefined` でなければ `a` を出力 +a?.b.c; // 最初に `a` を評価し、 `a` が `null` または `undefined` であれば `undefined` を出力 +``` -

例

+## 例 -
3 > 2 && 2 > 1
-// returns true
+```js
+3 > 2 && 2 > 1
+// true を返す
 
-3 > 2 > 1
-// 結果は false となる。3 > 2 は true であり、true は
-// 不等号で 1 に変換されるため、true > 1 は 1 > 1 となり、
-// false となる。(3 > 2) > 1 のように括弧を付けると明確になる。
-
+3 > 2 > 1 +// 結果は false となる。3 > 2 は true であり、true は +// 不等号で 1 に変換されるため、true > 1 は 1 > 1 となり、 +// false となる。(3 > 2) > 1 のように括弧を付けると明確になる。 +``` + +## 一覧表 + +以下の表は優先順位の最も高いもの (19) から最も低いもの (1) の順に並べられています。 -

一覧表

+なお、[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)はこの表から除外しています。 — 理由は [Stack Overflow の回答](https://stackoverflow.com/a/48656377)を引用します。「[スプレッド構文は演算子ではなく](https://stackoverflow.com/q/44934828/1048572)、優先度はありません。これは配列リテラルと関数呼び出し（およびオブジェクトリテラル）の構文の一部です。」 -

以下の表は優先順位の最も高いもの (19) から最も低いもの (1) の順に並べられています。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
優先順位演算子の種類結合性演算子
19{{jsxref("Operators/Grouping", "グループ化", "", 1)}}なし( … )
18{{jsxref("Operators/Property_Accessors", "メンバーへのアクセス", "#Dot_notation", 1)}}左から右… . …
{{jsxref("Operators/Property_Accessors", "計算値によるメンバーへのアクセス","#Bracket_notation", 1)}}左から右… [ … ]
{{jsxref("Operators/new","new")}} (引数リスト付き)なしnew … ( … )
関数呼び出し左から右… ( … )
オプショナルチェイニング左から右?.
17{{jsxref("Operators/new","new")}} (引数リストなし)右から左new …
16{{jsxref("Operators/Arithmetic_Operators","後置インクリメント","#Increment", 1)}}なし… ++
{{jsxref("Operators/Arithmetic_Operators","後置デクリメント","#Decrement", 1)}}… --
15論理 NOT右から左! …
ビットごとの NOT~ …
単項 ++ …
単項 -- …
前置インクリメント++ …
前置デクリメント-- …
{{jsxref("Operators/typeof", "typeof")}}typeof …
{{jsxref("Operators/void", "void")}}void …
{{jsxref("Operators/delete", "delete")}}delete …
{{jsxref("Operators/await", "await")}}await …
14べき乗右から左… ** …
13乗算左から右… * …
除算… / …
剰余… % …
12加算左から右… + …
減算… - …
11左ビットシフト左から右… << …
右ビットシフト… >> …
符号なし右ビットシフト… >>> …
10小なり左から右… < …
小なりイコール… <= …
大なり… > …
大なりイコール… >= …
{{jsxref("Operators/in", "in")}}… in …
{{jsxref("Operators/instanceof", "instanceof")}}… instanceof …
9等価左から右… == …
不等価… != …
厳密等価… === …
厳密不等価… !== …
8ビット単位 AND左から右… & …
7ビット単位 XOR左から右… ^ …
6ビット単位 OR左から右… | …
5論理 AND左から右… && …
4論理 OR左から右… || …
Null 合体左から右… ?? …
3条件右から左… ? … : …
2代入右から左… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
… &&= …
… ||= …
… ??= …
{{jsxref("Operators/yield", "yield")}}右から左yield …
{{jsxref("Operators/yield*", "yield*")}}yield* …
1カンマ / シーケンス左から右… , …
優先順位演算子の種類結合性演算子
19 + {{jsxref("Operators/Grouping", "グループ化", "", 1)}} + なし( … )
18 + {{jsxref("Operators/Property_Accessors", "メンバーへのアクセス", "#Dot_notation", 1)}} + 左から右… . …
+ {{jsxref("Operators/Property_Accessors", "計算値によるメンバーへのアクセス","#Bracket_notation", 1)}} + 左から右… [ … ]
{{jsxref("Operators/new","new")}} (引数リスト付き)なしnew … ( … )
+ 関数呼び出し + 左から右 + … ( … ) +
+ オプション連鎖 + 左から右?.
17 + {{jsxref("Operators/new","new")}} (引数リストなし) + 右から左new …
16 + {{jsxref("Operators","後置インクリメント","#インクリメントとデクリメント", 1)}} + なし… ++
{{jsxref("Operators","後置デクリメント","#インクリメントとデクリメント", 1)}}… --
15 + 論理 NOT (!) + 右から左! …
+ ビットごとの NOT (~) + ~ …
+ 単項 + + + …
+ 単項 - + - …
+ 前置インクリメント + ++ …
+ 前置デクリメント + -- …
{{jsxref("Operators/typeof", "typeof")}}typeof …
{{jsxref("Operators/void", "void")}}void …
{{jsxref("Operators/delete", "delete")}}delete …
{{jsxref("Operators/await", "await")}}await …
14 + べき乗 (**) + 右から左… ** …
13 + 乗算 (*) + 左から右… * …
+ 除算 (/) + … / …
+ 剰余 (%) + … % …
12 + 加算 (+) + 左から右… + …
+ 減算(-) + … - …
11 + 左ビットシフト (<<) + 左から右… << …
+ 右ビットシフト + … >> …
+ 符号なし右ビットシフト (>>>) + … >>> …
10 + 小なり (<) + 左から右… < …
+ 小なりイコール (<=) + … <= …
+ 大なり (>) + … > …
+ 大なりイコール (>=) + … >= …
{{jsxref("Operators/in", "in")}}… in …
{{jsxref("Operators/instanceof", "instanceof")}}… instanceof …
9 + 等価 (==) + 左から右… == …
+ 不等価 (!=) + … != …
+ 厳密等価 (===) + … === …
+ 厳密不等価 (!==) + … !== …
8 + ビット単位 AND (&) + 左から右… & …
7 + ビット単位 XOR (^) + 左から右… ^ …
6 + ビット単位 OR (|) + 左から右… | …
5 + 論理 AND (&&) + 左から右… && …
4 + 論理 OR (||) + 左から右… || …
+ Null 合体 (??) + 左から右… ?? …
3 + 条件（三項）演算子 + 右から左… ? … : …
2 + 代入 + 右から左… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
… &&= …
… ||= …
… ??= …
{{jsxref("Operators/yield", "yield")}}右から左yield …
{{jsxref("Operators/yield*", "yield*")}}yield* …
1 + カンマ / シーケンス + 左から右… , …
-- cgit v1.2.3-54-g00ecf