What is the difference between statements and expressions

High quality resource sharing

Preface

JavaScript What are the differences between statements and expressions in ？

For this question , I seem to know the answer , But when I try to explain to others , But I was speechless . I have a feeling about this problem , But it can't be expressed clearly .

I realized later , This question is extremely important . It can be said to be the bearing wall of the house , Will help support a large number of JavaScript knowledge .

Yes React For developers , More so . Those you have to remember JSX The rules , And those rules that you always forget to follow , Most of them are sentence / expression The result of duality .

In this article , I will share some of my insights on the difference between the two , And how we use this information in our daily work .

expression

essentially , An expression is a segment that produces a value JavaScript Code .

All the following examples are expressions ：

• 1 → The generated value is 1
• "hello" → The generated value is "hello"
• 5 * 10 → The generated value is 50
• num > 100 → The generated value is true perhaps false
• isHappy ? "" : "" → The resulting value is a emoji
• [1, 2, 3].pop() → The generated value is 3

Expressions can contain other expressions . for instance , You think the following JS How many expressions are there in the code ？

(5 + 1) * 2

The answer is 5 Expression .

say concretely , They are 5 individual ：

1. (5 + 1) * 2 , This code itself is an expression , The resulting value is 12
2. (5 + 1) , Because there are brackets , This subexpression is evaluated first , And resolved to 6.
3. 5, A single number is itself an expression , Because they produce a value . This expression resolves to 5.
4. 1, Same thing , This expression resolves to 1.
5. 2, This number forms the final expression , It translates into 2.

sentence

One JavaScript A program is a series of statements . Every statement is an instruction for the computer to do something .

This is about JavaScript Examples of statements in ：

let hi = 5;

if (hi > 10) {
  //  More statements 
}

throw new Error(' Wrong report ');

About statements and expressions , I think so ： Statement is the rigid structure supporting our program , The expression is filled with details .

Statements usually have expressions “ slot ”. We can put any expression we like into these slots .

for instance , Declaring a variable with an expression slot can do this ：

let hi = /*  expression  */;

In this slot , We can use any expression we have seen before ：

let hi = 1;
let hi = "hello";
let hi = 5 * 10;
let hi = num > 100;
let hi = isHappy ? "" : "";
let hi = [1, 2, 3].pop();

In terms of effective grammar , Expressions are interchangeable . If a statement has an expression slot , We can put any expression there , The code will run . And we won't get grammatical errors .

in other words , We may encounter other problems . for instance , The following code is syntactically valid , But if we try to run it, the browser will crash , Because it will lead to dead circulation ：

while ("hello") {
    //  because "hello" Never change , So the cycle will repeat again and again , Until the script crashes .
    //  Grammatically valid , But there are still problems .
}

Convenience skills

Want to know a paragraph JS Is the code a statement or an expression ？ Try to print it out ！

console.log(/*  Here is JS Code  */);

If it can run , This code is an expression . If you make a mistake , That is the sentence （ Of course , It may also be illegal JS）.

Besides , We can even see the result of the expression , Because the results will be printed to the browser console .

This works because the parameters of any function must be expressions . The expression produces a value , And pass the value into the function . Syntax does not produce a value , Therefore, statements cannot be used as arguments to functions .

Even as an experienced developer , I also rely on console.log. It's really a good thing .

Expressions as statements

This is an expression ：1 + 2 + 3 .

If we create a that includes only this expression JS file , What's going to happen ？ Let's try to save the following content as test.js：

1 + 2 + 3

How many statements are there in this file ？0 One is still 1 individual ？

Here's the thing ： Expression cannot exist alone . They are always part of the statement . So in this case , We have a statement that looks like this ：

/*  Expression slot  */

In addition to expression slots , The statement is basically empty . expression 1 + 2 + 3 Filled the slot , Then the statement is generated .

let me put it another way , All the following lines are valid statements ：

//  sentence  1:
let hi = /*  Expression slot  */;
//  sentence  2:
return /*  Expression slot  */;
//  sentence  3:
if (/*  Expression slot  */) { }
//  sentence  4:
/*  Expression slot  */

Usually , Some tutorials incorrectly point out , Expressions are statements , But that's not exactly true . Expressions and statements are different things . But the statement may wrap the expression without providing any additional characters . It's like wrapping a sandwich with transparent plastic wrap .

Statements usually end with semicolons , It marks the end of the statement . Semicolons are not necessary for some statements , Such as if sentence 、while Loop and function declarations .

React Practice in

If you've ever used React, You may know braces { and } Allow us to JSX Embed some JavaScript, Just like this. ：

function CountdownClock({ secondsRemaining }) {
  return (
    <div>
 Time left:
 {Math.round(secondsRemaining / 60)} minutes!
 div>
  );
}

This is it. React The magic of , It can let us have JavaScript All capabilities of .

But there's a problem — We can't put any JavaScript Code . say concretely , We can only include expressions , It cannot include statements . Braces are essentially in our JSX Create an expression slot in .

If we try to insert a statement inside braces , for instance if/else sentence , We will get mistakes ：

function CountdownClock({ secondsRemaining }) {
  return (
    //   Grammatical errors 
    <div>
 {if (secondsRemaining > 0) {
 `${secondsRemaining} seconds left`
 } else {
 "Time expired!"
 }}
 div>
  );
}

This is because statements do not produce values , Only expressions produce values . If we want to JSX Embedded in if/else Logic , We need to use a ternary operator expression ：

function CountdownClock({ secondsRemaining }) {
  return (
    //   That's all right. 
    <div>
 {secondsRemaining > 0
 ? `${secondsRemaining} seconds left`
 : "Time expired!"
 }
 div>
  );
}

This seems to be a weird JSX/React Limit , But it is actually a JavaScript Limit .

I think we often blame React Some seemingly arbitrary rules of , For example, a component must return a top-level element . But more often ,React Just warning us about JavaScript The limitation of .

It is very important to understand the difference between statements and expressions . We also need to understand JSX How to compile into JavaScript Of , as well as React How does the scheduling and rendering cycle work … however , These topics are beyond the scope of this article .

summary

One JavaScript A program consists of a series of statements . Every statement is an instruction to do something , for instance , Create a variable , Run one if/else Conditional statements , Or start a cycle .

The expression produces a value , These values are placed in the slot of the statement . An expression is always part of a statement , Even if the statement is empty . for example , The following code does not use when running a loop for sentence , But it still contains a ” Transparent fresh-keeping film ” sentence ：

data.forEach(item => console.log(item));

This difference may take some time to become obvious , I hope this article can help you .

That's all of this , Welcome to like collection and forward ~

Link to the original text ：https://www.joshwcomeau.com/javascript/statements-vs-expressions/

author ：Joshua Comeau