Merges two or more arrays into a new array without mutation.

const arr1 = [1, 2];
arr1.concat([3, 4]); // [1, 2, 3, 4]

Copies or combines arrays cleanly without mutation.

const a = [1, 2];
const b = [...a, 3];               // [1, 2, 3]
const merged = [...a, ...b, ...c]; // all combined

Copies a whole array or a portion without mutating the source.

const arr = [1, 2, 3, 4];
arr.slice(1, 3); // [2, 3]

Builds a new array from arguments, even a single number.

Array.of(7); // [7]
Array(7);    // empty array with length 7

Returns the first element matching a condition, or undefined.

users.find(u => u.id === 1); // {id: 1, ...}

Returns the index of the first match, or -1 if not found.

users.findIndex(u => u.id === 1); // 0

Returns true if the exact value exists in the array.

['read', 'write'].includes('write'); // true

Returns true if at least one element passes the test.

users.some(u => u.isAdmin); // true or false

Returns true only if all elements pass the test.

tasks.every(t => t.done); // true or false

Collapses nested arrays one level deep; pass a depth to go deeper.

const nested = [1, [2, [3]]];
nested.flat();   // [1, 2, [3]]
nested.flat(2);  // [1, 2, 3]

Maps over items and flattens the result one level in a single pass.

const words = ['hi there', 'foo bar'];
words.flatMap(s => s.split(' '));
// ['hi', 'there', 'foo', 'bar']

Accesses an element by index; negative values count from the end.

const arr = [10, 20, 30, 40];
arr.at(0);  // 10
arr.at(-1); // 40

Overwrites a range of elements with a static value in place.

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3); // [1, 0, 0, 4, 5]

Safely checks whether a value is an array at runtime.

Array.isArray([1, 2]); // true
Array.isArray('abc'); // false

Drop the parentheses when the function takes exactly one parameter.

const double = n => n * 2;
double(4); // 8

Wrap parameters in parentheses when the function takes two or more.

const multiply = (a, b) => a * b;
multiply(2, 5); // 10

Use empty parentheses when the function takes no parameters at all.

const greet = () => 'Hello!';
greet(); // "Hello!"

Arrow functions are anonymous and are usually assigned to a variable.

const handlers = [];
handlers.push(() => console.log('clicked'));

Assign arrow functions with `const` to prevent accidental, silent reassignment.

const sayHi = () => 'Hi';
sayHi = () => 'Yo'; // throws TypeError

Most real-world arrow functions live inside `.then()`, `.catch()`, or async wrappers.

fetch('/api/user')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Run independent async calls together and destructure results once every promise resolves.

const loadDashboard = async () => {
  const [users, posts] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
  ]);
};

Use an arrow function as the body of an async function for compact definitions.

const getUser = async (id) => {
  const res = await fetch(`/users/${id}`);
  return res.json();
};

Run an async arrow immediately when you need `await` outside any named function.

(async () => {
  const data = await fetchDashboardStats();
  console.log(data);
})();

Wrap `await` calls in `try/catch` to handle rejected promises inside async arrows.

const loadUser = async (id) => {
  try {
    const res = await fetch(`/users/${id}`);
    return await res.json();
  } catch (err) {
    console.error('Failed to load user', err);
  }
};

Arrow functions have no `arguments` object; use rest parameters to collect arguments instead.

function legacyLogger() {
  return arguments.length;
}
const modernLogger = (...args) => args.length;

Arrow functions cannot be used as constructors with the `new` keyword.

const Person = (name) => { this.name = name; };
new Person('Alex'); // throws: not a constructor

Arrow functions cannot be used as generator functions with `yield`.

function* range(n) {
  for (let i = 0; i < n; i++) yield i;
}
[...range(3)]; // [0, 1, 2]

Arrow functions have no `prototype` property, since they can never act as constructors.

const Greeter = () => {};
Greeter.prototype; // undefined

The Date constructor accepts four different argument shapes for creating dates.

const now = new Date();

Pass a timestamp in milliseconds to create a date from a number.

const fromMs = new Date(1697040000000);

Pass a date string to parse a specific date in standard format.

const d = new Date("2025-10-11");

