JavaScript Cheat Sheet: Full Guide

Supercharge your web development with our ultimate JavaScript Cheat Sheet! If you are just starting your coding journey or you’re a seasoned developer needing a quick, reliable reference, this guide has you covered. Packed with essential JavaScript syntax, cutting-edge ES6+ features, DOM manipulation techniques, asynchronous programming patterns, and practical examples, this JavaScript cheat sheet is designed to skyrocket your productivity. Master variables, functions, arrays, objects, and more with clear, concise tips tailored for web developers. Dive into JavaScript today, streamline your coding workflow, and take your web development skills to the next level!

Also, This JavaScript Cheat Sheet provides a quick reference for essential concepts, syntax, and common tasks in JavaScript. It’s designed for beginners and experienced developers. Although, If you want to learn JavaScript in just 21 Days then go with our Free Javascript Course With Certificate.

Table of Contents

• Basics
• Variables and Data Types
• Operators
• Control Structures
• Functions
• Arrays
• Objects
• Loops
• DOM Manipulation
• ES6+ Features
• Error Handling
• Asynchronous JavaScript
• Common Built-in Methods

1. Basics

JavaScript, or JS, is the powerhouse behind interactive web pages—it’s a high-level, interpreted scripting language primarily used client-side but also server-side with Node.js. It’s dynamically typed, prototype-based, and supports functional programming, making it flexible but sometimes tricky with quirks like hoisting or the event loop.

JS runs in the browser as single-threaded, handling one task at a time, but offloads blocking operations to the browser’s API for non-blocking behavior. The execution context—global and function scopes—defines where code runs, managed by the call stack, which pushes and pops frames as functions are invoked.

• Syntax Fundamentals: JS uses curly braces for blocks, semicolons to end statements (though optional due to Automatic Semicolon Insertion, which can cause issues in patterns like IIFE). Comments are // for single-line and /* */ for multi-line. It’s case-sensitive, so Variable ≠ variable.
• The Role of the Engine: Engines like V8 (Chrome/Node) or SpiderMonkey (Firefox) parse, compile (just-in-time), and optimize code. They handle lexical scoping, where variables are accessible within their declared scope and inner ones.
• Console and Debugging: console.log() is your go-to for outputting values. For deeper debugging, console.table() displays objects/arrays clearly, and console.trace() shows stack traces—great for tracing execution in complex apps.
• Strict Mode: Use 'use strict'; at the top of scripts or functions to catch issues like undeclared variables or duplicate parameters, enforcing better practices and preventing accidental globals.

This foundation ensures everything else builds smoothly—without grasping the execution model, async concepts later can feel chaotic.

2. Variables and Data Types

Variables are declared with var, let, or const, each with nuances. var is function-scoped and hoisted (declared at the top of its scope but initialized as undefined), which can lead to odd behaviors like accessing before declaration. let and const are block-scoped (only within {} blocks) and throw a Temporal Dead Zone error if accessed before declaration.

JS has seven primitives—undefined, null, boolean, number, bigint, string, symbol—and objects (including arrays and functions). Primitives are immutable; objects are mutable references.

• Declaration and Scope: const prevents reassignment but allows object mutation (e.g., const arr = []; arr.push(1); works). Block scope is ideal for loops or conditionals—let i in a for-loop doesn’t leak like var.
• Type Coercion: JS’s loose typing causes implicit conversions, like 1 + '2' becoming '12'. Use === for strict equality to avoid surprises. typeof reveals types, but typeof null returning 'object' is a historical bug.
• BigInt and Symbol: BigInt (e.g., 123n) handles numbers beyond Number.MAX_SAFE_INTEGER. Symbols create unique object keys, ideal for private-like properties before ES2022 private fields.
• Memory Management: Primitives live on the stack, objects on the heap. Garbage collection via mark-and-sweep is efficient, but closures holding large objects can cause memory leaks.

Variables showcase JS’s dynamic nature, but require care to avoid bugs.

3. Operators

Operators handle arithmetic, comparison, logical operations, and more. Their precedence and associativity can cause errors if you chain without parentheses.

Arithmetic: +, -, *, /, % (modulo), ** (exponentiation, ES6). Unary ++/-- for increment/decrement. Assignment operators like += combine operations. Comparison: == (loose, coerces), === (strict), >, <, etc. Logical: && (short-circuits), || (short-circuits), ! (negation). Nullish coalescing ?? (ES2020) defaults only for null/undefined: value ?? 'default'.

