Skip to content

Home

JavaScript Operator Cheatsheet

ℹ Important

This article serves as a quick reference for JavaScript's symbolic operators, helping newcomers to the language by giving them an easily searchable name for them. If you're looking for the full operator reference for the language, you should probably check out the MDN Web Docs.

Assignment operator

The assignment operator (=) assigns a value to a variable.

let x = 5; // Assigns the value 5 to x

Equality comparison operators

JavaScript equality comes in two flavors:

// Loose equality
10 == '10'; // true
10 != '10'; // false

// Strict equality
10 === '10'; // false
10 !== '10'; // true
Further reading

Comparison operators

Comparison operators compare two values, much like in math:

const a = 5;
const b = 10;
a > b;  // false
a < b;  // true
a >= b; // false
a <= b; // true

Math operators

Math operators are pretty much exactly what you'd expect. They perform basic arithmetic operations:

const a = 5;
const b = 2;

const sum = a + b;          // 7
const difference = a - b;   // 3
const product = a * b;      // 10
const quotient = a / b;     // 2.5
const remainder = a % b;    // 1
const exponent = a ** b;    // 25
const negation = -a;        // -5

Math assignment operators

A similar, set of operators combines assignment (=) with the math operators. These are shorthand for the longer forms:

let a = 5;
let b = 2;
a += b;     // a = a + b; a is now 7
a -= b;     // a = a - b; a is now 5
a *= b;     // a = a * b; a is now 10
a /= b;     // a = a / b; a is now 5
a %= b;     // a = a % b; a is now 1
a **= b;    // a = a ** b; a is now 25

Increment & decrement operators

The increment (++) and decrement (--) operators are shorthand for adding or subtracting 1 from a variable. They can be used in two ways:

let a = 5;
let b = 5;
let c = ++a;  // a is now 6, c is 6
let d = b++;  // b is now 6, d is 5
let e = --a;  // a is now 5, e is 5
let f = b--;  // b is now 5, f is 6

String concatenation operator

Apart from other usage mentioned above, the + operator can also be used to concatenate strings.

const str1 = 'Hello';
const str2 = 'World';
const greeting = str1 + ' ' + str2; // 'Hello World'

Logical operators

Logical operators are used to combine or negate boolean values:

const a = true;
const b = false;
const c = a && b;   // false (both must be true)
const d = a || b;   // true (at least one must be true)
const e = !a;       // false (negates the value)
Further reading

Truthy and falsy values

JavaScript uses type coercion in Boolean contexts, resulting in truthy or falsy values. Get a hang of how it all works in this quick guide.

Logical assignment operators

Logical assignment operators combine logical operations with assignment. They are shorthand for the longer forms:

let a = true;
let b = false;
let c = true;

a &&= b;  // a is now false (b is assigned to a)
b ||= c;  // b is now true  (c is assigned to b)
Further reading

Logical Operations

Get started with logical operations in JavaScript with this collection of helper functions.

Double negation operator

The double NOT (!!) is not technically an operator, but provides a way to convert a value to its boolean equivalent. It negates the value twice, effectively converting it to a boolean.

const str = 'Hello';
const isNotEmpty = !!str; // true

const num = 0;
const isNotZero = !!num; // false

Ternary operator

The ternary operator (?) is a shorthand for an if...else statement. It takes three operands:

const age = 18;
const canVote = age >= 18 ? 'Yes' : 'No'; // 'Yes'
Further reading

Spread operator

The spread operator (...) is used to expand an iterable (like an array or object) into its individual elements. It can be used in function calls, array literals, and object literals.

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];    // [1, 2, 3, 4, 5]

const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 };  // { a: 1, b: 2, c: 3 }
Further reading

Spread and rest syntax

JavaScript ES6 introduced us to powerful new features, such as the spread and rest syntax. Learn all you need to know in this quick guide.

Bitwise operators

Bitwise operators perform operations on the binary representations of numbers. They are not commonly used in JavaScript, but they can be useful in certain situations:

const a = 5;        // 0101 in binary
const b = 3;        // 0011 in binary

const c = a & b;    // 0001 (1 in decimal)
const d = a | b;    // 0111 (7 in decimal)
const e = a ^ b;    // 0110 (6 in decimal)
const f = ~a;       // 1010 (inverts all bits)
const g = a << 1;   // 1010 (10 in decimal)
const h = a >> 1;   // 0010 (2 in decimal)
const i = a >>> 1;  // 0010 (2 in decimal)

Bitwise assignment operators

Bitwise assignment operators combine bitwise operations with assignment. They are shorthand for the longer forms:

let a = 5;  // 0101 in binary
let b = 3;  // 0011 in binary

a &= b;     // a = a & b; a is now 1 (0001 in binary)
a |= b;     // a = a | b; a is now 3 (0011 in binary)
a ^= b;     // a = a ^ b; a is now 0 (0000 in binary)
a <<= 1;    // a = a << 1; a is now 0 (0000 in binary)
a >>= 1;    // a = a >> 1; a is still 0 (0000 in binary)
a >>>= 1;   // a = a >>> 1; a is still 0 (0000 in binary)

Nullish coalescing operator

The nullish coalescing operator (??) returns the right-hand operand when the left-hand operand is null or undefined. It is useful for providing default values.

const a = null;
const b = 5;
const c = a ?? b; // 5 (a is null)
const d = 0;
const e = d ?? b; // 0 (d is not null or undefined)
Further reading

Nullish assignment operator

The nullish assignment operator (??=) assigns the right-hand operand to the left-hand operand only if the left-hand operand is null or undefined.

let a = null;
let b = 5;
a ??= b;  // a is now 5 (a was null)
let c = 0;
c ??= b;  // c is still 0 (c was not null or undefined)

Property access operator

The property access operator (.) is used to access properties of objects. It can also be used to call methods on objects.

const obj = { a: 1 };
const value = obj.a; // 1

Optional chaining operator

The optional chaining operator (?.) allows you to safely access deeply nested properties of an object without having to check if each property in the chain exists. If any property in the chain is null or undefined, it returns undefined instead of throwing an error.

const obj = { a: { b: { c: 1 } } };
const value = obj?.a?.b?.c;   // 1
const value2 = obj?.a?.b?.d;  // undefined (no error thrown)
Further reading

Comma operator

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand.

const a = (1, 2, 3);      // a is 3

Arrow function operator

While not technically an operator, it's often confused with one. The arrow function syntax (=>) is a shorthand for writing function expressions. It allows you to create anonymous functions in a more concise way.

const add = (a, b) => a + b; // Arrow function
add(2, 3); // 5
Further reading

Arrow functions introduction

JavaScript arrow functions are a very useful tool to learn and master. Here's a complete introduction to everything you need to know.

More like this

Start typing a keyphrase to see matching articles.