diff options
Diffstat (limited to 'files/vi/web/javascript/reference/operators/operator_precedence')
| -rw-r--r-- | files/vi/web/javascript/reference/operators/operator_precedence/index.html | 477 |
1 files changed, 477 insertions, 0 deletions
diff --git a/files/vi/web/javascript/reference/operators/operator_precedence/index.html b/files/vi/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..efa25029b2 --- /dev/null +++ b/files/vi/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,477 @@ +--- +title: Operator precedence +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div><font><font>{{jsSidebar ("Toán tử")}}</font></font></div> + +<p><strong><font><font>Mức độ ưu tiên của toán tử</font></font></strong><font><font> xác định cách các toán tử được phân tích cú pháp liên quan đến nhau. </font><font>Các toán tử có mức độ ưu tiên cao hơn trở thành toán hạng của các toán tử có mức độ ưu tiên thấp hơn.</font></font></p> + +<div><font><font>{{EmbedInteractiveExample ("pages / js / expression-operatorprecedence.html")}}</font></font></div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Precedence_And_Associativity">Precedence And Associativity</h2> + +<p>Consider an expression describable by the representation below. Note that both OP<sub>1</sub> and OP<sub>2</sub> are fill-in-the-blanks for OPerators.</p> + +<pre class="syntaxbox notranslate">a OP<sub>1</sub> b OP<sub>2</sub> c</pre> + +<p>If <code>OP<sub>1</sub></code> and <code>OP<sub>2</sub></code> have different precedence levels (see the table below), the operator with the highest precedence goes first and associativity does not matter. Observe how multiplication has higher precedence than addition and executed first, even though addition is written first in the code.</p> + +<pre class="brush: js notranslate">console.log(3 + 10 * 2); // logs 23 +console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous +console.log((3 + 10) * 2); // logs 26 because the parentheses change the order +</pre> + +<p>Left-associativity (left-to-right) means that it is processed as <code>(a OP<sub>1</sub> b) OP<sub>2</sub> c</code>, while right-associativity (right-to-left) means it is interpreted as <code>a OP<sub>1</sub> (b OP<sub>2</sub> c)</code>. Assignment operators are right-associative, so you can write:</p> + +<pre class="brush: js notranslate">a = b = 5; // same as writing a = (b = 5); +</pre> + +<p>with the expected result that <code>a</code> and <code>b</code> get the value 5. This is because the assignment operator returns the value that is assigned. First, <code>b</code> is set to 5. Then the <code>a</code> is also set to 5, the return value of <code>b = 5</code>, aka right operand of the assignment.</p> + +<p>As another example, the unique exponentiation operator has right-associativity, whereas other arithmetic operators have left-associativity. It is interesting to note that, the order of evaluation is always left-to-right irregardless of associativity.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>Code</td> + <td>Output</td> + </tr> + <tr> + <td> + <pre class="brush: js notranslate"> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the division operator (/) +console.log(echo("left", 6) / echo("right", 2)); +</pre> + </td> + <td> + <pre class="notranslate"> +Evaluating the left side +Evaluating the right side +3 +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js notranslate"> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the exponentiation operator (**) +console.log(echo("left", 2) ** echo("right", 3));</pre> + </td> + <td> + <pre class="notranslate"> +Evaluating the left side +Evaluating the right side +8</pre> + </td> + </tr> + </tbody> +</table> + +<p>The difference in associativity comes into play when there are multiple operators of the same precedence. With only one operator or operators of different precedences, associativity doesn't affect the output, as seen in the example above. In the example below, observe how associativity affects the output when multiple of the same operator are used.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>Code</td> + <td>Output</td> + </tr> + <tr> + <td> + <pre class="brush: js notranslate"> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the division operator (/) +console.log(echo("left", 6) / echo("middle", 2) / echo("right", 3)); +</pre> + </td> + <td> + <pre class="notranslate"> +Evaluating the left side +Evaluating the middle side +Evaluating the right side +1 +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js notranslate"> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the exponentiation operator (**) +console.log(echo("left", 2) ** echo("middle", 3) ** echo("right", 2)); +</pre> + </td> + <td> + <pre class="notranslate"> +Evaluating the left side +Evaluating the middle side +Evaluating the right side +512 +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js notranslate"> +function echo(name, num) { + console.log("Evaluating the " + name + " side"); + return num; +} +// Notice the parentheses around the left and middle exponentiation +console.log((echo("left", 2) ** echo("middle", 3)) ** echo("right", 2));</pre> + </td> + <td> + <pre class="notranslate"> +Evaluating the left side +Evaluating the middle side +Evaluating the right side +64</pre> + </td> + </tr> + </tbody> +</table> + +<p>Looking at the code snippets above, <code>6 / 3 / 2</code> is the same as <code>(6 / 3) / 2</code> because division is left-associative. Exponentiation, on the other hand, is right-associative, so <code>2 ** 3 ** 2</code> is the same as <code>2 ** (3 ** 2)</code>. Thus, doing <code>(2 ** 3) ** 2</code> changes the order and results in the 64 seen in the table above.</p> + +<p>Remember that precedence comes before associativity. So, mixing division and exponentiation, the exponentiation comes before the division. For example, <code>2 ** 3 / 3 ** 2</code> results in 0.8888888888888888 because it is the same as <code>(2 ** 3) / (3 ** 2)</code>.</p> + +<h3 id="Note_on_grouping_and_short-circuiting">Note on grouping and short-circuiting</h3> + +<p>In the table below, <strong>Grouping</strong> is listed as having the highest precedence. However, that does not always mean the expression within the grouping symbols <code>( … )</code> is evaluated first, especially when it comes to short-circuiting.</p> + +<p>Short-circuiting is jargon for conditional evaluation. For example, in the expression <code>a && (b + c)</code>, if <code>a</code> is {{Glossary("falsy")}}, then the sub-expression <code>(b + c)</code> will not even get evaluated, even if it is in parentheses. We could say that the logical disjunction operator ("OR") is "short-circuited". Along with logical disjunction, other short-circuited operators include logical conjunction ("AND"), nullish-coalescing, optional chaining, and the conditional operator. Some more examples follow.</p> + +<pre class="brush: js notranslate">a || (b * c); // evaluate `a` first, then produce `a` if `a` is "truthy" +a && (b < c); // evaluate `a` first, then produce `a` if `a` is "falsy" +a ?? (b || c); // evaluate `a` first, then produce `a` if `a` is not `null` and not `undefined` +a?.b.c; // evaluate `a` first, then produce `undefined` if `a` is `null` or `undefined` +</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js notranslate">3 > 2 && 2 > 1 +// returns true + +3 > 2 > 1 +// Returns false because 3 > 2 is true, then true is converted to 1 +// in inequality operators, therefore true > 1 becomes 1 > 1, which +// is false. Adding parentheses makes things clear: (3 > 2) > 1. +</pre> + +<h2 id="Table">Table</h2> + +<p>The following table is ordered from highest (21) to lowest (1) precedence.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Precedence</th> + <th>Operator type</th> + <th>Associativity</th> + <th>Individual operators</th> + </tr> + <tr> + <td>21</td> + <td>{{jsxref("Operators/Grouping", "Grouping", "", 1)}}</td> + <td>n/a</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td colspan="1" rowspan="5">20</td> + <td>{{jsxref("Operators/Property_Accessors", "Member Access", "#Dot_notation", 1)}}</td> + <td>left-to-right</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Property_Accessors", "Computed Member Access","#Bracket_notation", 1)}}</td> + <td>left-to-right</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/new","new")}} (with argument list)</td> + <td>n/a</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Function Call</a></td> + <td>left-to-right</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining</a></td> + <td>left-to-right</td> + <td><code>?.</code></td> + </tr> + <tr> + <td rowspan="1">19</td> + <td>{{jsxref("Operators/new","new")}} (without argument list)</td> + <td>right-to-left</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">18</td> + <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Increment","#Increment", 1)}}</td> + <td colspan="1" rowspan="2">n/a</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Decrement","#Decrement", 1)}}</td> + <td><code>… --</code></td> + </tr> + <tr> + <td colspan="1" rowspan="10">17</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Logical NOT</a></td> + <td colspan="1" rowspan="10">right-to-left</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Bitwise NOT</a></td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Unary Plus</a></td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Unary Negation</a></td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Prefix Increment</a></td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Prefix Decrement</a></td> + <td><code>-- …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/typeof", "typeof")}}</td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/void", "void")}}</td> + <td><code>void …</code></td> + </tr> + <tr> + <td><font><font>{{jsxref ("Toán tử / xóa", "xóa")}}</font></font></td> + <td><code>delete …</code></td> + </tr> + <tr> + <td><font><font>{{jsxref ("Toán tử / await", "await")}}</font></font></td> + <td><code>await …</code></td> + </tr> + <tr> + <td><font><font>16</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation"><font><font>Luỹ thừa</font></font></a></td> + <td><font><font>phải sang trái</font></font></td> + <td><code>… ** …</code></td> + </tr> + <tr> + <td rowspan="3"><font><font>15</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication"><font><font>Phép nhân</font></font></a></td> + <td colspan="1" rowspan="3"><font><font>trái sang phải</font></font></td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division"><font><font>Sư đoàn</font></font></a></td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder"><font><font>Phần còn lại</font></font></a></td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2"><font><font>14</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition"><font><font>Thêm vào</font></font></a></td> + <td colspan="1" rowspan="2"><font><font>trái sang phải</font></font></td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction"><font><font>Phép trừ</font></font></a></td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3"><font><font>13</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators"><font><font>Dịch chuyển sang trái theo chiều bit</font></font></a></td> + <td colspan="1" rowspan="3"><font><font>trái sang phải</font></font></td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators"><font><font>Chuyển sang phải theo chiều bit</font></font></a></td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators"><font><font>Chuyển sang phải không dấu bit</font></font></a></td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6"><font><font>12</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator"><font><font>Ít hơn</font></font></a></td> + <td colspan="1" rowspan="6"><font><font>trái sang phải</font></font></td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator"><font><font>Nhỏ hơn hoặc bằng</font></font></a></td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator"><font><font>Lớn hơn</font></font></a></td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator"><font><font>Lớn hơn hoặc bằng</font></font></a></td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td><font><font>{{jsxref ("Toán tử / trong", "trong")}}</font></font></td> + <td><code>… in …</code></td> + </tr> + <tr> + <td><font><font>{{jsxref ("Toán tử / instanceof", "instanceof")}}</font></font></td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4"><font><font>11</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality"><font><font>Bình đẳng</font></font></a></td> + <td colspan="1" rowspan="4"><font><font>trái sang phải</font></font></td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality"><font><font>Bất bình đẳng</font></font></a></td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity"><font><font>Bình đẳng nghiêm ngặt</font></font></a></td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity"><font><font>Bất bình đẳng nghiêm ngặt</font></font></a></td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td><font><font>10</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND"><font><font>Bitwise VÀ</font></font></a></td> + <td><font><font>trái sang phải</font></font></td> + <td><code>… & …</code></td> + </tr> + <tr> + <td><font><font>9</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR"><font><font>Bitwise XOR</font></font></a></td> + <td><font><font>trái sang phải</font></font></td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td><font><font>số 8</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR"><font><font>Bitwise HOẶC</font></font></a></td> + <td><font><font>trái sang phải</font></font></td> + <td><code>… | …</code></td> + </tr> + <tr> + <td><font><font>7</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND"><font><font>Logic AND</font></font></a></td> + <td><font><font>trái sang phải</font></font></td> + <td><code>… && …</code></td> + </tr> + <tr> + <td><font><font>6</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR"><font><font>Logic HOẶC</font></font></a></td> + <td><font><font>trái sang phải</font></font></td> + <td><code>… || …</code></td> + </tr> + <tr> + <td><font><font>5</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator"><font><font>Nhà điều hành liên kết Nullish</font></font></a></td> + <td><font><font>trái sang phải</font></font></td> + <td><code>… ?? …</code></td> + </tr> + <tr> + <td><font><font>4</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator"><font><font>Có điều kiện</font></font></a></td> + <td><font><font>phải sang trái</font></font></td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="16"><font><font>3</font></font></td> + <td rowspan="16"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators"><font><font>Chuyển nhượng</font></font></a></td> + <td rowspan="16"><font><font>phải sang trái</font></font></td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… **= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td><code>… &&= …</code></td> + </tr> + <tr> + <td><code>… ||= …</code></td> + </tr> + <tr> + <td><code>… ??= …</code></td> + </tr> + <tr> + <td rowspan="2"><font><font>2</font></font></td> + <td><font><font>{{jsxref ("Toán tử / lợi nhuận", "lợi nhuận")}}</font></font></td> + <td colspan="1" rowspan="2"><font><font>phải sang trái</font></font></td> + <td><code>yield …</code></td> + </tr> + <tr> + <td><font><font>{{jsxref ("Toán tử / lợi nhuận *", "lợi nhuận *")}}</font></font></td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td><font><font>1</font></font></td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator"><font><font>Dấu phẩy / Chuỗi</font></font></a></td> + <td><font><font>trái sang phải</font></font></td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> |