Operator Precedence In JavaScript
In JavaScript, operator precedence determines the order in which operators are evaluated in an expression.
Basics of Operator Precedence
In JavaScript, operators are symbols that perform operations on variables or values. Operator precedence defines the order in which these operations are carried out. It’s like a set of rules that determine which operation takes priority when multiple operators are used in an expression.
Arithmetic Operators
Arithmetic operators perform basic mathematical operations.
+(Addition)-(Subtraction)*(Multiplication)/(Division)
Example:
let result = 5 + 3 * 2; // Multiplication takes precedence, so result is 11
Comparison Operators
Comparison operators are used to compare values.
==(Equality)===(Strict Equality)!=(Inequality)!==(Strict Inequality)
Example:
let isEqual = 5 === '5'; // Strict equality checks both value and type, result is false
Logical Operators
Logical operators perform logical operations.
&&(Logical AND)||(Logical OR)!(Logical NOT)
Example:
let isTrue = true && !false; // Logical AND and NOT operations, result is true
Assignment Operators and Precedence
= (Assignment)
The assignment operator is straightforward, but it’s crucial for understanding more complex assignments.
Example:
let x = 10; // Assigns the value 10 to variable x
Compound Assignment Operators
These combine arithmetic operations with assignment.
+=, -=, *=, /=, %=
Example:
let y = 5;
y += 3; // Equivalent to y = y + 3; (y is now 8)
Conditional (Ternary) Operator
?: (Conditional Operator)
A concise way to write an if-else statement.
Example:
let age = 20;
let status = (age >= 18) ? 'Adult' : 'Minor';
Bitwise Operators
Bitwise operators perform operations on binary representations of numbers.
&, |, ^, ~, <<, >>, >>>
Operator Precedence Table
Understanding the order in which operators are evaluated is crucial. Here’s a simplified table:
- Grouping
() - Member Access
.[]() - Postfix Increment/Decrement
++-- - Unary
+-!~typeofvoiddelete - Exponentiation
** - Multiplication/Division/Modulus
*/% - Addition/Subtraction
+- - Bitwise Shift
<<>>>>> - Relational
<<=>>=ininstanceof - Equality/Inequality
=====!=!== - Bitwise AND
& - Bitwise XOR
^ - Bitwise OR
| - Logical AND
&& - Logical OR
|| - Conditional
? : - Assignment
=+=-=*=/=%= - Comma
,
Advanced Techniques
Grouping () (Highest Precedence)
Parentheses are used to explicitly specify the order of evaluation.
Example:
let result = (2 + 3) * 2; // Parentheses take precedence, result is 10
Member Access ., [], () (Left-to-Right)
Accessing object properties, array elements, and calling functions come next.
Example:
let person = { name: 'John', age: 30 };
let nameLength = person.name.length; // Accessing object property and calling length
Postfix Increment/Decrement ++, --
Increment or decrement operations after a variable.
Example:
let count = 5;
let newCount = count++; // newCount is 5, count becomes 6
Unary +, -, !, ~, typeof, void, delete (Right-to-Left)
Unary operators perform operations on a single operand.
Example:
let num = -5;
let isTrue = !true;
Exponentiation ** (Right-to-Left)
Introduced in ES6, it raises the left operand to the power of the right operand.
Example:
let square = 2 ** 3; // 2 raised to the power of 3, result is 8
Multiplication/Division/Modulus *, /, %
Basic arithmetic operations.
Example:
let result = 5 * 3 / 2; // Multiplication takes precedence, result is 7.5
Addition/Subtraction +, -
More arithmetic operations.
Example:
let result = 10 + 5 - 3; // Addition takes precedence, result is 12
Bitwise Shift <<, >>, >>>
Shift bits left or right.
Example:
let shifted = 8 >> 1; // Right shift by 1, result is 4
Relational <, <=, >, >=, in, instanceof
Comparisons and type checks.
Example:
let isGreater = 10 > 5; // Greater than comparison, result is true
Equality/Inequality ==, ===, !=, !==
Equality checks and type-strict equality.
Example:
let isEqual = 5 === '5'; // Strict equality checks both value and type, result is false
Bitwise AND &
Bitwise AND operation.
Example:
let bitwiseResult = 5 & 3; // Bitwise AND, result is 1
Bitwise XOR ^
Bitwise XOR operation.
Example:
let xorResult = 5 ^ 3; // Bitwise XOR, result is 6
Bitwise OR |
Bitwise OR operation.
Example:
let orResult = 5 | 3; // Bitwise OR, result is 7
Logical AND &&
Logical AND operation.
Example:
let logicalAndResult = true && false; // Logical AND, result is false
Logical OR ||
Logical OR operation.
Example:
let logicalOrResult = true || false; // Logical OR, result is true
Comma , (Lowest Precedence)
Separates expressions, evaluated from left to right.
Example:
let result = (2 + 3, 5 * 2); // Uses the result of the last expression, result is 10
Chaining Operators
Understanding precedence helps in chaining multiple operators for concise expressions.
Example:
let result = 2 + 3 * 2 === 8 || (4 % 2) === 0; // Chaining operators for a complex condition
Overriding Precedence with Parentheses
Explicitly using parentheses to control the order of evaluation.
Example:
let result = (2 + 3) * 2; // Parentheses override default precedence
Operator precedence is a fundamental aspect of JavaScript that governs how expressions are evaluated. By mastering operator precedence, you gain the ability to Always refer to the operator precedence table when in doubt, and practice with various expressions to solidify your understanding. As you become more comfortable with these concepts, you'll navigate JavaScript expressions with ease. Happy coding and exploring the intricacies of operator precedence in JavaScript! Happy coding !❤️