Advanced JavaScript Syntax

This primer explains some of JavaScript’s advanced syntax.

See all primers

Contents

String Interpolation

You can interpolate expressions into strings by using backticks to define the string and ${...} for the variable or other expression. For example:

const myVar = "foo";
console.log(`${myVar}bar`);     // outputs "foobar"

Top

Nullish Coalescing Operator (??)

The ?? operator is a useful way to provide a default value for a variable. It looks like this:

const result = myVar ?? "my default";

If myVar is undefined or null, then the expression resolves to the value to the right of the ?? operator—"my default", in this case. If it’s not null or undefined, then the expression resolves to the value on the left of the operator.

Think of it as “use this variable, but if it’s null or undefined, use the default instead.”

Top

Optional Chaining Operator (?.)

The ?. operator allows you to dereferencing a variable (or other expression) that might be undefined or null. If the expression to the left of the ?. operator is undefined or null, the operator resolves to undefined. Otherwise, it resolves normally.

const myVar = undefined;

// throws an exception
const a = myVar.foo;

// works fine
const b = myVar?.foo;    // b is undefined

The ?. operator can also be used for arrays and computed properties.

const a = myArray?.[0];
const b = myObject?.[myVar];

Top

delete

You can remove an entry from an object with the delete keyword:

const myObject = {
	a: "one",
	b: "two",
};
console.log(myObject);    // { a: "one", b: "two" }

delete myObject.a;
console.log(myObject);    // { b: "two" }

Top

Object Shorthand

When creating an object using an object literal, you normally provide pairs of names and values, like this:

const myObject = {
	foo: "bar",
};

If a value is a variable that has the same name as its key, you can leave the property name out. For example, the following two code blocks are equivalent:

const body = "my-body";

// Without object shorthand:
const myObject = {
	body: body,
};

// With object shorthand:
const myObject = {
	body,
};

Top

Computed Property Names

Object literals consist of name/value pairs. Although the name is written without quotes, it’s always a literal string. If you want to use a variable or other expression instead of a string, you can enclose it in square brackets, like this:

const keyName = "name1";
const myObject = {
	[keyName]: "value 1",
	name2: "value 2",
}

console.log(myObject);    // { name1: "value 1", name2: "value 2" }

Top

Private Methods (#)

To mark a method private in JavaScript, put # at the beginning of the method name.

class MyClass {
	publicMethod() {
		this.#privateMethod();
	}

	#privateMethod() {
		console.log("foo");
	}
}

new MyClass().publicMethod();   // outputs "foo"

Top

Object Destructuring

The fields in an object can be converted to variables. This is called “destructuring.” For example, the following two code blocks are equivalent:

const myObject = {
	foo: "one",
	bar: "two",
};

// Without destructuring:
const foo = myObject.foo;
const bar = myObject.bar;

// With destructuring:
const { foo, bar } = myObject;

You can use object destructuring in your function signatures. The following two code blocks are equivalent: 

const myObject = {
	foo: "one",
	bar: "two",
};
myFunction(myObject);

// Without destructuring:
function myFunction(obj) {
	const foo = obj.foo;
	const bar = obj.bar;

	console.log(foo + bar);   // outputs "onetwo"
}

// With destructuring
function myFunction({ foo, bar }) {
	console.log(foo + bar);   // outputs "onetwo"
}

Top

Array Destructuring

Similar to object destructuring, the fields in an array can be converted to variables. For example, the following two code blocks are equivalent:

const myArray = [ "a", "one" ];

// Without destructuring:
const key = myArray[0];
const value = myArray[1];

// With destructuring:
const [ key, value ] = myArray;

You can use array destructuring in your function signatures:

myFunction([ "a", "one" ]);

function myFunction([ key, value ]) {
	console.log(`${key} --> ${value}`);   // outputs "a --> one"
}

Top

Renaming Destructured Variables

By default, when destructuring an object, the names of the new variables are the same as the object’s keys:

const myObject = {
	foo: "one",
	bar: "two",
}

const { foo, bar } = myObject;

console.log(foo);   // "one"
console.log(bar);   // "two"

To use a different name, add the new name with a colon:

const myObject = {
	foo: "one",
	bar: "two",
}

const { foo: differentName, bar: anotherName } = myObject;

console.log(foo);   // undefined
console.log(bar);   // undefined
console.log(differentName);   // "one"
console.log(anotherName);     // "two"

Top

Rest Operator (...)

When destructuring an object, you can use the rest operator (...) to collect all the remaining values:

const myObject = {
	a: "one",
	b: "two",
	c: "three",
};

const { a, ...remainder } = myObject;

console.log(a);           // "one"
console.log(remainder);   // { b: "two", c: "three" }

Top

Spread Operator (...)

When defining an object literal, you can use the spread operator (...) to add the contents of another object to the object you’re defining:

const a = "one";
const remainder = {
	b: "two",
	c: "three",
};

const myObject = {
	a,
	...remainder,
};

console.log(myObject);    // { a: "one", b: "two", c: "three" }

Top

Default Function Parameters

Function parameters can be given a default value:

function myFunction1(myVar = "my default") {
	console.log(myVar);
}

myFunction1();   // outputs "my default"

Destructured function parameters can be given default values too:

function myFunction2({
	field1 = "first_field",
	field2 = "second_field",
}) {
	console.log(field1, field2);
}

myFunction2({ field1: "hi" });   // outputs "hi second_field"
myFunction2();                   // throws error

Calling myFunction2() is an error in the example above because, although each of the fields of the destructured object are optional, the object itself is not optional. To make a destructured object entirely optional, give each of the fields a default, and give the destructured object a default, too:

function myFunction3({
	field1 = "first_field",
	field2 = "second_field",
} = {}) {
	console.log(field1, field2);
}

myFunction3();   // outputs "first_field second_field"

Top

Arrow Functions

JavaScript allows you to define a function anywhere you can have an expression. In some languages, this is called a “lambda.” In JavaScript, it’s called an “arrow function expression.”

const myFunction = () => {
	return "foo"
};

console.log(myFunction());     // outputs "foo"

As a shorthand, if your arrow function is a one-liner that returns a value, you can leave out the curly braces and return keyword:

const myFunction = () => "foo";

console.log(myFunction());     // outputs "foo"

Arrow functions are typically used as function parameters.

myArray.sort((a, b) => a - b);

Top