Statements VS Expressions with JavaScript

#javascript #webdev #programming #tutorial

When we encounter JavaScript, you'll often dive into the terms "statements" and "expressions." While they may seem interchangeable at first glance, understanding their differences is crucial to mastering the language.

In this blog post, I'll break down the concepts with examples, explain their traits and roles in JavaScript, and show you how to use them effectively in your code. By the end, you should have a solid grasp of how to use them in your projects.

Expressions

An expression is a piece of code that produces a value. For example, 2 + 2 is an expression that produces the value 4. Expressions can be as simple as a single value or as complex as a function call that returns a value.

5 + 4; // This evaluates to the value 9
"Hello, " + "World"; // This evaluates to the string "Hello, World"
x[1, 2, 3]; // This evaluates to the value of the variable x
[1, 2, 3].pop(); // This evaluates to the number 3

Expressions can be used as part of a statement, such as assigning the result of an expression to a variable or using an expression as a condition in an if statement.

Key Traits of an Expression:

Produces a value when evaluated.
Can be used wherever a value is expected, such as a function argument or an assignment.
Can be combined with other expressions using operators to form more complex expressions.

For example:

let sum = 5 + 4; // The expression `5 + 4` produces the value 9, which is assigned to `sum`
if (sum > 5) {
  console.log("Sum is greater than 5"); // The expression `sum > 5` evaluates to `true`
}

Statements

A statement is a piece of code that performs an action or controls the flow of the program. Unlike expressions, statements do not produce values directly, although they may contain expressions.

let x = 5; // Variable declaration and assignment
console.log("Hiiii"); // Function call statement
if (x == 3) { ... } // Conditional statement
for (let i = 0; i < 10; i++) { ... } // Loop statement

Statements are typically terminated with a semicolon (;). However, in JavaScript, semicolons can often be omitted depending on your code style and configuration.

Key traits of statements:

Perform actions or control the flow of a program.
Often composed of expressions, but do not necessarily produce a value themselves.
Structure the program and determine its execution flow.

Differences Between Expressions and Statements

The main difference between expressions and statements is that:

Expressions produce a value.
Statements perform actions or control the program flow.

Despite these differences, there is a relationship between expressions and statements. Expressions can be used as parts of statements, and some statements can contain expressions.

Examples:

let x = 5 + 3; // The expression "5 + 3" is part of the assignment statement.
if (x > 10) { 
  // The expression "x > 10" is used as the condition in the if statement.
  console.log("x is greater than 10");
}