What is the Difference Between Expressions and Statements in JavaScript?

As someone diving deeper into JavaScript, I recently stumbled upon an interesting concept that’s been both enlightening and confusing: expressions vs. statements. At first, it seemed like one of those technical details that didn’t really matter—but once I understood it, it felt like unlocking a hidden level in my coding journey.

So, here’s my attempt to explain what I’ve learned about expressions and statements, in the simplest way possible, from one learner to another!

The Simple Start: Understanding the Basics

Let’s begin with something basic:

const x = 5;

Here, I created a constant x and gave it the value of 5. Easy, right?

Now look at this line:

const y = getAnswer();

Even though getAnswer() might be a complex function with hundreds of lines of code, it still boils down to the same thing as x = 5—it resolves to a value. And this was my first "aha" moment: in JavaScript, expressions are anything that evaluates to a value, whether simple or complex.

What Exactly is an Expression?

An expression is any snippet of code that evaluates to a value. A single number, like 5, is an expression because it’s already a value. But a more complex operation like 2 + 3 is also an expression—it gets evaluated to 5.

Here are some examples of expressions:

12             // Evaluates to 12.
7 + 5          // Evaluates to 12.
Math.sqrt(16)  // Evaluates to 4.
"Hello" + " World"  // Evaluates to "Hello World".

In all of these cases, the code produces a value after being evaluated, and that’s what makes it an expression.

What’s a Statement, Then?

While expressions are about producing values, statements are about performing actions. Think of statements as the instructions or commands in your code that tell JavaScript what to do.

For example, control flow structures like if conditions, for loops, and while loops are statements because they make things happen, but they don’t return values by themselves.

if (x > 10) {
  console.log("x is greater than 10");
}

This if statement checks whether x is greater than 10. If the condition is true, it runs the code inside the block. But it doesn’t resolve to a value on its own.

Why Does This Difference Matter?

At first, I thought the difference between expressions and statements was just a technicality. But as I learned more, I realized it actually affects how I write my code. Here’s why:

• You can’t use statements where expressions are expected. For example, you can’t pass an if statement as a function argument because the function expects a value, not an action.

  const result = if (x > 10) { ... } // This will cause an error!

However, you can pass an expression, because it evaluates to a value:

  const result = x > 10 ? "Yes" : "No";  // The ternary operator is an expression!

In this case, the ternary operator evaluates to either "Yes" or "No", which is a value that can be assigned to the result variable.

Expressions Inside Expressions: A Cool Trick

One thing I found fascinating is that JavaScript allows you to nest expressions inside other expressions. JavaScript will evaluate them one by one, and the final result will be a single value.

Here’s an example:

const result = Math.sqrt(2 + 7);
// First, 2 + 7 evaluates to 9.
// Then, Math.sqrt(9) evaluates to 3.

Even though there are two expressions here, JavaScript resolves them both to return the final value, 3.

Expressions vs. Statements: A Quick Breakdown

To help summarize, here’s a comparison:

• Expressions:

  • Always evaluate to a value.
  • Can be used wherever JavaScript expects a value, like in function arguments or assignments.
  • Can be simple (like 5) or complex (like Math.sqrt(4)).

• Statements:

  • Perform actions or control the flow of the program.
  • Don’t evaluate to a value themselves.
  • Examples include if conditions, loops, and declarations.

Why Should You Care About This Distinction?

Knowing the difference between expressions and statements can help you write better, more efficient code. Understanding when JavaScript expects a value (an expression) versus when it needs an instruction (a statement) can save you from confusing errors and make your code cleaner.

For instance, trying to assign an if statement to a variable will throw an error because an if statement doesn’t produce a value. But assigning a ternary expression to a variable works because it evaluates to a value.

Wrapping Up: Seeing the Code Differently

Learning the difference between expressions and statements helped me see how JavaScript operates under the hood. Expressions are the building blocks of values in your code, while statements tell the program what to do.

Once you grasp this, you’ll start recognizing why some parts of your code work the way they do—and why certain things (like assigning an if statement to a variable) simply don’t work.

If you’re just starting to explore this distinction, don’t worry—it took me some time to get my head around it too! But once it clicks, you’ll notice your code becoming more intuitive.

Happy coding!