• Bitwise Operators: &, |, ^, ~, <<, >>, >>>. Useful for flags or low-level ops like permission bitmasks. Numbers coerce to 32-bit integers.
• Ternary and Comma: condition ? trueVal : falseVal for concise if-else. The comma operator , evaluates multiple expressions but returns the last—handy in for-loops for multi-initialization.
• Destructuring Assignment: const {a, b} = obj; unpacks elegantly.
• Precedence Pitfalls: * precedes +, but logical operators evaluate left-to-right. Test chains like a && b || c, as short-circuiting can surprise.

Operators make JS expressive, but mastering coercion ensures predictability.

4. Control Structures

Control flow dictates execution order. JS’s structures resemble C-like languages but have truthy/falsy quirks.

If-else: if (condition) {} else {}. Switch uses strict equality with fall-through unless break is used. Truthy/falsy: Empty string, 0, NaN, null, undefined are falsy; others are truthy.

• Truthy/Falsy Nuances: [] and {} are truthy, even empty. !!value coerces to boolean for explicit checks.
• Switch Enhancements: ES2022 allows explicit fall-through with continue, but defaults to break. Use objects or Maps for complex branching to avoid long switches.
• Conditional Chaining: Optional chaining ?. (ES2020) prevents errors on null/undefined: obj?.prop?.method().
• Performance Note: Switch can outperform if-else chains for many cases due to engine jump tables.

These keep code readable, but over-nesting calls for function refactoring.

5. Functions

Functions are first-class citizens—assignable, passable, returnable. Declare with function name() {}, expressions like const fn = function() {}, or arrow functions () => {} (ES6, concise, no own this).

Function declarations hoist fully; expressions don’t. Closures capture outer scope, enabling modules or currying.

• Parameters and Arguments: Default params function(a = 1) {}, rest ...args for variadics. Destructuring: function({x, y}) {}.
• Arrow Functions: Lexical this, no arguments object (use rest). Ideal for callbacks, but avoid in constructors or dynamic this contexts.
• IIFE and Scope: Immediately Invoked: (function() {})(); for private scopes. Modern block scopes often suffice.
• Higher-Order Functions: Like map, filter—create your own, e.g., curried add: function add(a) { return b => a + b; }.
• Generator Functions: function* gen() { yield 1; } for iterables, pausing execution—powers async iterators.

Functions drive JS’s functional side; master them for modular code.

6. Arrays

Arrays are objects with numeric keys, dynamically sized. Created as [] or new Array(). They’re sparse, so arr[100] = 1 creates gaps.

• Mutating methods: push, pop, shift, unshift; non-mutating: slice, concat. Iteration: forEach, map, filter, reduce—functional powerhouses.
• Indexing and Length: length auto-updates but can truncate if set. Negative indices via arr.at(-1) (ES2022).
• Multidimensional: arr[0] = [1,2]; works, but typed arrays like Float32Array boost performance for matrices.
• Array-Like Objects: arguments or NodeList—convert with Array.from() or [...args].
• Common Patterns: Flatten with flat() or reduce. Unique values via new Set(arr).
• Performance: Avoid for-in on arrays (it’s for properties); use for-of or indices for speed.

Arrays power data manipulation; their methods make iteration a breeze.

7. Objects

Objects are key-value stores, insertion-order preserved since ES2015. Use literals { key: value } or new Object().

Access via dot . or bracket ['key'] notation. Enumerable via for-in, own via hasOwnProperty.

• Prototypes: Objects link to Object.prototype. Inherit via Object.create(proto) or classes (ES6).
• Getters/Setters: get prop() {} for computed values, with validation in setters.
• Property Descriptors: Object.defineProperty(obj, 'key', { writable: false }) for fine control.
• Shallow vs Deep Clone: {...obj} is shallow; deep cloning needs recursion or libraries.
• Symbols as Keys: let sym = Symbol('desc'); obj[sym] = val; hides from enumeration.
• JSON Handling: JSON.stringify drops functions/undefined; parse carefully.

Objects are JS’s data structure backbone—flexible but watch the prototype chain.

8. Loops

