JavaScript - 演算子の優先順位

こんにちは、将来のプログラマーさんたち!今日は、初めは少し怖そうに聞こえるトピックについてお話しするけど、心配しないで。それほど怖くない promise します。JavaScriptの演算子の優先順位について話しましょう。これをプログラミングにおける数学の「階級」のようなものと考えてください。一緒に解き明かしてみましょう!

JavaScript - Operator Precedence

演算子の優先順位とは?

深淵に飛び込む前に、まず基礎から始めましょう。演算子の優先順位は、数学の授業で学んだ演算の順序と似ています。PEMDAS(括弧、指数、乗算、除算、加算、減算)を覚えていますか?JavaScriptにもその own version があります!

演算子の優先順位は、他の演算子に対する演算子の解析順序を決定します。優先順位が高い演算子は、優先順位が低い演算子の被演算数になります。

簡単な例を見てみましょう:

let result = 5 + 3 * 2;
console.log(result); // 出力: 11

答えが16(5 + 3 = 8、それから 8 2 = 16)であると思うかもしれませんが、実際には11です。なぜでしょう?なぜなら、乗算は加算よりも優先順位が高いからです。まず 3 2 を計算して6にし、その後 5 を足します。

結合性

次に、少し難しい言葉について話しましょう:結合性。心配しないで、それほど難しくありません!

結合性は、同じ優先順位を持つ演算子がどのように処理されるかを決定します。左から右への順序または右から左への順序のどちらかです。

左から右への結合性

ほとんどの演算子は左から右への結合性に従います。例を見てみましょう:

let a = 10 - 5 - 2;
console.log(a); // 出力: 3

JavaScriptはこのように処理します:

  1. 10 - 5 = 5
  2. 5 - 2 = 3

右から左への結合性

一部の演算子、たとえば代入演算子(=)は右から左への結合性を持っています。どのように動作するか見てみましょう:

let a, b, c;
a = b = c = 5;
console.log(a, b, c); // 出力: 5 5 5

JavaScriptは右から左に処理します:

  1. c = 5
  2. b = c(5)
  3. a = b(5)

演算子の優先順位表

さあ、JavaScriptの演算子の優先順位の「メニュー」を見てみましょう。すべてをすぐに理解する必要はありません - 後で例をいくつか見ていきます!

優先順位 演算子の種類 結合性 演算子
19 グループ化 - ( ... )
18 メンバーアクセス 左から右 . []
17 関数呼び出し 左から右 ... ( )
16 新しい(引数リストあり) - new ... ( )
15 後置インクリメント/デクリメント - ... ++ ... --
14 ロジカルNOT、ビットwiseNOT、一項プラス/マイナス、前置インクリメント/デクリメント、typeof、void、delete、await 右から左 ! ~ + - ++ -- typeof void delete await
13 結合 右から左 **
12 乗算、除算、余剰 左から右 * / %
11 加算、減算 左から右 + -
10 ビットwiseシフト 左から右 << >> >>>
9 関係 左から右 < <= > >= in instanceof
8 等価 左から右 == != === !==
7 ビットwiseAND 左から右 &
6 ビットwiseXOR 左から右 ^
5 ビットwiseOR 左から右 |
4 ロジカルAND 左から右 &&
3 ロジカルOR 左から右 ||
2 条件 右から左 ?:
1 代入 右から左 = += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0 コンマ 左から右 ,

さあ、この知識を実践に当てて、いくつかの例を見てみましょう!

例1: 算術演算

let result = 2 + 3 * 4 - 1;
console.log(result); // 出力: 13

JavaScriptはこのように評価します:

  1. 3 * 4 = 12(乗算が高い優先順位を持っている)
  2. 2 + 12 = 14
  3. 14 - 1 = 13

例2: ロジカル演算

let x = 5;
let y = 10;
let z = 15;

let result = x < y && y < z || x > z;
console.log(result); // 出力: true

これを分解してみましょう:

  1. x < y は true
  2. y < z は true
  3. true && true は true
  4. x > z は false
  5. true || false は true

覚えておいてください、&&(AND)は ||(OR)よりも高い優先順位を持っています。

例3: 混合演算

let a = 3;
let b = 4;
let c = 5;

let result = a + b * c > c * (a + b) && a < b;
console.log(result); // 出力: false

これは複雑に見えますが、ステップバイステップに見てみましょう:

  1. b * c = 20
  2. a + 20 = 23
  3. c (a + b) = 5 7 = 35
  4. 23 > 35 は false
  5. a < b は true
  6. false && true は false

例4: 代入と比較

let x, y, z;
x = y = z = 5;
console.log(x, y, z); // 出力: 5 5 5

let result = x == y === z;
console.log(result); // 出力: true

覚えておいてください、代入(=)は右から左の結合性を持っており、等価比較(==、===)は左から右の結合性を持っています。

  1. z = 5
  2. y = z(5)
  3. x = y(5)
  4. x == y は true
  5. true === z は true(なぜなら、zは5であり、真理値を持っているからです)

結論

おめでとうございます!JavaScriptの演算子の優先順位を理解する最初のステップを踏み出しました。練習が成功の鍵です。さまざまな演算子の組み合わせを試してみてください - これが概念を本当に理解する方法です。

そして、プロのヒント:疑問に思ったときは、括弧を使ってください!括弧は最も高い優先順位を持っており、コードを読みやすくします。例えば:

let result = (2 + 3) * 4 - 1;
console.log(result); // 出力: 19

このようにして、JavaScriptがどのように式を評価するかを明示的に伝えることができます。

codingを続け、学びを続け、最も重要な的是、楽しみましょう!JavaScriptは強力な言語であり、これらの基本を理解することで、プログラミングの旅における成功への道筋が開けます。

Credits: Image by storyset