JavaScript Cheatsheet
This page is a quick reference for modern JavaScript (ES6+) patterns that show up constantly in DSA and competitive programming. If you're just starting out, don't worry, every snippet here is explained line by line 😊
Variable Declaration​
const, let, and var​
Variable declaration in JavaScript
const x = 5; // Immutable binding, cannot reassign (use by default)
let y = 10; // Mutable, block-scoped
var z = 15; // Avoid — function-scoped, causes hoisting issues
// const doesn't make objects immutable, only the binding
const arr = [1, 2, 3];
arr.push(4); // Valid — modifying array content
// arr = [5, 6]; // Error — cannot reassign
Data Types​
Primitives vs References​
Primitives and reference types
// Primitives (copied by value)
let a = 5;
let b = a; // b is a copy of a
b = 10; // a is still 5
// Objects (copied by reference)
let obj1 = { x: 1 };
let obj2 = obj1; // obj2 references same object as obj1
obj2.x = 2; // obj1.x is now also 2
// Clone object to avoid reference issues
let obj3 = { ...obj1 }; // Shallow copy using spread operator
let obj4 = JSON.parse(JSON.stringify(obj1)); // Deep copy (works for simple objects)
Type Checking​
Type checking in JavaScript
typeof 5; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (historical quirk)
typeof [1, 2]; // "object"
Array.isArray([1, 2]); // true — proper way to check arrays
Arrays​
Creating and Accessing​
Array basics in JavaScript
const arr = [1, 2, 3, 4, 5];
const first = arr[0]; // first = 1
const last = arr[arr.length - 1]; // last = 5
// Create array of size n filled with 0
const zeros = new Array(n).fill(0);
// Create array with values 0 to n-1
const range = Array.from({ length: n }, (_, i) => i); // [0, 1, 2, ..., n-1]
// 2D array (grid)
const grid = Array.from({ length: r }, () => Array(c).fill(0)); // r rows, c columns
Essential Array Methods​
Core array methods
const arr = [1, 2, 3, 4, 5];
arr.push(6); // Adds to end, arr = [1, 2, 3, 4, 5, 6]
arr.pop(); // Removes from end, returns 6, arr = [1, 2, 3, 4, 5]
arr.unshift(0); // Adds to start, arr = [0, 1, 2, 3, 4, 5]
arr.shift(); // Removes from start, returns 0, arr = [1, 2, 3, 4, 5]
arr.slice(1, 3); // Returns [2, 3] — does not modify original
arr.splice(1, 2); // Removes 2 elements starting at index 1, modifies original
arr.includes(3); // true — checks if 3 exists
arr.indexOf(3); // 2 — returns index of first occurrence, -1 if not found
Functional Array Methods​
map, filter, reduce in JavaScript
const nums = [1, 2, 3, 4, 5];
// map — transform each element
const doubled = nums.map(x => x * 2); // [2, 4, 6, 8, 10]
// filter — keep elements that pass condition
const evens = nums.filter(x => x % 2 === 0); // [2, 4]
// reduce — accumulate to single value
const sum = nums.reduce((acc, x) => acc + x, 0); // 15 (0 is initial value)
// find — returns first element that matches
const firstEven = nums.find(x => x % 2 === 0); // 2
// some — returns true if any element matches
const hasEven = nums.some(x => x % 2 === 0); // true
// every — returns true if all elements match
const allPositive = nums.every(x => x > 0); // true
Sorting​
Sorting arrays in JavaScript
const nums = [3, 1, 4, 1, 5];
// Sort numbers ascending (default sort is lexicographic!)
nums.sort((a, b) => a - b); // [1, 1, 3, 4, 5]
// Sort descending
nums.sort((a, b) => b - a); // [5, 4, 3, 1, 1]
// Sort array of objects
const people = [{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }];
people.sort((a, b) => a.age - b.age); // Sort by age ascending
// Multi-level sort
const pairs = [[3, 1], [1, 2], [3, 0]];
pairs.sort((a, b) => {
if (a[0] !== b[0]) return a[0] - b[0]; // Sort by first element ascending
return b[1] - a[1]; // Then by second element descending
});
// Result: [[1, 2], [3, 1], [3, 0]]
Strings​
String Methods​
String operations in JavaScript
const s = "hello world";
s.length; // 11
s[0]; // "h" — access character at index
s.charAt(0); // "h" — same as above
s.toUpperCase(); // "HELLO WORLD"
s.toLowerCase(); // "hello world"
s.includes("world"); // true
s.startsWith("hello"); // true
s.endsWith("world"); // true
s.indexOf("o"); // 4 — first occurrence
s.lastIndexOf("o"); // 7 — last occurrence
s.slice(0, 5); // "hello" — substring from index 0 to 5 (exclusive)
s.substring(0, 5); // "hello" — similar to slice
s.split(" "); // ["hello", "world"] — split by space
// Replace
s.replace("world", "JS"); // "hello JS" — replaces first occurrence
s.replaceAll("o", "0"); // "hell0 w0rld" — replaces all occurrences
Template Literals​
Template literals in JavaScript
const name = "Alice";
const age = 25;
const msg = `${name} is ${age} years old`; // "Alice is 25 years old"
// Multi-line strings
const multiline = `
Line 1
Line 2
`;
Objects​
Creating and Accessing​
Object basics in JavaScript
const obj = { x: 1, y: 2 };
obj.x; // 1 — dot notation
obj["y"]; // 2 — bracket notation (useful for dynamic keys)
obj.z = 3; // Add new property
delete obj.z; // Remove property
// Check if property exists
"x" in obj; // true
obj.hasOwnProperty("x"); // true
// Get keys, values, entries
Object.keys(obj); // ["x", "y"]
Object.values(obj); // [1, 2]
Object.entries(obj); // [["x", 1], ["y", 2]]
Destructuring​
Object destructuring
const point = { x: 10, y: 20 };
const { x, y } = point; // x = 10, y = 20
// Rename variables
const { x: posX, y: posY } = point; // posX = 10, posY = 20
// Default values
const { z = 0 } = point; // z = 0 (since z doesn't exist in point)
// Array destructuring
const arr = [1, 2, 3];
const [first, second] = arr; // first = 1, second = 2
const [, , third] = arr; // third = 3 (skip first two)
Spread and Rest Operators​
Spread and rest operators
// Spread — expand array/object
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
const obj1 = { x: 1 };
const obj2 = { y: 2 };
const merged = { ...obj1, ...obj2 }; // { x: 1, y: 2 }
// Rest — collect remaining elements
const [first, ...rest] = [1, 2, 3, 4]; // first = 1, rest = [2, 3, 4]
function sum(...nums) { // Collects all arguments into array
return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10
Map and Set​
Map (Key-Value Pairs)​
Map operations in JavaScript
const map = new Map();
map.set("key", 10); // Add key-value pair
map.get("key"); // 10 — retrieve value
map.has("key"); // true — check if key exists
map.delete("key"); // Remove key
map.size; // Number of entries
// Iterate
for (const [key, val] of map) {
// key and val
}
// Map from array of pairs
const m = new Map([["a", 1], ["b", 2]]);
Set (Unique Values)​
Set operations in JavaScript
const set = new Set();
set.add(5); // Add value
set.add(5); // Duplicate ignored
set.has(5); // true
set.delete(5); // Remove value
set.size; // Number of elements
// Set from array (removes duplicates)
const s = new Set([1, 2, 2, 3]); // Set {1, 2, 3}
// Convert back to array
const arr = [...s]; // [1, 2, 3]
Functions​
Arrow Functions​
Arrow function syntax
// Traditional function
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b; // Implicit return for single expression
// Multiple statements require braces
const multiply = (a, b) => {
const result = a * b;
return result;
};
// Single parameter doesn't need parentheses
const square = x => x * x;
// No parameters need empty parentheses
const getRandom = () => Math.random();
Default Parameters​
Default parameters in JavaScript
function greet(name = "Guest") {
return `Hello, ${name}`;
}
greet(); // "Hello, Guest"
greet("Alice"); // "Hello, Alice"
Control Flow​
Ternary Operator​
Ternary operator
const max = a > b ? a : b; // Returns a if a > b, else b
// Nested ternary (use sparingly)
const sign = x > 0 ? "positive" : x < 0 ? "negative" : "zero";
Nullish Coalescing​
Nullish coalescing operator
const value = null ?? "default"; // "default" — null/undefined use default
const value2 = 0 ?? "default"; // 0 — 0 is not null/undefined
const value3 = "" ?? "default"; // "" — empty string is not null/undefined
// Compare with OR operator
const value4 = 0 || "default"; // "default" — 0 is falsy
const value5 = "" || "default"; // "default" — "" is falsy
Optional Chaining​
Optional chaining operator
const user = { name: "Alice", address: { city: "NYC" } };
user.address?.city; // "NYC"
user.phone?.number; // undefined — doesn't throw error if phone is undefined
// With arrays
const arr = [1, 2, 3];
arr?.[0]; // 1
arr?.[10]; // undefined
Asynchronous Patterns​
Promises​
Promise basics
const promise = new Promise((resolve, reject) => {
if (success) {
resolve(value); // Success
} else {
reject(error); // Failure
}
});
promise
.then(result => {
// Handle success
})
.catch(error => {
// Handle error
})
.finally(() => {
// Always runs
});
Async/Await​
Async await syntax
async function fetchData() {
try {
const response = await fetch(url); // Waits for promise to resolve
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
// Parallel execution
async function fetchMultiple() {
const [data1, data2] = await Promise.all([
fetch(url1).then(r => r.json()),
fetch(url2).then(r => r.json())
]); // Waits for both to complete
}
Common DSA Patterns​
Two Pointers​
Two pointer technique
function twoSum(arr, target) {
let left = 0, right = arr.length - 1;
while (left < right) {
const sum = arr[left] + arr[right];
if (sum === target) return [left, right];
if (sum < target) left++;
else right--;
}
return [-1, -1];
}
Sliding Window​
Sliding window technique
function maxSumSubarray(arr, k) {
let maxSum = 0, windowSum = 0;
// Initial window
for (let i = 0; i < k; i++) {
windowSum += arr[i];
}
maxSum = windowSum;
// Slide window
for (let i = k; i < arr.length; i++) {
windowSum += arr[i] - arr[i - k]; // Add new, remove old
maxSum = Math.max(maxSum, windowSum);
}
return maxSum;
}
Frequency Counter​
Frequency counter pattern
function charFrequency(s) {
const freq = {};
for (const char of s) {
freq[char] = (freq[char] || 0) + 1; // Increment or initialize to 1
}
return freq;
}
// Using Map
function charFrequencyMap(s) {
const freq = new Map();
for (const char of s) {
freq.set(char, (freq.get(char) || 0) + 1);
}
return freq;
}
Math and Number Operations​
Common Math Functions​
Math operations in JavaScript
Math.abs(-5); // 5
Math.max(1, 2, 3); // 3
Math.min(1, 2, 3); // 1
Math.floor(3.7); // 3 — rounds down
Math.ceil(3.2); // 4 — rounds up
Math.round(3.5); // 4 — rounds to nearest
Math.trunc(3.7); // 3 — removes decimal part
Math.pow(2, 3); // 8 — 2^3
Math.sqrt(16); // 4
Math.random(); // Random number between 0 and 1
// Random integer between min and max (inclusive)
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
Number Methods​
Number methods
parseInt("42"); // 42
parseFloat("3.14"); // 3.14
Number("42"); // 42
Number.isInteger(5); // true
Number.isNaN(NaN); // true
const num = 3.14159;
num.toFixed(2); // "3.14" — string with 2 decimal places
num.toPrecision(3); // "3.14" — string with 3 significant digits
Iteration Patterns​
For Loops​
Loop variations in JavaScript
const arr = [1, 2, 3, 4, 5];
// Traditional for loop
for (let i = 0; i < arr.length; i++) {
// arr[i]
}
// For...of (iterate values)
for (const val of arr) {
// val
}
// For...in (iterate indices/keys — avoid for arrays)
for (const key in obj) {
// key
}
// forEach (cannot break or return early)
arr.forEach((val, idx) => {
// val, idx
});