Loops repeat code efficiently. For: for (let i=0; i

Break/continue control flow; labeled loops handle nested breaks.

• For vs For-Of: For-of uses iterators, handles non-numeric keys better; avoids length recalculation issues.
• While Patterns: Do-while runs at least once—great for menus. Infinite loops use while(true) with break.
• Performance: Reverse for-loops (i--) can be faster for push-heavy ops. forEach/map are clearer but slower.
• ES6 Destructuring in For-Of: for (const [k,v] of map) {} for entries.
• Avoiding Pitfalls: var in loops causes closure issues; use let/const. Mutating during iteration? Use indices carefully.

Choose loops based on data type for efficiency and clarity.

9. DOM Manipulation

The DOM (Document Object Model) is HTML’s tree structure, accessed via the document global. Select with getElementById, querySelector (CSS selectors).

Manipulate: createElement, appendChild, removeChild. Attributes: setAttribute or direct elem.id = 'new'. Events: addEventListener('click', handler)—handles bubbling/capturing.

• Traversal: parentNode, children, querySelectorAll returns NodeList (array-like).
• Modern Methods: classList.add/remove/toggle, textContent safer than innerHTML (avoids XSS).
• Event Handling: Delegation uses one listener on a parent for dynamic children. Use event.preventDefault(), event.stopPropagation().
• Virtual DOM Insight: React abstracts DOM, but native knowledge helps debug performance—batch updates with requestAnimationFrame.
• Shadow DOM: attachShadow({mode: 'open'}) for encapsulated web components.

DOM makes pages interactive; query efficiently to avoid reflows.

10. ES6+ Features

ES6 (2015) transformed JS with let/const, arrows, classes, modules. Later additions: async/await (ES2017), optional chaining (2020), top-level await (2022).

Modules: import/export for organization—export default fn; import fn from './mod'.

• Destructuring: Arrays [a,b] = arr;, objects {x} = obj;. Rest/spread ... for partials.
• Template Literals: `Hello ${name}` for multiline, interpolated strings.
• Classes: class MyClass { constructor() {} method() {} }—extends, super, statics.
• Promises and Async: Built on callbacks, async function() { await promise; } is cleaner.
• New Arrays/Objects: Object.entries, Array.includes, Map/Set for better collections.

ES6+ makes JS modern and scalable—adopt for cleaner code.

11. Error Handling

Errors: Syntax (parse-time), Runtime (ReferenceError, TypeError). Throw custom errors: throw new Error('message').

Try-catch-finally: try {} catch(e) {} finally {}—finally always runs.

• Error Object: Access error message and stack trace. Extend: class CustomError extends Error {}.
• Async Errors: Promises use .catch(); async/await uses try-catch.
• Global Handlers: window.onerror for uncaught errors, unhandledrejection for promises.
• Best Practices: Validate inputs early, use specific catches: catch (TypeError e) {}. Log with console or tools like Sentry.
• Debugging: Source maps for minified code, breakpoints in devtools.

Handle errors to prevent crashes and ease debugging.

12. Asynchronous JavaScript

JS’s async model is single-threaded but non-blocking via the event loop. Callbacks evolved into Promises (resolve/reject), then async/await.

Event loop: When the call stack is empty, microtasks (Promises) run, then macrotasks (setTimeout).

• Callbacks Hell: Nested callbacks—avoid with named functions.
• Promises: new Promise((res, rej) => {}). Chain .then().catch(). Static Promise.all, race, allSettled.
• Async/Await: await pauses function, not thread. Errors are thrown—use try-catch.
• Generators + Promises: Co-routines preceded async/await.
• Web APIs: Fetch for HTTP, setTimeout for delays—queue tasks.

Master async for responsive apps; understand the event loop to debug stalls.

13. Common Built-in Methods

Built-ins: Math.random(), Date.now(), String.prototype.split(), etc. Globals like parseInt, encodeURI.

• String Methods: includes, startsWith, replace(/regex/, ''), trim().
• Array Prototypes: find, some, every, sort((a,b)=>a-b).
• Object Statics: assign, keys, values, fromEntries.
• Math and Number: Math.floor, Number.isNaN, parseFloat.
• Global Utils: setInterval, JSON.parse/stringify, btoa/atob for base64.
• Regex: /pattern/.test(str), match, exec—flags like g, i.

These methods speed up development; chain like arr.filter().map().reduce() for efficient pipelines.

All Examples

// Single-line comment
/* Multi-line
   comment */
    

console.log("Hello, World!"); // Output to console
console.error("Error message"); // Error log
console.warn("Warning message"); // Warning log
    

let x = 10; // Block-scoped, reassignable
const y = 20; // Block-scoped, non-reassignable
var z = 30; // Function-scoped, avoid in modern JS
    

let num = 42; // Number
let str = "Hello"; // String
let bool = true; // Boolean
let nul = null; // Null
let und; // Undefined
let sym = Symbol("id"); // Symbol
let obj = { key: "value" }; // Object
    

let a = 10, b = 5;
console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0
console.log(a ** b); // 100000 (exponentiation)
    

console.log(a == b); // false (loose equality)
console.log(a === b); // false (strict equality)
console.log(a != b); // true
console.log(a > b); // true
console.log(a <= b); // false
    

let x = true, y = false;
console.log(x && y); // false (AND)
console.log(x || y); // true (OR)
console.log(!x); // false (NOT)
    

if (condition) {
  // code
} else if (anotherCondition) {
  // code
} else {
  // code
}

// Ternary Operator
let result = condition ? valueIfTrue : valueIfFalse;
    

switch (value) {
  case 1:
    // code
    break;
  case 2:
    // code
    break;
  default:
    // code
}
    

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

const sayHello = (name) => `Hello, ${name}!`;
    

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

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6
    

let arr = [1, 2, 3, 4];
console.log(arr[0]); // 1
arr.push(5); // Add to end
arr.pop(); // Remove from end
arr.shift(); // Remove from start
arr.unshift(0); // Add to start
    

arr.map(x => x * 2); // [2, 4, 6, 8]
arr.filter(x => x > 2); // [3, 4]
arr.find(x => x > 2); // 3
arr.reduce((acc, curr) => acc + curr, 0); // 10
arr.forEach(x => console.log(x)); // Logs each element
    

let obj = {
  name: "John",
  age: 30
};
console.log(obj.name); // John
console.log(obj["age"]); // 30
    

let person = {
  name: "John",
  greet() {
    return `Hi, I'm ${this.name}`;
  }
};
console.log(person.greet()); // Hi, I'm John
    

const { name, age } = person;
console.log(name, age); // John, 30
    

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}
    

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