Pass year, month (zero-indexed), day, and time parts to build a custom date.

const custom = new Date(2025, 9, 11, 15, 30);

Detects an invalid date by testing whether getTime() returns NaN.

Number.isNaN(d.getTime()); // true if invalid

Every setter mutates the original Date object in place — there's no immutable version.

const date = new Date();
date.setFullYear(2026);

Changes the month in place, again starting counting from zero.

date.setMonth(0); // January

Changes the day of the month, rolling over into next month.

date.setDate(1);

Use extra arguments to set minutes and seconds at the same time.

date.setHours(12, 0, 0);

Sets the entire date at once from a millisecond timestamp value.

date.setTime(0); // Jan 1, 1970 UTC

Formats a date for machines, always returning UTC in a sortable format.

now.toISOString();
// "2025-10-11T00:00:00.000Z"

Formats the date for the user's region for a human-readable display.

now.toLocaleDateString();

Read the current date and add to it to shift by any number of days.

const today = new Date();
today.setDate(today.getDate() + 5);

Subtract two dates to get the difference in milliseconds between them.

const diffMs = date1 - date2; // milliseconds

Convert milliseconds into days or hours using simple division for clarity.

const hrs = ms / (1000 * 60 * 60);

The obvious choice, but several other console methods solve specific logging problems faster.

console.log('user:', user);

Label your logs by passing a string prefix as the first argument.

console.log('typeof myVar:', typeof myVar);

Displays an array of objects as a clean, scannable table instead of logs.

console.table(users);

Combine multiple values in one log call to compare them side by side.

console.log('before:', before, 'after:', after);

Embeds an inspectable object directly inside a formatted log string.

console.log('user: %o', user);

Most "why is this undefined" bugs resolve faster with a strict equality check.

console.log(myVar === undefined);

Log a fallback when values are missing using the ?? operator.

console.log(myVar ?? 'fallback');

Detect any falsy value with a simple negation check inside an if.

if (!myVar) console.log('Falsy!');

Use typeof when results seem off, to confirm the value's data type.

typeof 'hi' === 'string'; // true

Checks for NaN without the risky type coercion of the global isNaN().

Number.isNaN(NaN);  // true
Number.isNaN('x');  // false

A matching label is the only thing connecting console.time() to its console.timeEnd().

console.time('label');
// code here
console.timeEnd('label');

Nests related log messages in a collapsible group for easier scanning.

console.group('info');
// related logs...
console.groupEnd();

Wrap risky code in a try...catch block to handle errors safely.

try {
  riskyFunction();
} catch (e) {
  console.error('Error:', e.message);
}

Prints errors in red with a full, clickable stack trace attached.

console.error('Failed to save:', err);

Flags non-fatal issues in yellow so they still catch your eye.

console.warn('Approaching API rate limit');

Extract properties from an object into separate variables.

const user = { name: "Alice", age: 30 };
const { name, age } = user;
console.log(name); // "Alice"

Property names must match the object keys exactly.

const { name, email } = user;
// name is available, but email is undefined

Destructure only the properties you need from an object.

const { name } = user;
// age is not extracted

Use shorter or clearer variable names with renaming.

const { name: userName, age: userAge } = user;

Destructure nested objects by continuing the pattern.

const user = { profile: { name: "Alice" } };
const { profile: { name } } = user;

Provide default values for properties that might be missing.

const { name = "Guest", email = "no-email" } = {};
console.log(name); // "Guest"

Defaults work with both objects and arrays.

const [first = "a", second = "b"] = [];
// first = "a", second = "b"

Defaults are used only if the value is undefined, not falsy.

const { count = 0 } = { count: false };
// count = false, not 0

Use defaults with function parameters for required values.

function greet({ name = "Guest" } = {}) {
  console.log(`Hello ${name}`);
}
greet(); // "Hello Guest"

Combine renaming and defaults in one destructuring expression.

const { name: userName = "Anonymous", age: userAge = 0 } = {};
console.log(userName); // "Anonymous"
console.log(userAge);  // 0

Extract a property using a dynamic key with computed property names.

const key = "name";
const { [key]: value } = { name: "Alice" };

Extract named properties and collect the rest into a new object.

