Expressions in JavaScript

Expressions in JavaScript are combinations of values, operators, and variables (we will discuss variables in the next section) that produce a result.

Expressions can be simple or complex, but they all evaluate to a single value.

There are a few types of expressions:

1. Arithmetic Expressions
2. String Expressions
3. Logical Expressions
4. Comparison Expressions

Let's look at each in more detail:

Arithmetic Expressions

Arithmetic expressions use arithmetic operators to perform calculations and return a numeric result.

Examples:

3 + 4  // 7
10 - 2  // 8
5 * 6  // 30
12 / 4  // 3
9 % 2  // 1

String Expressions

String expressions combine strings into a new string using the concatenation operator (+).

Examples:

'Hello, ' + 'World!'  // 'Hello, World!'
'JavaScript ' + 'is fun!'  // 'JavaScript is fun!'

Logical Expressions

Logical expressions use logical operators to combine or invert boolean values, producing a boolean result.

Examples:

true && false  // false
true || false  // true
!true  // false

Comparison Expressions

Comparison expressions use operators to compare two values and return a boolean result.

Examples:

5 == '5'  // true
5 === '5'  // false
8 != 10  // true
6 !== '6'  // true
7 > 3  // true
4 > 9  // false
5 >= 5  // true
3 <= 4  // true
10 < 2  // false
5 !== 5  // false

Complex Expressions

The examples we just looked at were pretty straightforward, but expressions can also be nested or combined to create more complex evaluations.

Examples:

(3 + 4) * 2  // 14
10 / (2 + 3)  // 2
(5 > 3) && (8 < 10)  // true
'Hello, ' + 'World!' + ' It\'s ' + 2024  // 'Hello, World! It\'s 2024'

Evaluating Expressions

When JavaScript encounters an expression, it evaluates it to produce a value. This process is fundamental to how JavaScript executes code.

Order of Operations

JavaScript follows precedence and associativity rules to determine the order in which operations are performed in an expression. This order of operations is similar to the order used in mathematics.

Precedence Rules:

1. Parentheses () have the highest precedence and can force an expression to evaluate in the desired order.
2. Multiplication *, Division /, and Modulus % have the next highest precedence.
3. Addition + and Subtraction - have lower precedence than multiplication, division, and modulus.
4. Comparison Operators like >, <, >=, <=, ==, ===, !=, and !== follow arithmetic operators.
5. Logical Operators: && (AND) has higher precedence than || (OR).
6. Assignment Operators (covered later) have the lowest precedence.

Let's look at some examples to solidify your understanding:

Simple Expression:

5 + 3 * 2  // 11

Here, multiplication has a higher precedence than addition. So, 3 * 2 is evaluated first, resulting in 6. Then, 5 + 6 is evaluated, resulting in 11.

Using Parentheses to Control Order:

(5 + 3) * 2  // 16

Parentheses have the highest precedence, so the expression inside the parentheses is evaluated first. 5 + 3 results in 8. Then, 8 * 2 is evaluated, resulting in 16.

Combining Different Operators:

10 - 2 * 3 + 4  // 8

Multiplication is evaluated first: 2 * 3 results in 6. Then, 10 - 6 results in 4. Finally, 4 + 4 results in 8.

Complex Expression with Parentheses:

(10 - 2) * (3 + 4)  // 56

The expressions inside the parentheses are evaluated first. 10 - 2 results in 8, and 3 + 4 results in 7. Then, 8 * 7 is evaluated, resulting in 56.

Now let's look at logical expression:

Logical Expression:

true || false && false  // true

The && operator has higher precedence than ||, so false && false is evaluated first, resulting in false. Then, true || false is evaluated, resulting in true.

Comparison Expression:

5 > 3 && 8 < 10  // true

Each comparison is evaluated first: 5 > 3 results in true and 8 < 10 results in true. Then, true && true is evaluated, resulting in true.

Quick tip: Remembering all of these rules is difficult. So, instead of fighting against your memory, I find parentheses are the most effective way to control the order of evaluation in complex expressions, as you don't have to think so much about the order of operations. Parentheses can override the default precedence rules and ensure that certain parts of an expression are evaluated first.

Example:

3 + 4 * 2  // 11
(3 + 4) * 2  // 14

Understanding how expressions are evaluated is fundamental to writing correct and efficient JavaScript code. By mastering the order of operations and using parentheses, you can control how expressions are processed and ensure accurate results.

Take your time and play around with some examples in the console to ensure you understand expressions before moving ahead.

Next, we will explore declaring and assigning variables, allowing us to store and manipulate values more effectively.