Statements Vs. Expressions

So, a number of years in the past, I used to be educating internet improvement at a neighborhood coding bootcamp, and a pupil requested me this query:

What is the distinction between a “assertion” and an “expression” in JavaScript?

I felt like I knew the reply to this query, however once I tried to elucidate it, I could not put it into phrases. I had a feeling about it, however my precise information was surprisingly hazy.

There’s nothing extra humbling than educating 😅. College students have a knack for figuring out the “fuzzy spots” in our understanding.

I’ve since come to understand that this query is supremely vital. It is a load-bearing concrete pillar that may assist help a ton of JavaScript information.

That is particularly true for React builders. Most of these JSX guidelines you have needed to memorize, and all the time neglect to observe, are the results of this assertion/expression duality.

On this weblog submit, I will share among the epiphanies I’ve had about this distinction, and the way we will use this info in our day-to-day work.

At its core, an expression is a little bit of JavaScript code that produces a price.

For instance, these are all expressions:

• 1 → produces 1

• "howdy" → produces "howdy"

• 5 * 10 → produces 50

• num > 100 → produces both true or false

• isHappy ? "🙂" : "🙁" → produces an emoji

• [1, 2, 3].pop() → produces the quantity 3

Expressions can comprise expressions. For instance, what number of expressions do you rely on this chunk of JS code? Make a guess, after which drag the slider to see them every highlighted:

A JavaScript program is a sequence of statements. Every assertion is an instruction for the pc to do one thing.

Listed below are some examples of statements in JavaScript:

This is how I like to consider this: statements are the inflexible construction that holds our program collectively, whereas expressions fill within the particulars.
Statements usually have “slots” for expressions. We are able to put any expression we like into these slots.
For instance, declaring a variable has an expression slot:
We are able to use any of the expressions we noticed earlier in that slot:
When it comes to legitimate syntax, expressions are interchangeable. If an announcement has an expression slot, we will put any expression there, and the code will run. We cannot get a syntax error.
That stated, we will nonetheless run into different points. For instance, the next code is syntactically legitimate, however we’ll crash the browser tab if we attempt to run it, because it causes an infinite loop:


Hyperlink to this heading
A helpful trick

Need to know whether or not a piece of JS is an expression or an announcement? Attempt to log it out!
If it runs, the code is an expression. If you happen to get an error, it is a assertion (or, probably, invalid JS).
As a bonus, we will even see what the expression resolves to, since it’s going to be printed within the browser console!
This works as a result of all perform arguments should be expressions. Expressions produce a price, and that worth will likely be handed into the perform. Statements do not produce a price, and to allow them to’t be used as perform arguments.
At the same time as an skilled developer, I rely a ton on console.log. It is a splendidly versatile instrument!
Right here is an expression: 1 + 2 + 3.
What occurs if we create a JS file that features solely this expression? We could say we save the next content material as take a look at.js:
What number of statements does this file have? Zero or one?
This is the deal: expressions cannot exist on their very own. They’re all the time a part of an announcement. And so on this case, we now have an announcement that appears like this:
The assertion is basically empty except for its expression slot. Our expression 1 + 2 + 3 fills this slot, and our assertion is full.
In different phrases, all the following strains are legitimate statements:
Usually, tutorials will falsely state that expressions are statements, however this is not fairly proper. Expressions and statements are distinct issues. However it’s potential for an announcement to wrap round an expression with out offering any extra characters. Consider it like wrapping a sandwich in clear shrink wrap.
Statements sometimes finish in a semi-colon, which marks the top of the assertion. The semi-colon is not vital for sure statements, like if statements, whereas loops, and performance declarations.
If you happen to’ve labored with React earlier than, you are in all probability conscious that squiggly brackets ({ and }) enable us to embed bits of JavaScript inside our JSX, like this:
That is a part of what makes React so magical; we now have the complete energy of JavaScript out there to us.
However there is a catch — we will not put any JavaScript contained in the curly brackets. Particularly, we will solely embrace expressions, not statements. The squiggly brackets primarily create an expression slot inside our JSX.
If we attempt to embed a assertion right here, like an if/else assertion, we’ll get an error:
This blows up as a result of statements do not produce a price, solely expressions produce a price. If we wish to embed if/else logic in our JSX, we have to use a ternary operator expression:
This would possibly seem to be a bizarre JSX/React limitation, however it is truly a JavaScript limitation.
I feel we regularly blame React for seemingly arbitrary guidelines, like how parts should return a single top-level aspect. However as a rule, React is simply warning us a few JavaScript limitation.
Understanding the distinction between statements and expressions is a crucial first step in direction of demystifying a complete class of React warnings and bugs. We additionally have to study how JSX compiles into JavaScript, and the way React’s reconciliation and render cycle works… however, alas, these matters are past the scope of this weblog submit!
By the way, I am within the course of of making a complete React course, the useful resource I want existed once I was studying React. It is referred to as The Pleasure of React, and you may join updates at this time!
A JavaScript program consists of a sequence of statements. Every assertion is an instruction to do one thing, like create a variable, run an if/else situation, or begin a loop.
Expressions produce a price, and these values are slotted into statements, like a Tremendous Nintendo cartridge that modifications what the Tremendous Nintendo does.
Expressions are all the time a part of an announcement, even when that assertion is in any other case empty. For instance, the code beneath runs a loop with out utilizing a for assertion, however it nonetheless contains an “empty wrapper” assertion:
It may take some time for this distinction to develop into intuitive, however hopefully this weblog submit has clarified a number of issues!