JavaScript Expressions and Statements

Expressions are parts of program code that can be combined and interpreted into a new value during processing. Together with statements, expression forms the building blocks of a program. Learn about JavaScript's expression and statement here.


The word statement and expressions confuse me a lot when I first learned programming. Perhaps it's because they are the bread and butter of a program's code structure — just like SOV sentence structure in English — hence makes it difficult to see clearly which is which. Nevertheless, it is my job as a software developer to try and explain what expressions and statements are.

Expressions are parts of code that will be evaluate by the programming and returns a new value as a result of that evaluation. It is similar to arithmetical operation, in which we can do addition or subtraction between two numbers or more to create a new number as the result. An easy trick to spot expressions is to look for the operator sign in the code.

A statement, on the other hand, is a complete line of code that performs some action, like print a variable's value or checking for conditionals. Consider the following piece of code

  // first example
  let name = "Nathan" + "Sebhastian"; 
  console.log(name);
  
  // second example
  let age = 10 + 6; 
  console.log (age);
  
  // third example
  function myFunction(a, b) { 
    if (a == "Johnny" && b == "English"){
      console.log ("Welcome, Britain's greatest agent!"); 
    }
    else {
      console.log ("Identification failed.");
    }  
  }
  myFunction ("Johnny", "English");

Here we will do exercise to identify which part of code is a declaration, which is an expression, and which is a statement. Together with declarations, expressions and statements became the building block of code that will be used again and again. Declarations are easy to spot, since the name speaks for itself. We have seen three declarations in the previous code:

  // first example
  let name = "Nathan" + "Sebhastian";   // this is declaration of variable name
  console.log(name);
  
  // second example
  let age = 10 + 6;   // we declare variable age here
  console.log (age);
  
  // third example
  function myFunction(a, b) {     // here we declare a function with two parameters
    if (a == "Johnny" && b == "English"){
      console.log ("Welcome, Britain's greatest agent!"); 
    }
    else {
      console.log ("Identification failed.");
    }  
  }
  myFunction ("Johnny", "English");

Now it's time to identify expressions. Can you spot the part of our code that returns value?

  // first example
  let name = "Nathan" + "Sebhastian";   // this is declaration of variable name with string concatenation expression
  console.log(name);
  
  // second example
  let age = 10 + 6;   // we declare variable age here with integer addition expression
  console.log (age);
  
  // third example
  function myFunction(a, b) {     // here we declare a function with two parameters, this is also a function definition expressions
    if (a == "Johnny" && b == "English"){    // logical expressions comparing the values of a and b variables
      console.log ("Welcome, Britain's greatest agent!"); 
    }
    else {
      console.log ("Identification failed.");
    }  
  }
  myFunction ("Johnny", "English"); // this function call is an expression

In this example we see three expressions. The first one is a string expression, the second is arithmetic expression, the third one is a function definition expression, the fourth is a logical expression and the fifth is a function call. Now you began to see why defining which part of code is declaration, expression or statement. Don't worry, I will provide a cheat sheet at the end for your reference. For now, let's determine which part of the code are statements.

  // first example
  let name = "Nathan" + "Sebhastian";
  console.log(name); // statement
  
  // second example
  let age = 10 + 6;   
  console.log (age); // statement
  
  // third example
  function myFunction(a, b) {    
  // this entire if else block is a statement
    if (a == "Johnny" && b == "English"){    
      console.log ("Welcome, Britain's greatest agent!"); 
    }
    else {
      console.log ("Identification failed.");
    }  
  }
  myFunction ("Johnny", "English");

The easiest way to figure out statements in JavaScript is to look for the semicolon sign ; Now I know what you think.. "Isn't that means the entire sample code are statements?" The answer is, unfortunately, yes! Statements are complete lines of code that can have declarations and expressions. You can think of it this way:

  // first example
  let name = "Nathan" + "Sebhastian"; // the code states that variable name's value is "Nathan" + "Sebhastian"
  console.log(name); // statement
  
  // second example
  let age = 10 + 6;   // this code states that variable age's value is 10+6
  console.log (age); // statement
  
  // third example
  function myFunction(a, b) {    
  // this entire if else block is a statement
    if (a == "Johnny" && b == "English"){    
      console.log ("Welcome, Britain's greatest agent!"); 
    }
    else {
      console.log ("Identification failed.");
    }  
  }
  myFunction ("Johnny", "English"); // statement that contain function call expression

Statements in a programming language can contain expression. That kind of statement is called expression statement. The reverse however, does not hold: you cannot write a statement where JavaScript expects an expression. For example, an if statement cannot become the argument of a function:

  myFunction ("Johnny", if (true){return "English"} ); // unexpected token error

Learning how to identify code parts as declaration, statement or expression takes time and practice. You'll develop an instinct to identify them as you go along. Now as promised, here is an expression cheat sheet you can use as reference.

Arithmetic Expressions

Expressions that evaluate to a number

  10 / 5;
  i++;
  i -= 1;
  i * 8;

String Expressions

Expressions that evaluate to a string

  'Nathan ' + 'Sebhastian';
  name += 'Developer'; // equal to name = name + "Developer"; 

Primary Expressions

Expressions that evaluate to variable reference, literal value

    10 // integer value
    'this is a string' // string value
    true // boolean value
    this // the current object
    undefined // undefined value
    name // variable reference
    
    // also keywords to create expressions
    function
    class
    function* //the generator function
    yield //the generator pauser/resumer
    yield* //delegate to another generator or iterator
    async function* //async function expression
    await //async function pause/resume/wait for completion
    /pattern/i //regex
    () // grouping

Array and Object Expressions

These expressions return array or object data type

    []
    {}
    [1,2,3]
    {a: "Software", b: "Hardware"}

Logical Expressions

These expressions return boolean data type

  a && b
  a || !b
  !a

Logical Expressions

These expressions return boolean data type

  a && b
  a || !b
  !a

Object Creation Expressions

These expressions return an object

  new object();
  new myObject(1);
  new mySecondObject('name', 2, {a: 4});

Object Property Expressions

These expressions return an object property

  object.property //reference object property
  object[property]
  object['property']

Function Definition Expressions

These expressions return a function

  function() {}
  function(a, b) { return a * b }
  (a, b) => a + b
  a => a / 2

Get my weekly newsletter ✉️
Let's explore the exciting world of React together.
No Spam. Unsubscribe anytime