JavaScript Expressions

Last updated: September 2026 — added nullish coalescing, examples for conditional access and invocation, and a code example for relational expressions.

In this article, we are going to check out what expressions are in JavaScript, and the different forms they take. Operators get their own article, which is next in the series.

Let's consider one simple example. If I am writing this article, I am expressing my knowledge to generate output as a written article. This could help other people to gain more knowledge.

In this example writing an article is an expression that produces some output (optional).

An Expression is a phrase of JavaScript that can be evaluated to produce value.

1. Primary Expression

Primary expressions are those that stand alone and don't need anything else to represent themselves.
Primary Expressions in JavaScript are constants or literals, certain language keywords, and variable references.

1.23                    // Number literal
"Hello Everyone!!!!"    // String literal

// Reserved keyword literals
true
false
null
this

2. Objects and Array Initializers

Object and Array Initializers are the expressions that produce value as a newly created object or array.
These are not primary expressions, because they include multiple subexpressions that specify property and element values.

An array initializer is a comma-separated list of expressions (which may or may not evaluate to a single value) combined within square brackets. The value returned by the array initializer will be a new Array.

Elements can be skipped by simply omitting a value between commas:

let arr = ["a", , , , , , , "k"];
arr.length;   // 8
arr[1];       // undefined

Note:-

Skipping a value creates a "hole", which is not quite the same as an element holdingundefined.

The difference shows up the moment you check:

let holes = ["a", , "k"];
let filled = ["a", undefined, "k"];

1 in holes;    // false — index 1 does not exist
1 in filled;   // true  — index 1 exists and holds undefined

holes.map(x => "X");    // [ "X", <1 empty item>, "X" ]   the hole is skipped
filled.map(x => "X");   // [ "X", "X", "X" ]

Both give undefined when you read arr[1], but iteration methods like map, filter and forEach walk straight past a hole. Arrays like this are called sparse arrays, and they are worth avoiding — if you want an empty slot, put undefined in it deliberately.

Object initializer expressions are the same as array initializer expressions, but the square brackets are replaced by curly brackets and each subexpression is prefixed with a property name and colon.

[]                    // Empty array with no expression to represent elements
["a" + "b", 2 + 4]    // Array with 2 expressions => ["ab", 6]

let obj1 = { a: 1, b: 2 };   // Object with 2 properties
let obj2 = {};               // Empty object
obj2.x = 1.0;
obj2.y = 2.0;

3. Function Definition Expression

Function definition expression defines the JavaScript function. The value of this expression is a newly defined function.

This expression consists of the keyword function followed by a comma-separated list of zero or more identifiers enclosed within parentheses (the parameter names) and a block of JavaScript code (function body) in curly braces.

// This function checks if the number is even or odd
let isEven = function (num) {
  return num % 2 === 0;
};

isEven(4);   // true
isEven(5);   // false

4. Property Access Expression

A property access expression evaluates the value of an object property or an array element.

expression . identifier
expression [ expression ]

In the first form, property access is an expression followed by a period and identifier. The expression specifies the object and the identifier specifies the name of the desired property.

In the second form, property access follows the first expression with another expression in square brackets. The first expression is an array or object and the second expression specifies the name of the desired property or the index of the desired array element.

let obj = { a: 10, b: 20, c: { x: 0, y: 1 } };
let arr = [1, 2, obj, 4];

obj.a;       // 10
obj.c.x;     // 0
arr[0];      // 1
arr[2].b;    // 20

