Operator Precedence in JavaScript

TL ; DR:

When we string operations together, JavaScript must know which one to do first. This is called operator precedence.
* and / are performed before + and -:

console.log(1 + 2 * 3); // Prints 7
console.log(6 - 4 / 2); // Prints 4
console.log(5 * 4 - 2 / 2); // Prints 19

We can add () to force an operation to be performed first:

console.log((1 + 2) * 3); // Prints 9
console.log((6 - 4) / 2); // Prints 1
console.log(5 * (4 - 2) / 2); // Prints 5

Full lesson:

When we string operations together, JavaScript must know which one to do first. This is called operator precedence.

This is the hierarchy from highest precedence to lowest precedence:

Parentheses are always respected
Exponentiation (raise to a power)
Multiplication, Division and Remainder
Addition and Subtraction
Left to right

First example:

console.log(1 + 2 * 3); // Output: 7

Multiplication is executed before addition, so:

1 + 2 * 3 = 1 + 6 = 7

Second example:

console.log((1 + 2) * 3); // Output: 9

What's inside parentheses is executed before multiplication, so:

(1 + 2) * 3 = 3 * 3 = 9

Third example:

console.log(6 / 4 * 3 + 5); // Output: 9.5

Multiplication and division come before addition. Also, multiplication and division have the same priorty so they are executed from left to right:

6 / 4 * 3 + 5 = 1.5 * 3 + 5 = 4.5 + 5 = 9.5

Forth example:

console.log(6 / ((4 + 2) / 3)); // Output: 3

Computer sees parentheses so it looks at it like this:

6 / ((4 + 2) / 3) = 6 / x, where x = (4 + 2) / 3

I have to compute x first. Parantheses are executed before division:
(4 + 2) / 3 = 6 / 3 = 2

I can replace x with 2:
6 / ((4 + 2) / 3) = 6 / 2 = 3

Assignment
Follow the Coding Tutorial and let's practice with operator precedence!

Hint
Look at the examples above if you get stuck.

Introduction

In JavaScript, when we string multiple operations together, the order in which these operations are executed is determined by operator precedence. Understanding operator precedence is crucial for writing accurate and bug-free code. This concept is particularly useful in scenarios involving complex mathematical calculations, logical operations, and when combining multiple expressions.

Understanding the Basics

Operator precedence defines the order in which different operations are performed in an expression. For example, in the expression 1 + 2 * 3, the multiplication is performed before the addition due to higher precedence of the multiplication operator.

Here are some basic rules:

* and / have higher precedence than + and -.
Parentheses () can be used to override the default precedence.

Let's look at a simple example:

console.log(1 + 2 * 3); // Prints 7

In this example, the multiplication is performed first, resulting in 1 + 6, which equals 7.

Main Concepts

JavaScript follows a specific hierarchy of operator precedence from highest to lowest:

Parentheses
Exponentiation
Multiplication, Division, and Remainder
Addition and Subtraction
Left to right

Understanding this hierarchy helps in predicting the outcome of complex expressions. For instance:

console.log(5 * 4 - 2 / 2); // Prints 19

Here, multiplication and division are performed before subtraction, resulting in 20 - 1, which equals 19.

Examples and Use Cases

Let's explore more examples to solidify our understanding:

console.log((1 + 2) * 3); // Prints 9
console.log((6 - 4) / 2); // Prints 1
console.log(5 * (4 - 2) / 2); // Prints 5

In these examples, parentheses are used to change the default precedence, ensuring that the operations inside the parentheses are performed first.

Common Pitfalls and Best Practices

Common mistakes include misunderstanding the order of operations and not using parentheses when needed. Here are some best practices:

Always use parentheses to make the order of operations explicit.
Break down complex expressions into simpler parts for better readability and maintainability.

Advanced Techniques

Advanced techniques involve combining multiple operators and understanding their interactions. For example:

console.log(6 / 4 * 3 + 5); // Prints 9.5

Here, division and multiplication are performed first, followed by addition.

Code Implementation

Let's look at some well-commented code snippets demonstrating operator precedence:

// Example 1: Basic precedence
console.log(1 + 2 * 3); // Prints 7

// Example 2: Using parentheses to change precedence
console.log((1 + 2) * 3); // Prints 9

// Example 3: Combining multiple operators
console.log(6 / 4 * 3 + 5); // Prints 9.5

// Example 4: Nested parentheses
console.log(6 / ((4 + 2) / 3)); // Prints 3

Debugging and Testing

Debugging expressions involving multiple operators can be tricky. Here are some tips:

Use console.log() to print intermediate results.
Break down complex expressions into simpler parts and test each part separately.

For testing, consider writing unit tests for functions that involve complex expressions:

// Example test case
function calculateExpression() {
  return 1 + 2 * 3;
}

console.assert(calculateExpression() === 7, 'Test failed: 1 + 2 * 3 should equal 7');

Thinking and Problem-Solving Tips

When approaching problems involving operator precedence:

Break down the problem into smaller parts.
Use parentheses to make the order of operations explicit.
Practice with different expressions to build a strong understanding.

Conclusion

Understanding operator precedence is essential for writing accurate and efficient JavaScript code. By mastering this concept, you can avoid common pitfalls and write more readable and maintainable code. Keep practicing and exploring different expressions to strengthen your understanding.

Additional Resources

For further reading and practice, consider the following resources: