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)
- 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
- 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
- it can have invisible saran wrap ex: 2+2
- Or it can have colored (visible) saran wrap Statement = /* expression slot */; let number = 2+2
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_declarationsThe 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:
- https://www.joshwcomeau.com/javascript/statements-vs-expressions/
- https://coderwall.com/p/f4t65q/javascript-function-expression-vs-function-statement
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#defining_functions
- https://stackoverflow.com/questions/46351924/javascript-declarations-vs-expressions-vs-statements
This content originally appeared on DEV Community and was authored by Janet Spellman