The expression before.or[is first evaluated. If the value is null or undefined then the expression throws TypeError.

4.1 Conditional Property Access

ES2020 adds two new kinds of property access expressions:

expression ?. identifier
expression ?.[ expression ]

In JavaScript, the values null and undefined are the only two values that do not have properties. If we try to access the property of these values with a regular property access expression, we get a TypeError. We can use ?. or ?.[] syntax to guard against that error.

Consider the expression a?.b. If a is null or undefined then the expression evaluates to undefined without any attempt to access property b.

let user = { profile: { name: "Ganesh" } };

user.profile.name;      // "Ganesh"
user.address.city;      // TypeError: Cannot read properties of undefined

user.address?.city;     // undefined — no error
user.profile?.["name"]; // "Ganesh" — bracket form works the same way

Two things worth knowing.

?. guards only against null and undefined. Any other error still throws.

And the short-circuit covers the rest of the chain, not just the next step. In a?.b.c.d, if a is null then b, c and d are never evaluated — so it does not throw either.

Optional chaining is supported in every current browser and in Node, so there is no reason to avoid it today.

5. Invocation Expression

An invocation expression is the JavaScript syntax that is used to execute a JavaScript function or method.

foo(0)
Math.min(20, 2, 1)
str.split(',')

If the function uses the return keyword to return any value, then that value becomes the value of the expression. Otherwise the value of the expression will be undefined.

The syntax of the invocation expression uses a pair of parentheses and an expression before the open parentheses. And if that expression is a property access expression, then the invocation is known as a method invocation.

5.1 Conditional Invocation

ES2020 allows us to check whether a function actually exists before calling it. To do that we use the conditional invocation syntax ?.().

foo?.(arg1, arg2, ...);

If foo is not defined in the above example, then JavaScript will not execute the function and no TypeError will be thrown.

This is genuinely useful for optional callbacks, where the caller may or may not have passed one:

function saveUser(data, onSuccess) {
  // ... save the data ...
  onSuccess?.(data);   // runs only if a callback was passed
}

saveUser({ name: "Ganesh" });                  // no callback, no crash
saveUser({ name: "Ganesh" }, d => console.log("saved", d.name));

Before ?.() existed, this had to be written as if (typeof onSuccess === "function") onSuccess(data); every single time.

6. Object creation expression

An object creation expression is used to create a new object and invoke a constructor, to initialize the properties of that object. To invoke this type of expression we need to use the new keyword.

new Object()
new Point(2, 3)

If there are no arguments to be passed, we can omit the empty pair of parentheses.

new Object
new Date

7. Arithmetic expression

Arithmetic expressions are the expressions that are used to evaluate any mathematical equation. There are many arithmetic operators that can be used to build arithmetic expressions, and I cover those in the next article.

1 + 1     // 2
2 * 2     // 4
4 / 2     // 2
4 ** 5    // 1024

8. Relational expression

Relational expressions are used to check the relationship (such as "equal", "less than", "not equal", or "greater than or equal") between two values. Once the check is done, this expression returns true or false depending on whether that relationship exists.

A relational expression always evaluates to a boolean value, and that value is often used to control the flow of program execution in if, while, and for statements.

5 > 3;              // true
"apple" < "banana"; // true — strings compare by their 16-bit values

10 == "10";         // true  — loose equality converts the string to a number
10 === "10";        // false — strict equality also compares the type

Prefer === over ==. The conversions == performs are the source of a whole category of bugs — null >= 0 is true while null > 0 is false, and there is no reading of that which is useful.

9. Nullish Coalescing Expression

?? evaluates to its left side unless that side is null or undefined, in which case it evaluates to the right side.

let settings = { volume: 0, theme: null };

settings.volume ?? 50;    // 0
settings.missing ?? 50;   // 50
settings.theme ?? "dark"; // "dark"

It looks like ||, and the difference matters:

settings.volume || 50;   // 50  <-- 0 is falsy, so we lost a valid value
settings.volume ?? 50;   // 0   <-- only null/undefined trigger the fallback

|| falls back on any falsy value, so 0, "" and false all trigger the default even when they are legitimate values. ?? falls back only on null and undefined.

Like || and &&, it short-circuits — the right side is never evaluated unless it is needed.

It is designed to be used with the conditional property access we saw in section 4.1:

let user = {};
let city = user.address?.city ?? "Unknown";   // "Unknown"

One syntax rule. ?? cannot be mixed with || or && without parentheses:

a || b ?? c      // SyntaxError
(a || b) ?? c    // fine
a || (b ?? c)    // fine

That is deliberate. The two operators have different fallback rules, so instead of guessing which one you meant, the language makes you say it.

---

Every expression above produces a value. What we have not looked at is how to combine those values — and the rules about which part of a long expression runs first, which trip up more code than most people admit.

That is the next article: JavaScript Operators, including the precedence table and when you actually need parentheses.

I hope you liked this article.

Hope you like it, If yes **like & share.**

Thanks for your time.

Happy coding….

← JavaScript Strings JavaScript Operators →