Skip to content

JavaScript Cheatsheet — Complete Quick Reference

DodaTech 3 min read

In this tutorial, you'll learn about JavaScript Cheatsheet. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

JavaScript syntax from ES6 onward: variables, arrays, objects, functions, classes, promises, DOM manipulation, and event handling — all in one compact page.

Variables

Keyword Scope Mutable Hoisted
var Function Yes Yes (undefined)
let Block Yes No (TDZ)
const Block No (reassign) No (TDZ)

Data Types

// Primitive: string, number, boolean, null, undefined, symbol, bigint
typeof "hi"   // "string"
typeof 42     // "number"
typeof true   // "boolean"
typeof null   // "object" (historical bug)

Arrays

const arr = [1, 2, 3];
arr.push(4); arr.pop(); arr.shift(); arr.unshift(0);
arr.map(x => x*2); arr.filter(x => x > 1);
arr.reduce((a, b) => a + b, 0);
arr.find(x => x === 2); arr.includes(3);
arr.slice(1, 3); arr.splice(1, 1);

Objects

const obj = { name: "JS", year: 1995 };
obj.name; obj["year"];
Object.keys(obj); Object.values(obj); Object.entries(obj);
const copy = { ...obj, extra: true };   // spread

Functions & Arrow Functions

function add(a, b = 0) { return a + b; }
const mul = (a, b) => a * b;            // arrow
const sq = x => x * x;                  // single param

Template Literals

const msg = `Hello ${name}, you are ${age}`;
const multiline = `line1
line2`;

Destructuring

const [a, b] = [1, 2];           // array
const { name, age } = person;    // object
const { name: fullName } = person; // rename

Error Handling

try {
  throw new Error("Something went wrong");
} catch (err) {
  console.error(err.message);
} finally {
  cleanup(); // always runs
}

// Custom errors
class ValidationError extends Error {
  constructor(msg) { super(msg); this.name = "ValidationError"; }
}

Spread & Rest

const merged = [...arr1, ...arr2];   // spread
const sum = (...nums) => nums.reduce((a,b)=>a+b); // rest

Classes

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} speaks`; }
  static create(name) { return new Animal(name); }
}

Promises & Async/Await

fetch(url)
  .then(res => res.json())
  .catch(err => console.error(err));

async function load() {
  try {
    const res = await fetch(url);
    const data = await res.json();
  } catch (err) { console.error(err); }
}

DOM Methods

document.querySelector(".class");        // first match
document.querySelectorAll("div");         // NodeList
document.getElementById("id");
el.textContent = "new text";
el.innerHTML = "<b>bold</b>";
el.style.color = "red";
el.classList.add("active");
el.setAttribute("data-id", "123");
document.createElement("div");
parent.appendChild(child);

Event Handling

el.addEventListener("click", (e) => {
  e.preventDefault();
  console.log(e.target);
});
// Common: click, submit, keydown, input, change, mouseover
What is the difference between `let` and `var`?

let is block-scoped (limited to {}) and is not hoisted to the top of its scope — accessing it before declaration throws a ReferenceError. var is function-scoped and hoisted with undefined. Prefer let in modern code.

What is the event loop in JavaScript?

The event loop allows JavaScript (single-threaded) to handle async operations. It continuously checks the call stack and callback queue — when the stack is empty, it pushes pending callbacks (like setTimeout or fetch responses) onto the stack for execution.

What does the spread operator do?

The spread operator (...) expands an iterable (array, object, string) into individual elements. Use it to copy arrays ([...arr]), merge objects ({...a, ...b}), or pass array elements as function arguments (Math.max(...nums))

See the full JavaScript guides for more depth.

← Previous Python Cheatsheet — Complete Quick Reference Next → Git Cheatsheet — Common Commands Quick Reference

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Cheatsheets