Expression? Statement? What’s the difference?



This content originally appeared on DEV Community and was authored by Janet Spellman

I went on a deep dive to figure out the nitty-gritty difference between an expression and statement. I figured I’d share my findings here so you don’t have to hunt for the answers 😉

Disclaimer: this is written with JavaScript in mind

Expression

Expression ==> code that is evaluated (aka it turns into a VALUE, thus e~VALU~ated)
a sandwich that is cut in half and wrapped in paper<br>

  • example: 2+2 evaluates into value of 4
  • metaphorical example: “grab 2 pieces of bread + add condiments and meat + add veggies” ==> value of “sandwich “
  • expressions can’t exist by themselves, expressions have to be wrapped up and carried in the strong arms of a statement 💪

Statement

Statement ==> the smallest piece of code that tells the computer to do something. Essentially it’s a full coding sentence
a dog running

  • think of it like an action/movement, ex: a dog running
  • it is executed not evaluated
  • it can be a simple action like console.log(5)
  • expressions can be inside a statement, but statements do not DIRECTLY return a value

How statements relate to expressions

Now for the mindfuckery: expressions are never statements! 🤯

2+2 is only an EXPRESSION, it’s NOT a statement.
2+2 IS wrapped in an invisible statement

So think of it as: every delicious sandwich (expression, that evaluated into the sandwich value) has to be wrapped in saran wrap (a statement) BUT the “color” (visibility) can vary

  1. it can have invisible saran wrap ex: 2+2

showing a sandwich getting wrapped in saran wrap. The sandwich is labeled expression, aka code that turns into a value, in this case it turns into a delicious value of sandwich

  1. Or it can have colored (visible) saran wrap Statement = /* expression slot */; let number = 2+2

a sandwich wrapped in colorful blue paper

Wait! Backup, what does this mean for function expressions versus function declarations/statements?

ALL functions are expressions (because they return a value or undefined). But whether they’re called a statement/declaration or expression depends on if they’re focused on evaluation or execution

function declaration/function statement:
function foo() {
}

  • the function must have a name
  • although this will return a value or undefined, its focused on being EXECUTED versus returning a value. Remember that statements are focused on actions/executions
  • A declaration basically means “binding identifiers”, and its binding the name to the function

function expression:
let foo = function() {
};

  • does not have a function name, the function is instead stored in the foo variable
  • The focus is on EVALUATING, aka returning a VALUE into the variable, so it makes sense that its called a function EXPRESSION. It makes sense because an expression is a piece of code which is evaluated (returns a value)

Technically Let And Const Are Declarations

Technically var is a statement and let and const are declarations, not statements. But that seems like a small detail that even Josh Comeau didn’t touch on in his article?

This difference seems to mostly matter in specific areas of the code, but if you’re curious about this technicality:

You can see declarations as: “binding identifiers to values”,
and statements as “carrying out actions”
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#difference_between_statements_and_declarations

The fact that var is a statement instead of a declaration is a special case, because it doesn’t follow normal lexical scoping rules and may create side effects — in the form of creating global variables, mutating existing var-defined variables, and defining variables that are visible outside of its block (because var-defined variables aren’t block-scoped).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#difference_between_statements_and_declarations

Some Resources I felt were most helpful:


This content originally appeared on DEV Community and was authored by Janet Spellman