JavaScript Operators and Precedence - CSU677 - Shoolini U

JavaScript Operators and its Precedence

2024, September 24

1. What are Operators?

In programming, an operator is a symbol or keyword that tells the compiler or interpreter to perform a specific operation on data. These operations can range from simple arithmetic (like addition or subtraction) to more complex tasks like comparing values, logical decisions, or manipulating data structures. Operators act on operands (which are the values or variables involved in the operation).

1.1 Why Do We Need Operators?

Operators are essential because they allow us to manipulate data and control the flow of execution in a program. Without operators, we would have no way to perform actions like:

1.2 Types of Operators in JavaScript

JavaScript provides a wide variety of operators that can be grouped into different categories based on their functionality:

1.3 What is Operator Precedence?

Operator precedence defines the order in which different operators in an expression are evaluated. When multiple operators appear in a single expression, precedence rules determine which operations are performed first. For example, in arithmetic, multiplication and division have higher precedence than addition and subtraction, meaning they are executed first.

1.3.1 Example of Operator Precedence

Consider the following expression: 


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

In this case, the multiplication * is evaluated before the addition + because multiplication has higher precedence. Thus, 2 * 3 is evaluated first, and then 5 + 6.

1.4 What is the Priority in Operator Precedence?

Each operator in JavaScript has a specific priority level, also known as its precedence. Operators with higher precedence are executed before operators with lower precedence. However, you can always use parentheses () to control the order of evaluation, ensuring that the parts of the expression you want to be executed first are evaluated first, regardless of the operator's default precedence.

1.4.1 Example of Changing Precedence with Parentheses

Consider this example: 


let result = (5 + 2) * 3;
console.log(result); // Output: 21

By using parentheses, we force the addition to be evaluated first, changing the default operator precedence.

Now that we understand the concept of operators and their precedence, let’s move to a more detailed explanation of operator precedence in JavaScript.

2. Operator Precedence in JavaScript

Operator precedence determines the order in which operators are evaluated in expressions. JavaScript follows a specific set of rules to decide which operators are executed first when an expression contains more than one operator.

2.1 What is Operator Precedence?

Operator precedence controls the evaluation order of operators. Higher precedence operators are evaluated before lower precedence ones. Parentheses () can be used to override this default precedence.

2.1.1 Basic Precedence Example

Consider the following example:


let result = 3 + 4 * 5;
console.log(result); // Output: 23

In this case, the multiplication * operator has higher precedence than the addition + operator, so 4 * 5 is evaluated first, and then 3 + 20.

2.2 Precedence Table

The following table lists common JavaScript operators from the highest to lowest precedence:

2.3 Associativity

Associativity defines how operators of the same precedence level are grouped in an expression. Operators can be either left-associative or right-associative:

2.3.1 Example: Left-Associative Operators

Consider addition:


let result = 5 - 2 + 3;
console.log(result); // Output: 6

Both - and + have the same precedence and are left-associative, so the expression is evaluated as (5 - 2) + 3.

2.3.2 Example: Right-Associative Operators

Consider exponentiation:


let result = 2 ** 3 ** 2;
console.log(result); // Output: 512

The ** operator is right-associative, so the expression is evaluated as 2 ** (3 ** 2), or 2 ** 9.

2.4 Operator Precedence and Parentheses

Parentheses can be used to change the default precedence order by grouping operations explicitly. This allows developers to override JavaScript's precedence rules.

2.4.1 Parentheses Example

Consider the following:


let result = (3 + 4) * 5;
console.log(result); // Output: 35

By using parentheses, we force 3 + 4 to be evaluated first, resulting in 7 * 5 instead of 3 + 20.

3. Complete List of JavaScript Operators

Below is a detailed table that includes all the JavaScript operators, categorized by type, with descriptions and examples. The table is responsive using Bootstrap classes to ensure it displays well on all screen sizes.

Operator Category Description Example
() Grouping Controls precedence by grouping expressions. (3 + 4) * 5
. Member Access Accesses a property or method of an object. object.property
[] Array Indexing Accesses an element in an array by its index. array[0]
++ Increment Increases a variable's value by 1. x++ or ++x
-- Decrement Decreases a variable's value by 1. x-- or --x
+ Addition / Concatenation Adds numbers or concatenates strings. 5 + 3 or 'a' + 'b'
- Subtraction Subtracts the second operand from the first. 8 - 5
* Multiplication Multiplies the operands. 4 * 5
/ Division Divides the first operand by the second. 20 / 5
% Modulus Returns the remainder of division. 10 % 3 // Output: 1
** Exponentiation Raises the first operand to the power of the second. 2 ** 3 // Output: 8
+= Addition Assignment Adds the right operand to the left operand and assigns the result. x += 5
- Subtraction Assignment Subtracts the right operand from the left and assigns the result. x -= 3
*= Multiplication Assignment Multiplies and assigns the result. x *= 4
/= Division Assignment Divides and assigns the result. x /= 2
%= Modulus Assignment Assigns the remainder of division. x %= 3
== Equality Checks if two values are equal after type conversion. 5 == '5'
=== Strict Equality Checks if two values are equal without type conversion. 5 === 5
!= Inequality Checks if two values are not equal after type conversion. 5 != '6'
!== Strict Inequality Checks if two values are not equal without type conversion. 5 !== '5'
< Less Than Checks if the first operand is less than the second. 3 < 5
> Greater Than Checks if the first operand is greater than the second. 5 > 3
<= Less Than or Equal Checks if the first operand is less than or equal to the second. 3 <= 5
>= Greater Than or Equal Checks if the first operand is greater than or equal to the second. 5 >= 3
&& Logical AND Returns true if both operands are true. true && false
|| Logical OR Returns true if at least one operand is true. true || false
! Logical NOT Negates a boolean value. !true // Output: false
?? Nullish Coalescing Returns the right operand if the left operand is null or undefined. null ?? 'default'
?: Conditional (Ternary) Evaluates a condition and returns one of two values. x > 5 ? 'Yes' : 'No'
typeof Type Operator Returns the type of a variable or value. typeof 5 // Output: 'number'
instanceof Instance Operator Checks if an object is an instance of a particular class. obj instanceof Array
delete Deletion Operator Removes a property from an object. delete obj.property
void Void Operator Returns undefined for an expression. void(0)
new Object Creation Creates a new instance of a class or constructor function. new Date()
in Property Check Checks if a property exists in an object. 'name' in obj
, Comma Operator Evaluates each of its operands and returns the last one. (a = 1, b = 2, a + b) // Output: 3