JavaScript
Cheat Sheet

ES6+, DOM manipulation, async/await, and modern patterns. From basics to advanced.

ES6+ Features

Arrow Functions

const add = (a, b) => a + b;
const square = x => x ** 2;

Destructuring

const { name, age } = person;
const [first, second] = array;

Template Literals

const msg = `Hello, ${name}!`;
const multi = `
  Line 1
  Line 2
`;

Arrays

Map, Filter, Reduce

const doubled = arr.map(x => x * 2);
const evens = arr.filter(x => x % 2 === 0);
const sum = arr.reduce((a, b) => a + b, 0);

Spread & Rest

const copy = [...arr];
const merged = [...arr1, ...arr2];
const sum = (...nums) => nums.reduce((a, b) => a + b);

DOM Manipulation

Selectors

document.getElementById('id');
document.querySelector('.class');
document.querySelectorAll('div');

Events

element.addEventListener('click', handler);
element.removeEventListener('click', handler);

Async/Await

Fetch API

async function getData() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

Error Handling

try {
  const data = await getData();
} catch (error) {
  console.error(error);
}

Download

Print this page or save as PDF for quick reference.

Tip: Use Ctrl+P (Cmd+P on Mac) to print or save as PDF.