Operator precedence in JavaScript
Operator precedence refers to the priority given to operators while parsing a statement that has more than one operator performing operations in it. It is important to ensure the correct result and also to help the compiler understand what the order of operations should be. Operators with higher priorities are resolved first. But as one goes down the list, the priority decreases and hence their resolution.
Precedence and Associativity: Associativity in general states that irrespective of the order of operands for a given operation the result remains the same. Precedence is used to tell the compiler what operations should be performed first. For example, consider three numbers 2, 3, and 4. Now consider two operations:
( 2 + 3 ) + 4 = 2 + ( 3 + 4 ) ( 2 >= 3 ) or ( 1 != 4 )
The first operation is associativity where the order does not matter. The second case is precedence, where in order to reach the desired result there has to be a proper order in which operations will be performed.
Associativity is not a singular concept while dealing with precedence operations has to be dealt either with left-to-right or right-to-left associativity. This completely depends on the operation and tells the parser from which direction the operation should start.
// left-to-right associativity : division 3/4
// right-to-left associativity : assignment a = 3
Operator Precedence Table: The operator precedence table can help one know the precedence of an operator relative to other operators. As one goes down the table, the precedence of these operators decreases over each other, that is, the priority of an operator is lower than the operators above it and higher than the ones below it. The operators in the same row have the same priority.
In this table, 1 is the highest precedence and 19 is the lowest precedence.
Precedence | Operator | Description | Associativity | Example |
---|---|---|---|---|
1 | () | Grouping | – | (1+2) |
2 | . | Member | left to right | obj.function |
[] | Member | left to right | obj[“func”] | |
new | Create | – | new Date() | |
() | Function call | left to right | func() | |
3 | ++ | Postfix increment | – | i++ |
— | Postfix decrement | – | i– | |
4 | ++ | Prefix increment | right to left | ++i |
— | Prefix decrement | –i | ||
! | Logical NOT | !TRUE | ||
typeof | Type | typeof a | ||
5 | ** | Exponentiation | right to left | 4**2 |
6 | * | Multiplication | left to right | 2*3 |
/ | Division | 18/9 | ||
% | Remainder | 4%2 | ||
7 | + | Addition | left to right | 2+4 |
– | Subtraction | 4-2 | ||
8 | Left shift | left to right | y | |
>> | Right shift | y>>2 | ||
>>> | Unsigned Right shift | y>>>2 | ||
9 | Less than | left to right | 3 | |
Less than or equal | 3 | |||
> | Greater than | 4>3 | ||
>= | Greater than or equal | 4>=3 | ||
in | In | “PI” in MATH | ||
instanceof | Instance of | A instanceof B | ||
10 | == | Equality | left to right | x==y |
!= | Inequality | x!=y | ||
=== | Strictly equal | x===y | ||
!== | Strictly unequal | x!==y | ||
11 | & | Bitwise AND | left to right | x&y |
12 | ^ | Bitwise XOR | left to right | x^y |
13 | | | Bitwise OR | left to right | x|y |
14 | && | Logical AND | left to right | x&&y |
15 | || | Logical OR | left to right | x||y |
16 | ? : | Conditional | right to left | (x>y)?x:y |
17 | Assignment | right to left | x=5 | |
+= | x+=3 | |||
-= | x-=3 | |||
*= | x*=3 | |||
/= | x/=3 | |||
%= | x%=3 | |||
< | x | |||
>>= | x>>=2 | |||
>>>= | x>>>=2 | |||
&= | x&=y | |||
^= | x^=y | |||
|= | x|=y | |||
18 | yield | Pause function | right to left | yield x |
19 | , | Comma | left to right | x,y |
Приоритет операторов
Приоритет операторов определяет порядок, в котором операторы выполняются. Операторы с более высоким приоритетом выполняются первыми.
Интерактивный пример
Ассоциативность
Ассоциативность определяет порядок, в котором обрабатываются операторы с одинаковым приоритетом. Например, рассмотрим выражение:
Левая ассоциативность (слева направо) означает, что оно обрабатывается как (a OP b) OP c , в то время как правая ассоциативность (справа налево) означает, что они интерпретируются как a OP (b OP c) . Операторы присваивания являются право-ассоциативными, так что вы можете написать:
с ожидаемым результатом, что a и b будут равны 5. Это происходит, потому что оператор присваивания возвращает тот результат, который присваивает. Сначала b становится равным 5, затем a принимает значение b .
Примеры
3 > 2 && 2 > 1 // вернёт true 3 > 2 > 1 // вернёт false, потому что 3 > 2 возвращает true, в свою очередь true > 1 вернёт false // Добавление скобок значительно повышает читаемость выражения: (3 > 2) > 1
Таблица
Операторы упорядочены с самого высокого (19) до самого низкого (1) приоритета.
Обратите внимание, что spread-оператор ( . ) намеренно не включен в таблицу, потому что он вообще не является оператором и правильно говорить spread-синтаксис . Подробнее можно почитать в ответе на Stack Overflow (en).
Приоритет | Тип оператора | Ассоциативность | Конкретные операторы |
---|---|---|---|
19 | Группировка | не определено | ( … ) |
18 | Доступ к свойствам | слева направо | … . … |
Доступ к свойствам с возможностью вычисления | … [ … ] | ||
new (со списком аргументов) | не определено | new … ( … ) | |
Вызов функции | слева направо | … ( … ) | |
Оператор опциональной последовательности (?.) | ?. | ||
17 | new (без списка аргументов) | справа налево | new … |
16 | Постфиксный инкремент (en-US) | не определено | … ++ |
Постфиксный декремент (en-US) | … — | ||
15 | Логическое отрицание (!) (en-US) | справа налево | ! … |
Побитовое отрицание (~) (en-US) | ~ … | ||
Унарный плюс (en-US) | + … | ||
Унарный минус (en-US) | — … | ||
Префиксный инкремент (en-US) | ++ … | ||
Префиксный декремент (en-US) | — … | ||
typeof | typeof … | ||
void | void … | ||
delete | delete … | ||
await | await … | ||
14 | Возведение в степень (**) (en-US) | справа налево | … ** … |
13 | Умножение (*) (en-US) | слева направо | … * … |
Деление (/) (en-US) | … / … | ||
Остаток от деления (%) (en-US) | … % … | ||
12 | Сложение (+) (en-US) | слева направо | … + … |
Вычитание (-) (en-US) | … — … | ||
11 | Побитовый сдвиг влево (<<) | слева направо | … |
Побитовый сдвиг вправо (>>) (en-US) | … >> … | ||
Сдвиг вправо с заполнением нулей (>>>) (en-US) | … >>> … | ||
10 | Меньше (<) (en-US) | слева направо | … < … |
Меньше или равно (<=) (en-US) | … | ||
Больше (>) (en-US) | … > … | ||
Больше или равно (>=) (en-US) | … >= … | ||
in | … in … | ||
instanceof | … instanceof … | ||
9 | Равенство (==) (en-US) | слева направо | … == … |
Неравенство (!=) (en-US) | … != … | ||
Строгое равенство (===) (en-US) | … === … | ||
Строгое неравенство (!==) (en-US) | … !== … | ||
8 | Побитовое «И» (&) (en-US) | слева направо | … & … |
7 | Побитовое исключающее «ИЛИ» (^) (en-US) | слева направо | … ^ … |
6 | Побитовое «ИЛИ» (|) (en-US) | слева направо | … | … |
5 | Логическое «И» (&&) (en-US) | слева направо | … && … |
4 | Логическое «ИЛИ» (||) (en-US) | слева направо | … || … |
Оператор нулевого слияния (??) | … ?? … | ||
3 | Условный (тернарный) оператор | справа налево | … ? … : … |
2 | Присваивание (en-US) | справа налево | … = … |
… += … | |||
… -= … | |||
… **= … | |||
… *= … | |||
… /= … | |||
… %= … | |||
… < | |||
… >>= … | |||
… >>>= … | |||
… &= … | |||
… ^= … | |||
… |= … | |||
… &&= … | |||
… ||= … | |||
… ??= … | |||
yield | справа налево | yield … | |
yield* | yield* … | ||
1 | Запятая / Последовательность | слева направо | … , … |
Found a content problem with this page?
This page was last modified on 19 июл. 2023 г. by MDN contributors.
JavaScript Operator Precedence
Operator precedence describes the order in which operations are performed in an arithmetic expression.
Multiplication ( * ) and division ( / ) have higher precedence than addition ( + ) and subtraction ( — ).
As in traditional mathematics, multiplication is done first:
When using parentheses, operations inside the parentheses are computed first:
Operations with the same precedence (like * and /) are computed from left to right:
Operator Precedence Values
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.