JavaScript Expressions: A Beginner’s Guide

ByEditor

Editor’s note: Mat Marquis and Andy Bell have introduced JavaScript for Everyone, an online course available exclusively at Piccalilli. This article is an excerpt from the course, specifically from a chapter focused on JavaScript expressions. We’re sharing it here to encourage you to enroll in the course. Enjoy this preview of what you can expect from the full JavaScript for Everyone course.

Hello, I’m Mat, but you can call me “Wilto” — I’m here to teach you JavaScript.

Actually, I’m teaching JavaScript at JavaScript for Everyone. Here, we have a lesson from the JavaScript for Everyone module on lexical grammar and analysis — the process of parsing script file characters and converting them into “input elements” (lexical tokens, line endings, comments, and whitespace) and how the JavaScript engine interprets them.

An expression is code that, when evaluated, resolves to a value. 2 + 2 is a classic example.

2 + 2
// result: 4

Think of it this way: anywhere in a script where a value is expected, you can use an expression, whether simple or complex:

function numberChecker( checkedNumber ) {
  if( typeof checkedNumber === "number" ) {
    console.log( "Yep, that's a number." );
  }
}

numberChecker( 3 );
// result: Yep, that's a number.

numberChecker( 10 + 20 );
// result: Yep, that's a number.

numberChecker( Math.floor( Math.random() * 20 ) / Math.floor( Math.random() * 10 ) );
// result: Yep, that's a number.

JavaScript doesn’t always allow for absolute statements. Exceptions are rare, but not impossible:

console.log( -2**1 );
// result: Uncaught SyntaxError: Unary operator used immediately before exponentiation expression. Parenthesis must be used to disambiguate operator precedence

Still, this perspective on expressions and their resulting values is fundamental to understanding the language.

Primary Expressions

While the above example appears to be a number, then an expression, then a complex expression, it’s actually expressions all the way down. 3 is a primary expression — an expression that resolves predictably to its value (it’s three).

console.log( 3 );
// result: 3

The additive expression 2 + 2 is the primary expression 2 plus the primary expression 2.

While you might not often point out primary expressions, understanding them offers insight into how JavaScript views values: a variable is also a primary expression, and you can substitute an expression for the value it results in — the value the variable references.

A primary expression you’ll use often is the grouping operator. Remember it from math classes:

console.log( 2 + 2 * 3 );
// result: 8 

console.log( ( 2 + 2 ) * 3 );
// result: 12

The grouping operator is a pair of parentheses used to evaluate part of an expression as a unit. It can override mathematical order of operations, but more often it’s used to control conditional logic and improve readability:

const minValue = 0;
const maxValue = 100;
const theValue = 50;

if( ( theValue > minValue ) && ( theValue < maxValue ) ) {
  console.log( "Within range." );
}
// result: Within range.

I frequently use parentheses for clarity, even when working with math:

console.log( 2 + ( 2 * 3 ) );
// result: 8

The grouping operator can also remove ambiguity in syntax, specifying that a given syntax is intended as an expression. This is evident in the developer console:

{ "the






Discover more from WIREDGORILLA


Subscribe to get the latest posts sent to your email.

Similar Posts