const { name, ...rest } = { name: "Alice", age: 30, city: "NYC" };
// rest = { age: 30, city: "NYC" }

Rename multiple properties and set defaults in the same pattern.

const { name: n = "Guest", age: a = 0 } = user;

Destructure deeply nested paths with renaming in a single expression.

const {
  profile: {
    contact: { email }
  }
} = user;

Faster than querySelector, but only matches elements by their unique ID.

const title = document.getElementById('title');

Finds the first element that matches any valid CSS selector.

const btn = document.querySelector('.btn');

Gets every matching element as a static NodeList for looping.

const els = document.querySelectorAll('.item');

NodeLists support forEach, but use Array.from() for full array methods.

Array.from(items).map(el => el.textContent);

Cache repeated selections in a variable to keep your code fast.

const btn = document.querySelector('.btn');

Work well for one-off changes, but classList methods scale better overall.

btn.style.backgroundColor = 'tomato';

Adds a CSS class to the element for cleaner styling control.

btn.classList.add('active');

Toggles a class on and off with a single method call.

btn.classList.toggle('highlight');

Removes a class when the state changes back to normal.

btn.classList.remove('active');

Checks whether an element currently has a given class applied.

btn.classList.contains('active');

Accesses the direct parent of the current element, or null.

const parent = btn.parentElement;

Accesses all direct children of an element as a live HTMLCollection.

const items = list.children; // live collection

Move to the next or previous sibling at the same level.

const next = el.nextElementSibling;
const prev = el.previousElementSibling;

Finds the nearest matching ancestor starting from any element, or null.

const card = btn.closest('.card');

Checks whether one element is a descendant of another, anywhere in the tree.

document.body.contains(btn); // true or false

Runs a block of code a set number of times using an initialized counter.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Repeatedly executes a block of code as long as a specified condition remains true.

let n = 0;
while (n < 3) {
  console.log(n);
  n++;
}

Runs a block of code once before checking if the loop condition is true.

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);

Use break to exit a loop immediately and continue to skip the current iteration.

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  if (i === 4) break;
  console.log(i);
}

Iterates over the enumerable string property keys of an object.

const user = { name: "Ada", age: 30 };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Filters out inherited properties to iterate only the object's own direct properties.

for (const key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(key);
  }
}

Converts object properties into key-value arrays for cleaner, modern iteration.

const user = { name: "Ada", age: 30 };
for (const [key, val] of Object.entries(user)) {
  console.log(`${key}: ${val}`);
}

Runs a loop inside another loop; plain break only escapes the inner loop.

for (let i = 0; i < 2; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(`${i},${j}`);
  }
}

Exits multiple levels of nesting at once by referencing a statement label.

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1) break outer;
  }
}

Cache array length before the loop to avoid querying it on every iteration.

const len = items.length;
for (let i = 0; i < len; i++) {
  console.log(items[i]);
}

Builds an object directly from comma-separated key-value pairs in one line.

const user = { name: 'Ava', age: 28 };

Defines a reusable blueprint with shared methods and a constructor.

class User {
  constructor(name) { this.name = name; }
}

Creates an object that inherits directly from a given prototype object.

const proto = { greet() { return 'Hi!'; } };
const user = Object.create(proto);

Sets a dynamic key name using bracket syntax inside an object literal.

const key = 'role';
const user = { [key]: 'admin' };

Returns an array of an object's own enumerable property names.

Object.keys({ a: 1, b: 2 }); // ['a', 'b']

Returns an array of just the object's own property values.

Object.values({ a: 1, b: 2 }); // [1, 2]

Returns an array of [key, value] pairs for looping or transforms.

Object.entries({ a: 1 }); // [['a', 1]]

Loops over enumerable keys, including any inherited from the prototype.

for (const key in user) {
  console.log(key);
}

Checks whether an object owns a given key, ignoring inherited ones.

Object.hasOwn(user, 'name'); // true

Merges objects into a new one; later keys overwrite earlier matches.

const merged = { ...base, ...extra };

Merges source properties directly into an existing target object in place.

Object.assign(base, extra); // mutates base

Builds an object from an array of [key, value] pairs for fast lookups.

