Expressions and Instructions

We divide all the code into two groups — one returns values, the other — does not.

Time to read: 8 min

Briefly

Expression (eng. expression) — is code that, when executed, returns some value. For example, 5 + 3 will return 8, and Math.random() — a random number.

Statement (eng. statement) — is a separate command in the code that performs a specific action. For example, if allows creating branching in a program, for allows repeating the same action.

How to Understand

Expressions

Any program is a set of operations. To describe a program, a developer writes various expressions in a programming language. Let's look at the simplest expression — open the console of any browser and type a simple expression — a number.

        
          
          123
          123

        
        
          
        
      

When we press Enter, the console will respond to us with the same number. Congratulations, this was the simplest expression. The JavaScript interpreter executed it and returned the result of the last (in this case, the only) operation.

First Expression

Let's complicate the example and add a bit of action. We will enter a classic math problem into the browser console:

        
          
          2 + 2 * 2
          2 + 2 * 2

        
        
          
        
      

JavaScript understands math, so the result of executing such an expression will yield the number 6. How did JavaScript calculate that?

2 + 2 * 2 — is a compound expression. It contains both expressions representing numbers and expressions representing operations on numbers. There can be many such expressions, and with their help, we combine and transform values.

Compound expressions are better understood as a diagram:

Diagram of Expression 2 + 2 * 2

The addition and multiplication operations need two expressions — left and right, to compute the result. The left side of the addition will be the number 2, and the right side will be the compound expression 2 * 2, which will also be broken down part by part.

Let's consider a slightly more complex example. We will enter into the console:

        
          
          (1 + 3) * (4 - 2)
          (1 + 3) * (4 - 2)

        
        
          
        
      

Schematic representation of the expression can be visualized as:

Diagram of Expression (1 + 3) * (4 - 2)

As in the previous example, we can see what parts the expression consists of and how these parts are related. Ultimately, we will get the answer 8.

From all the examples provided, we can conclude that expressions operate on data. This can be not only numbers but also strings and complex data structures. Data is combined with operations over them (for example, addition, subtraction, multiplication), and the program outputs the result of the expression. It is convenient to represent an expression as sets of data in combination with operations that process them. Schematic representation of a program consisting of expressions can be illustrated as a sequence of blocks.

Diagram of Sequential Expressions

Statement

Working with data is not all that is needed to create a program. Expressions solve not so many questions: how to describe an action under certain conditions using an expression? Yes, we will have data and can write an expression to compute the condition, but how to ask the program to perform a certain action? And if some action needs to be repeated several times?

For this reason, programming languages have statements. They are not expressions, but they allow properly adjusting the order of their execution.

For example, using the if statement, one can write a program with a condition:

        
          
          const someNumber = getSomeRandomNumber()if (someNumber > 10) {  console.log('Greater than ten')} else {  console.log('Less than ten')}
          const someNumber = getSomeRandomNumber()

if (someNumber > 10) {
  console.log('Greater than ten')
} else {
  console.log('Less than ten')
}

        
        
          
        
      

Statements do not compute anything and do not return a result, so they are not expressions. For instance, the if statement allows describing several paths for the program's execution. Its condition will be computed using the expression num > 10 (which is an expression and returns a boolean result), and inside the conditional branches, other expressions will also be present. A function call is an expression, and it returns a result.

Thus, by combining just one statement with expressions, we get a program with branching:

Diagram of Branching

Using the for or while statement, one can iterate over an action:

        
          
          let sum = 0// In this line, the statement is for// and the variable declaration, while everything else — is expressionsfor (let i = 1; i < 10; i++) {  // Adding value, this is an expression  sum = sum + 1}
          let sum = 0

// In this line, the statement is for
// and the variable declaration, while everything else — is expressions
for (let i = 1; i < 10; i++) {
  // Adding value, this is an expression
  sum = sum + 1
}

        
        
          
        
      

And just like that, by combining a statement with other expressions, we obtain a more meaningful program.

Diagram of Loop

In JavaScript, all statements can be categorized into several groups:

You can only write a program by combining expressions that work with data and statements that allow controlling the order of execution.

Expressions + Statements = ❤️

How to Write

🛠 From a practical standpoint, it's essential to remember the main feature of statements — they cannot be used in places where an expression is expected. To understand what is being discussed, let's look at an example:

        
          
          getBioAbout(  if (num > 10) { return 'Sherlock' }  else { return 'Watson' })// SyntaxError: Unexpected token 'if'
          getBioAbout(
  if (num > 10) { return 'Sherlock' }
  else { return 'Watson' }
)
// SyntaxError: Unexpected token 'if'

        
        
          
        
      

Such an example will not work. As an argument when calling, you can pass a simple expression (for example, a specific string 'Elon Musk' or a number 5), or a compound expression that will compute and return a value (for example, a call to another function getCurrentUser()). But you cannot pass a statement to a function.

We pass a compound expression that will compute and return a string:

        
          
          getBioAbout('Elon Musk')getBioAbout('Sherlock' + ' ' + 'Holmes')getBioAbout(getCurrentUser())
          getBioAbout('Elon Musk')
getBioAbout('Sherlock' + ' ' + 'Holmes')
getBioAbout(getCurrentUser())

        
        
          
        
      

🛠 Sequential statements can be separated by the semicolon operator ;.

        
          
          const num = 5if (5 < 10) {}if (5 > 10) {}
          const num = 5

if (5 < 10) {}
if (5 > 10) {}

        
        
          
        
      

But expressions can be separated by the comma operator ,. In this case, all expressions will be executed in order from left to right, but the result will only return from the last one in the chain. The comma operator is rarely used, as it often complicates the code.

        
          
          function x() {  return 1}function z() {  return 2}x(), z()// Will return the value 2,// because z() was executed last
          function x() {
  return 1
}
function z() {
  return 2
}

x(), z()
// Will return the value 2,
// because z() was executed last