⚡ JavaScript Programming Language

Quick Reference & Cheat Sheet - Built-in Functions, Syntax & Web APIs

Basic Syntax

Variables & Constants

// Variable declarations var oldStyle = "function-scoped"; let blockScoped = "block-scoped"; const constant = "cannot be reassigned"; // Multiple declarations let x = 1, y = 2, z = 3; // Destructuring assignment const [a, b, c] = [1, 2, 3]; const {name, age} = {name: "John", age: 30}; // Template literals const message = `Hello, ${name}! You are ${age} years old.`;

Data Types

// Primitive types let string = "Hello World"; let number = 42; let bigint = 123n; let boolean = true; let undefined_var; let null_var = null; let symbol = Symbol("id"); // Objects let object = {key: "value"}; let array = [1, 2, 3]; let func = function() {}; // Type checking typeof variable; Array.isArray(variable); variable instanceof Constructor;

Operators

// Arithmetic + - * / % ** // Assignment = += -= *= /= %= **= // Comparison == === != !== < > <= >= // Logical && || ! // Bitwise & | ^ ~ << >> >>> // Ternary condition ? valueIfTrue : valueIfFalse // Nullish coalescing value ?? defaultValue // Optional chaining object?.property?.method?.()

Control Structures

Conditionals

// If statement if (condition) { // code } else if (anotherCondition) { // code } else { // code } // Switch statement switch (value) { case 'option1': // code break; case 'option2': case 'option3': // code for option2 or option3 break; default: // default code }

Loops

// For loop for (let i = 0; i < 10; i++) { console.log(i); } // For...in loop (object properties) for (let key in object) { console.log(key, object[key]); } // For...of loop (iterable values) for (let value of array) { console.log(value); } // While loop while (condition) { // code } // Do-while loop do { // code } while (condition); // Break and continue break; // exit loop continue; // skip to next iteration

Functions

Function Declaration & Expression

// Function declaration function greet(name) { return `Hello, ${name}!`; } // Function expression const greet = function(name) { return `Hello, ${name}!`; }; // Arrow functions const greet = (name) => `Hello, ${name}!`; const add = (a, b) => a + b; const multiply = (a, b) => { return a * b; }; // Default parameters function greet(name = "World") { return `Hello, ${name}!`; } // Rest parameters function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); } // Destructuring parameters function greet({name, age}) { return `Hello, ${name}! You are ${age} years old.`; }

Higher-Order Functions

// Function that returns a function function createMultiplier(factor) { return function(number) { return number * factor; }; } // Function that takes a function as parameter function applyOperation(arr, operation) { return arr.map(operation); } // Immediately Invoked Function Expression (IIFE) (function() { console.log("IIFE executed"); })(); // Callback functions setTimeout(() => { console.log("Delayed execution"); }, 1000);

Array Methods

Mutating Methods

push(element)
pop()
shift()
unshift(element)
splice(start, deleteCount, ...items)
sort(compareFunction)
reverse()
fill(value, start, end)

Non-Mutating Methods

concat(array)
slice(start, end)
join(separator)
indexOf(searchElement)
lastIndexOf(searchElement)
includes(searchElement)
toString()

Iteration Methods

forEach(callback)
map(callback)
filter(callback)
reduce(callback, initialValue)
reduceRight(callback, initialValue)
find(callback)
findIndex(callback)
some(callback)
every(callback)
flatMap(callback)
flat(depth)

String Methods

String Manipulation

charAt(index)
charCodeAt(index)
concat(string)
indexOf(searchValue)
lastIndexOf(searchValue)
slice(start, end)
substring(start, end)
substr(start, length)
toLowerCase()
toUpperCase()
trim()
trimStart()
trimEnd()
replace(searchValue, replaceValue)
replaceAll(searchValue, replaceValue)
split(separator)
match(regexp)
search(regexp)
includes(searchString)
startsWith(searchString)
endsWith(searchString)
repeat(count)
padStart(length, padString)
padEnd(length, padString)

Object Methods

Object Manipulation

Object.keys(obj)
Object.values(obj)
Object.entries(obj)
Object.assign(target, ...sources)
Object.create(proto)
Object.defineProperty(obj, prop, descriptor)
Object.freeze(obj)
Object.seal(obj)
Object.isFrozen(obj)
Object.isSealed(obj)
Object.hasOwnProperty(prop)
Object.getOwnPropertyNames(obj)
Object.getPrototypeOf(obj)
Object.setPrototypeOf(obj, prototype)

Math Object

Math Methods