const map = Object.fromEntries(
  users.map(u => [u.id, u])
);

Converts an object back into an array to transform or filter it.

Object.entries(user).map(([k, v]) => `${k}:${v}`);

A browser storage object that persists key-value data indefinitely with no expiration date.

localStorage.setItem("username", "Alice");
const name = localStorage.getItem("username");

Deletes a specific key-value pair from storage by providing the key name.

localStorage.removeItem("username");

Wipes all stored key-value data for the current domain origin at once.

localStorage.clear();

Checks if a specific storage key exists in the storage object dictionary.

if ("username" in localStorage) {
  console.log("Key exists!");
}

Serializes objects or arrays into strings before saving them to browser storage.

const user = { name: "Alice", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

Deserializes stored JSON strings back into usable JavaScript objects or arrays.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Alice"

Wraps JSON parsing in try-catch blocks to prevent crashes on invalid data formats.

try {
  const user = JSON.parse(localStorage.getItem("user"));
} catch (e) {
  console.error("Invalid JSON stored");
}

Catches browser storage limit exceptions to avoid crashing applications when disk space runs out.

try {
  localStorage.setItem("key", largeData);
} catch (e) {
  if (e.name === "QuotaExceededError") {
    console.warn("Storage limit exceeded!");
  }
}

Prefixes storage keys to prevent overlap conflicts with other third-party scripts.

localStorage.setItem("myApp_theme", "dark");
localStorage.setItem("myApp_lang", "en");

Avoids storing sensitive authentication tokens, passwords, or personal data in plaintext storage.

// Avoid storing JWTs in localStorage
// Secure: use HTTP-only, secure cookies instead

Extracts a section of a string and returns it as a new string.

const text = "Hello World";
const res = text.slice(0, 5); // "Hello"
const word = text.slice(-5);  // "World"

Extracts characters between two indices, treating negative index numbers as zero.

const text = "Hello";
const res = text.substring(1, 4); // "ell"

Extracts a substring starting at an index for a specified character length.

const text = "Hello";
const res = text.substr(1, 3); // "ell"

Replaces the first match of a substring or regular expression pattern.

const text = "hello world";
text.replace("world", "there"); // "hello there"

Replaces all occurrences of a literal substring or global regex pattern.

const text = "hello hello";
text.replaceAll("hello", "hi"); // "hi hi"

Transforms all characters in a string to uppercase or lowercase forms.

const text = "Hello";
text.toUpperCase(); // "HELLO"
text.toLowerCase(); // "hello"

Uses a replacement function to compute custom replacements for each match.

const text = "hello world";
const title = text.replace(
  /\b\w/g,
  ch => ch.toUpperCase()
);
// "Hello World"

Removes whitespace characters from both the beginning and end of strings.

const text = "  hello  ";
text.trim(); // "hello"

Removes whitespace characters only from the beginning of a string.

const text = "  hello";
text.trimStart(); // "hello"

Pads the current string from the start with a given fill character.

const text = "5";
text.padStart(3, "0"); // "005"

Returns a new string containing the specified number of concatenated copies.

const text = "-";
text.repeat(10); // "----------"

Creates template literals using backticks instead of single or double quotes.

const text = `Hello, world!`;

Writes strings across multiple lines without using string concatenation or escape characters.

const poem = `Roses are red
Violets are blue`;

Preserves any newlines and indentation inside the template literal body automatically.

const raw = `
  Indented Line
`;

Builds complex multiline HTML string blocks with clean formatting and indentation.

const html = `
  <div class="card">
    <h2>${title}</h2>
  </div>
`;

Trims leading and trailing whitespace from the resulting multiline output string.

const html = `
  <div>${content}</div>
`.trim();

Intercepts the template string components and interpolated values using a prefix function.

function tag(strings, ...values) {
  return strings[0] + values[0];
}
const res = tag`Hi ${name}`;

Inspects and sanitizes string values before returning the final formatted output.

function clean(strings, ...values) {
  return values.map(v => String(v).trim());
}

Defines styling or markup templates using tagged template literals.

const styles = css`
  color: ${color};
  font-size: 14px;
`;

Catches errors thrown during asynchronous operations when combined with await.