What is the difference between an expression and a statement in JS?

Question

What is the difference between a statement and a expression? How can i know each one is?

Why void transform this:

void function() {

}();

into an expression?

And why this works:

something((something) => something + 2);

and this don't:

something((something) => if (something) { something + 2 });

?

Thanks!!

Defrost

if isn't a function, and has no return value, therefore you cannot assign the "result" of an if to something, because if HAS NO results. – Aeolic

What does this have to do with functional programming? Or node.js for that matter.... – Struck

Answer 1

Statements and expressions are different language units. What's probably tripping you up is that JavaScript, unlike some other languages, has what the spec calls ExpressionStatement: It can treat any expression as a statement (but it cannot treat statements as expressions). So for instance, this is valid JavaScript:

flag && console.log("Hi there");

...whereas in (say) Java that wouldn't be valid, because while Java has some specific statements to allow for specific expression-like things (method calls, for instance), it doesn't have JavaScript's overall ExpressionStatement.

Why void transform this:

void function() {

}();

into an expression?

Because void is an operator. It evaluates its operand (whatever follows it), and then sets its result to undefined. It's not at all related to the void that you see in languages like C, C++, Java, or C#. So the whole thing is an ExpressionStatement. The only reason you need the void there is that without it, when the parser is expecting to see a statement, the keyword function puts the parser into a state where it's expecting a function declaration, not an expression. (You can use any operator, not just void, to put the parser into expression state; details in this question and its answers.)

And why this works:

something((something) => something + 2);

and this don't:

something((something) => if (something) { something + 2 });

Because of the way arrow functions are defined by the specification. There are two forms of arrow function:

• Ones with a concise body (no {})
• Ones with a verbose body

Concise example:

array.sort((a, b) => a - b);

Equivalent verbose example:

array.sort((a, b) => {
    return a - b;
});

Arrow functions with concise bodies require that the body be an expression because, as you can see above, they return the result of the expression. You can't use a statement there for the same reason you can't use a statement other places an expression is required: A result value is needed for the implicit return statement. Your second example, translated to a verbose body, is this:

something((something) => {
    return if (something) { something + 2 };
});

...which demonstrates why it didn't work: You have an if after return, but the return statement requires an operand (expression) or statement terminator instead.

Eckert

Answer 2

In short, expression refers to value, statement defines behavior.

---

For a complete explanation you should always read the top voted answer: T.J. Crowder's answer

---

Let me just show you some naive examples.

The following code define a value. It is a statement called let statement led by let keyword. Here 1 is an expression.

// statement
// |---------|
   let n = 1 ;
//        |-|
//        expression

And this is for statement led by for keyword. It comes with some nested expressions and statements.

//      expression(1)
//      |-----------|
   for (num in numArr) {                 //--+
                                         //  |
      sum += (num * 3); // statement(2)  //  |
//            |-----|                    //  |statement(1)
//            expression(2)              //  |
                                         //  |
   }                                     //--+

So a statement is an instruction unit telling computer what to DO. for statement, while statement, if statement, they are all Actions, in another word Tasks.

But for expression, we are talking about values, valuables, objects, or some procedures that can produce a value, like function.

1 + 2
(2 + 3) * 5 === 25
new Foo()

So Javascript also has function expression. Because function is a value. In the following code,

1. The entire snippet is a statement.
2. Everything after = is an expression.
3. return width * height; is nested statement.
4. width * height is an expression.

const rectArea = function(width, height) {
  return width * height;
};

Paleolithic