Math.abs(x)
Math.ceil(x)
Math.floor(x)
Math.round(x)
Math.trunc(x)
Math.max(...values)
Math.min(...values)
Math.random()
Math.sqrt(x)
Math.pow(x, y)
Math.exp(x)
Math.log(x)
Math.sin(x)
Math.cos(x)
Math.tan(x)
Math.PI
Math.E

Date Object

Date Methods

new Date()
Date.now()
Date.parse(dateString)
getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
getTime()
setFullYear(year)
setMonth(month)
setDate(date)
setHours(hours)
setMinutes(minutes)
setSeconds(seconds)
toDateString()
toTimeString()
toISOString()
toLocaleDateString()
toLocaleTimeString()

Classes & Objects

ES6 Classes

// Class declaration class Person { // Constructor constructor(name, age) { this.name = name; this.age = age; } // Instance method greet() { return `Hello, I'm ${this.name}`; } // Static method static species() { return "Homo sapiens"; } // Getter get info() { return `${this.name} is ${this.age} years old`; } // Setter set age(value) { if (value > 0) { this._age = value; } } } // Inheritance class Student extends Person { constructor(name, age, studentId) { super(name, age); this.studentId = studentId; } study() { return `${this.name} is studying`; } }

Prototype-based Objects

// Constructor function function Person(name, age) { this.name = name; this.age = age; } // Adding methods to prototype Person.prototype.greet = function() { return `Hello, I'm ${this.name}`; }; // Creating objects const person1 = new Person("Alice", 30); // Object literal const person2 = { name: "Bob", age: 25, greet() { return `Hello, I'm ${this.name}`; } }; // Object.create() const person3 = Object.create(Person.prototype); person3.name = "Charlie"; person3.age = 35;

Promises & Async

Promises

// Creating a Promise const myPromise = new Promise((resolve, reject) => { // Async operation if (success) { resolve(result); } else { reject(error); } }); // Using Promises myPromise .then(result => { console.log(result); return processedResult; }) .catch(error => { console.error(error); }) .finally(() => { console.log("Cleanup"); }); // Promise methods Promise.all([promise1, promise2, promise3]); Promise.allSettled([promise1, promise2, promise3]); Promise.race([promise1, promise2, promise3]); Promise.resolve(value); Promise.reject(reason);

Async/Await

// Async function async function fetchData() { try { const response = await fetch('/api/data'); const data = await response.json(); return data; } catch (error) { console.error('Error:', error); throw error; } } // Using async function fetchData() .then(data => console.log(data)) .catch(error => console.error(error)); // Async arrow function const fetchUser = async (id) => { const response = await fetch(`/api/users/${id}`); return response.json(); }; // Parallel execution async function fetchMultiple() { const [users, posts, comments] = await Promise.all([ fetch('/api/users'), fetch('/api/posts'), fetch('/api/comments') ]); return { users: await users.json(), posts: await posts.json(), comments: await comments.json() }; }

Error Handling

Try-Catch-Finally

// Basic error handling try { // Code that might throw an error throw new Error("Something went wrong"); } catch (error) { console.error("Error:", error.message); } finally { console.log("This always executes"); } // Specific error types try { JSON.parse(invalidJSON); } catch (error) { if (error instanceof SyntaxError) { console.log("Invalid JSON syntax"); } else if (error instanceof ReferenceError) { console.log("Reference error"); } else { console.log("Unknown error:", error); } } // Custom errors class CustomError extends Error { constructor(message) { super(message); this.name = "CustomError"; } } throw new CustomError("Custom error message");

DOM Manipulation

Element Selection

document.getElementById(id)
document.getElementsByClassName(className)
document.getElementsByTagName(tagName)
document.querySelector(selector)
document.querySelectorAll(selector)
element.closest(selector)
element.matches(selector)

Element Manipulation

element.innerHTML
element.textContent
element.setAttribute(name, value)
element.getAttribute(name)
element.removeAttribute(name)
element.classList.add(className)
element.classList.remove(className)
element.classList.toggle(className)
element.style.property = value
element.appendChild(child)
element.removeChild(child)
element.insertBefore(newNode, referenceNode)
document.createElement(tagName)
element.cloneNode(deep)

Event Handling

element.addEventListener(event, handler)
element.removeEventListener(event, handler)
event.preventDefault()
event.stopPropagation()
event.target
event.currentTarget
Wesley Classen
Wesley's AI Assistant Usually replies in ~15 min Ask me anything — if I can't answer, Wesley gets pinged and replies personally.
Hello! I'm Wesley's AI assistant. How can I help you today?