JavaScript Expressions and Statements

Madhu M
Madhu M
Feb 27, 2018 · 5 min read

Statements and expressions are two very important terms in JavaScript. Given how frequently these two terms are used to describe JavaScript code, it is important to understand what they mean and the distinction between the two.

Expressions

Arithmetic Expressions:

10;     // Here 10 is an expression that is evaluated to the numeric value 10 by the JS interpreter10+13; // This is another expression that is evaluated to produce the numeric value 23

String Expressions:

'hello';
'hello' + 'world'; // evaluates to the string 'hello world'

Logical Expressions:

10 > 9;   // evaluates to boolean value true
10 < 20; // evaluates to boolean value false
true; //evaluates to boolean value true
a===20 && b===30; // evaluates to true or false based on the values of a and b

Primary Expressions:

'hello world'; // A string literal
23; // A numeric literal
true; // Boolean value true
sum; // Value of variable sum
this; // A keyword that evaluates to the current object

Left-hand-side Expressions:

// variables such as i and total
i = 10;
total = 0;
// properties of objectsvar obj = {}; // an empty object with no properties
obj.x = 10; // an assignment expression
// elements of arrays
array[0] = 20;
array[1] = 'hello';
// Invalid left-hand-side errors
++(a+1); // SyntaxError. Attempting to increment or decrement an expression that is not an lvalue will lead to errors.

Now that we have covered the basics of expressions, let’s dive a bit deeper into expressions.

Assignment Expressions:

average = 55;var b = (a = 1); // here the assignment expression (a = 1) evaluates to a value that is assigned to the variable b. b = (a = 1) is another assignment expression. var is not part of the expression.

The = operator expects an lvalue as its left-side operand. The value of an assignment expression is the value of the right-side operand such as 55 in the above example. As a side effect, the = operator assigns the value on the right side to the value on the left side.

Expressions with side effects:

sum = 20; // here sum is assigned the value of 20sum++; // increments the value of sum by 1function modify(){
a *= 10;
}
var a = 10;
modify(); // modifies the value of a to 100.

Statements

Statements in JavaScript can be classified into the following categories

Declaration Statements:

var sum;
var average;
// In the following example, var total is the statement and total = 0 is an assignment expressionvar total = 0;// A function declaration statement function greet(message) {
console.log(message);
}

Expression Statements:

var a = var b; // leads to an error cause you cannot use a statement in the place of an expressionvar a = (b = 1); // since (b = 1) is an assignment expression and not a statement, this is a perfectly acceptable line of codeconsole.log(var a); // results in error as you can pass only expressions as a function argument

Stand alone primary expressions such as variable values can also pass off as statements depending on the context. Examples of expression statements includes the following

// In the following example, sum is an expression as it evaluates to the value held by sum but it can also pass off as a valid statement.sum;// An expression statement that evaluates an expression with side effectsb = 4+38;

Conditional Statements:

// Syntax of an if statement. If the expression following the if statement evaluates to a truthy value, statement 1 is executed else statement 2 is executed.if (expression) 
statement 1
else
statement 2

Loops and Jumps :

Function Expressions vs Function Declarations:

A function expression is part of a variable assignment expression and may or may not contain a name. Since this type of function appears after the assignment operator =, it is evaluated as an expression. Function expressions are typically used to assign a function to a variable. Function expressions are evaluated only when the interpreter reaches the line of code where function expressions are located.

// A function expression. We assign a function to the variable num and use it to call the function.var num = function message(x) {
return x + x;
}
num(7); // returns 14// An anonymous function expression. Behaves exactly like a named function expression.var num = function (x) {
return x + x;
}
num(7); // returns 14

Only function expressions can be immediately invoked. Such types of function expressions are referred to as Immediately Invoked Function Expression (IIFE).

// An Immediately Invoked Function Expression(function () {
console.log('Immediately Invoked Function Expression.');
})();

On the other hand, function declarations are statements as they perform the action of creating a variable whose value is that of the function. Function declaration falls under the category of declaration statements. Also, function declarations are hoisted to the top of the code unlike function expressions. Function declarations must always be named and cannot be anonymous.

// Example of a function declaration. Function declarations always start with the function keyword.function greet(message) {
return "Hi " + message;
}

For a more in-depth read on statements vs expressions, please refer to the sources listed under references.

References

  1. JavaScript: The Definitive Guide
  2. You Don’t Know JS
  3. http://2ality.com/2012/09/expressions-vs-statements.html
  4. https://medium.com/@danparkk/javascript-basics-lexical-grammar-expressions-operators-and-statements-d9a61c7e71a8

Launch School

Publications of the Launch School Community

Madhu M

Written by

Madhu M

Launch School

Publications of the Launch School Community