JS Cheat Sheet for Reference & Interview Preparation

A practical JavaScript review guide for technical interviews and front-end development. It covers core language concepts, DOM manipulation, asynchronous programming, debugging, modern JavaScript, and small coding exercises.

Contents

• Core concepts
• Functions and scope
• Objects and arrays
• DOM manipulation
• Asynchronous JavaScript
• Error handling
• Testing and debugging
• Modern JavaScript
• Frameworks and libraries
• Coding challenge
• To-do list examples

Core concepts

Primitive data types

JavaScript has seven primitive data types:

• undefined
• null
• boolean
• number
• bigint
• string
• symbol

Variables

var legacyValue = 10;
let mutableValue = 20;
const fixedBinding = 30;

• var is function-scoped and can be reassigned.
• let is block-scoped and can be reassigned.
• const is block-scoped and cannot be reassigned after initialization.

const prevents reassignment of the binding; it does not make an object or array immutable.

Functions and scope

Function declaration

function greet(name) {
  return `Hello, ${name}!`;
}

Function expression

const greet = function (name) {
  return `Hello, ${name}!`;
};

Function declarations are hoisted with their bodies. A function expression follows the initialization rules of the variable that stores it and cannot be called before that initialization.

Lexical scope

Inner scopes can access variables declared in their outer scopes:

const outerValue = 10;

function showValues() {
  const innerValue = 20;
  console.log(outerValue);
  console.log(innerValue);
}

showValues();
console.log(outerValue);
// console.log(innerValue); // ReferenceError

Objects and arrays

Objects

const user = {};

user.name = "Alex";
user["role"] = "Developer";

Use dot notation for known property names and bracket notation for dynamic names or keys that are not valid identifiers.

Common array methods

const values = [1, 2, 3, 4];

values.push(5);    // Add to the end
values.pop();      // Remove from the end
values.shift();    // Remove from the beginning
values.unshift(1); // Add to the beginning

Also review map, filter, reduce, find, some, every, and includes.

DOM manipulation

Select an element

const element = document.querySelector(".my-class");
const form = document.getElementById("signup-form");

Add or remove classes

element.classList.add("is-active");
element.classList.remove("is-active");
element.classList.toggle("is-active");

Handle events

element.addEventListener("click", (event) => {
  console.log("Clicked", event.currentTarget);
});

form.addEventListener("submit", (event) => {
  event.preventDefault();
  // Process the form.
});

Asynchronous JavaScript

Event loop

JavaScript executes synchronous code on the call stack. The runtime schedules asynchronous work and queues callbacks. When the stack is empty, the event loop allows queued work to run. Promise callbacks use the microtask queue, which is processed before the next task queue item.

Promises

const request = new Promise((resolve, reject) => {
  const succeeded = true;

  if (succeeded) {
    resolve("Success!");
  } else {
    reject(new Error("Failure!"));
  }
});

request
  .then((message) => console.log(message))
  .catch((error) => console.error(error));

Async and await

async function loadData() {
  try {
    const result = await someAsyncFunction();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

An async function always returns a Promise. await pauses that function until the awaited Promise settles without blocking the JavaScript thread.

Error handling

Use throw to create an error condition and try...catch to handle errors:

function divide(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }

  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  console.error(error.message);
}

Testing and debugging

Useful browser debugging tools include:

• console.log, console.table, and console.error
• The debugger statement
• Breakpoints and watch expressions in browser DevTools
• Network, Performance, and Memory panels

Common JavaScript testing tools include Jest, Vitest, Mocha, Chai, Jasmine, Testing Library, Cypress, and Playwright.

Modern JavaScript

Arrow functions

const add = (a, b) => a + b;

Arrow functions use lexical this and do not have their own arguments object. They are not suitable as constructors.

Template literals

const name = "Alex";
const message = `Hello, ${name}!`;

Destructuring

const person = { name: "Alex", role: "Developer" };
const { name, role } = person;

const coordinates = [12, 24];
const [x, y] = coordinates;

Frameworks and libraries

Popular front-end choices include React, Vue, Svelte, and Angular. Interview discussions may cover:

• Component architecture
• State management
• Props and data flow
• Rendering and lifecycle behavior
• Forms and validation
• Routing
• Testing
• Performance and accessibility

Coding challenge

Highest product of three integers

The maximum product may come from either:

1. The three largest values.
2. The two smallest values and the largest value.

function maxProductOfThree(numbers) {
  if (numbers.length < 3) {
    throw new Error("At least three numbers are required");
  }

  const sorted = [...numbers].sort((a, b) => a - b);
  const last = sorted.length - 1;

  return Math.max(
    sorted[last] * sorted[last - 1] * sorted[last - 2],
    sorted[0] * sorted[1] * sorted[last],
  );
}

This version copies the input before sorting so the original array is not mutated.

To-do list examples

React

import { useState } from "react";

export default function TodoList() {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState("");

  function addTodo() {
    const trimmedTask = task.trim();
    if (!trimmedTask) return;

    setTodos((current) => [
      ...current,
      { id: crypto.randomUUID(), text: trimmedTask },
    ]);
    setTask("");
  }

  return (
    <div>
      <input
        type="text"
        value={task}
        onChange={(event) => setTask(event.target.value)}
      />
      <button type="button" onClick={addTodo}>
        Add
      </button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

Vanilla JavaScript

<label for="task">Task</label>
<input type="text" id="task" />
<button type="button" id="add-task">Add</button>
<ul id="todo-list"></ul>

<script>
  const input = document.getElementById("task");
  const button = document.getElementById("add-task");
  const list = document.getElementById("todo-list");

  button.addEventListener("click", () => {
    const task = input.value.trim();
    if (!task) return;

    const item = document.createElement("li");
    item.textContent = task;
    list.appendChild(item);
    input.value = "";
    input.focus();
  });
</script>

Svelte

<script>
  let todos = [];
  let task = "";

  function addTodo() {
    const trimmedTask = task.trim();
    if (!trimmedTask) return;

    todos = [
      ...todos,
      { id: crypto.randomUUID(), text: trimmedTask },
    ];
    task = "";
  }
</script>

<label for="task">Task</label>
<input id="task" bind:value={task} />
<button type="button" on:click={addTodo}>Add</button>

<ul>
  {#each todos as todo (todo.id)}
    <li>{todo.text}</li>
  {/each}
</ul>

Study tips

• Explain each concept in your own words.
• Predict code output before running it.
• Practice solving problems without mutating inputs unless required.
• Be ready to discuss trade-offs, edge cases, complexity, and accessibility.
• Build small projects that combine DOM events, state, async data, and error handling.

License

This cheat sheet is intended for personal learning and interview preparation.