Outsourced IT Partner
Support · systems · strategy
© 2026
One person, one business — IT support here, websites at webology.online.
One person, one business — IT support here, websites at webology.online.
⚡ 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