DEV Community

Cover image for Understanding Statements vs. Expressions in JavaScript
WISDOMUDO
WISDOMUDO

Posted on

Understanding Statements vs. Expressions in JavaScript

When you're learning JavaScript, one of the most common sources of confusion is the difference between statements and expressions. They look similar, but they behave very differently, and knowing which is which can help you write better, more predictable code.

This article will define statements and expressions, explain their differences, and explain why it's so important for novice and intermediate developers to know the difference.

Here’s what we’ll cover:

  • What is a statement in JavaScript?
  • What is an expression in JavaScript?
  • Key differences between statements and expressions
  • Types of expressions in JavaScript
  • Common mistakes beginners make

What Is a Statement in JavaScript?

A statement in programming is like a complete sentence in English; it instructs the computer to perform a specific action.

Definition:
A statement is a single line of code that tells the JavaScript engine to do something, such as declare a variable, assign a value, or run a function.

Characteristics of Statements:

  • They cause actions (e.g., assign a value, call a function, control flow).
  • They do not always return a value.
  • Most statements end with a semicolon (;).
  • They serve as the logic's building blocks.

Examples of Statements:

let name = "Wisdom";      // Declaration + assignment statement
console.log(name);       // Function call statement
if (name) {              // Control flow statement
alert("Hello, " + name);
}
Enter fullscreen mode Exit fullscreen mode

Remark: "Each line above acts; directs JavaScript to do something, which makes them statements."

What Is an Expression in JavaScript?

An expression is any valid unit of code that evaluates to a value. Expressions are often embedded within statements.

Definition:
An expression is a combination of values, variables, operators, or function calls that JavaScript evaluates to produce a result.

Characteristics of Expressions:

  • They return a value.
  • They can be used inside statements.
  • In addition to other things, they are utilized in assignments, conditions, and function arguments.

Examples of Expressions:

5 + 4   // Evaluates to 9 (arithmetic expression)
Enter fullscreen mode Exit fullscreen mode
5 + 3     // Evaluates to 8 (arithmetic expression)
"Hi" + " " + "there"     // Evaluates to "Hi there" (string expression)

Math.max(10, 20)     // Evaluates to 20 (function call expression)
isLoggedIn && isAdmin   // Evaluates to true/false (logical expression)

Enter fullscreen mode Exit fullscreen mode

Remark: “These expressions all return values, which can be assigned to variables, logged to the console, or passed as arguments.”

Statements vs. Expressions: Key Differences

Here’s a quick side-by-side comparison to help you distinguish between the two:

Aspect Statement Expression
Purpose Instructs the program to act Computes and returns a value
Produces a value? Not always Always
Ends with a semicolon? Usually Not required
Example let x = 11; 10 + 9

JavaScript Expression Types

JavaScript supports various types of expressions. Let’s explore a few common ones:

1. Arithmetic Expressions

Used to perform mathematical operations.

let total = 5 * (2 + 3); // Evaluates to 25

Enter fullscreen mode Exit fullscreen mode

2. String Expressions

Used to manipulate and produce text strings.

let fullName = "Wisdom" + " " + "Udo"; // Evaluates to "Wisdom Udo"

Enter fullscreen mode Exit fullscreen mode

3. Logical Expressions

Return boolean values (true or false) using logical operators.

let isEligible = age > 18 && hasID; // true or false
Enter fullscreen mode Exit fullscreen mode

4. Object Expressions

Evaluate to objects.

let user = {
name: "Wisdom",
age: 25
}; // Object expression
Enter fullscreen mode Exit fullscreen mode

Common mistakes beginners make

Using a statement where a value is expected:

let x = if (true) { 1 }; // Invalid - 'if' is a statement, not a value
Enter fullscreen mode Exit fullscreen mode

Thinking all lines that include operators are expressions:

let a = 2; //  Assignment is a statement
a + 5;     //  This is an expression (but it doesn’t do anything alone)
Enter fullscreen mode Exit fullscreen mode

Conclusion

Writing JavaScript code that functions as intended requires an understanding of the distinction between statements and expressions.

  • Statements tell the program what to do.
  • Expressions return values that you can use in those instructions.

As you continue coding, try to recognize whether you're writing a statement, an expression, or a mix of both. Your code will become more powerful, cleaner, and easier to debug as a result of this insight.

You can reach out to me via LinkedIn

Top comments (0)