for (let value of arr) {
  console.log(value); // Iterates over array values
}
    

for (let key in obj) {
  console.log(key, obj[key]); // Iterates over object keys
}
    

document.getElementById("id"); // By ID
document.querySelector(".class"); // By CSS selector
document.querySelectorAll("p"); // All matching elements
    

let el = document.getElementById("myId");
el.textContent = "New text"; // Change text
el.style.color = "blue"; // Change style
el.classList.add("newClass"); // Add class
    

el.addEventListener("click", () => {
  console.log("Clicked!");
});
    

let x = 10; // Block-scoped
const y = 20; // Block-scoped, constant
    

let name = "John";
console.log(`Hello, ${name}!`); // Hello, John!
    

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

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
let obj1 = { a: 1 };
let obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }
    

let [a, b] = [1, 2]; // Array destructuring
let { x, y } = { x: 10, y: 20 }; // Object destructuring
    

try {
  throw new Error("Something went wrong!");
} catch (error) {
  console.error(error.message);
} finally {
  console.log("This runs regardless");
}
    

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done!"), 1000);
});
promise.then(result => console.log(result)); // Done!
    

async function fetchData() {
  try {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}
    

setTimeout(() => console.log("Delayed!"), 1000);
setInterval(() => console.log("Every second"), 1000);
    

let str = "Hello, World!";
str.toUpperCase(); // HELLO, WORLD!
str.toLowerCase(); // hello, world!
str.split(","); // ["Hello", " World!"]
str.trim(); // Removes whitespace
str.includes("World"); // true
    

Math.random(); // Random number between 0 and 1
Math.floor(3.7); // 3
Math.ceil(3.2); // 4
Math.round(3.5); // 4
Math.max(1, 2, 3); // 3
    

let date = new Date();
date.getFullYear(); // Current year
date.getMonth(); // 0-11 (January i 0)
date.getDate(); // Day of the month
date.toISOString(); // ISO format string
    

Conclusion

Take our Javascript skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE