Vanilla JavaScript Cheat Sheet
Strings:
padStart() , padEnd() - Pad string to a target length with another string.
trim() , trimStart() , trimEnd() - Remove surrounding whitespace.
${} - String interpolation with template literals.
charAt(index) - Character at a specific index.
concat(...strs) - Join multiple strings.
indexOf(str) - Find first index of a substring.
repeat(n) - Repeat string n times.
slice(start, end) - Extract part of string.
split(separator, limit) - Split string into array.
Objects:
Object.keys() , Object.values() , Object.entries() - Convert object to array.
Object.assign(target, ...sources) - Merge objects into target.
Arrays:
Array[index] - Get value at index.
Array.from() - Convert iterable to array.
forEach() , map() - Loop over array (map returns new array).
filter() - Return array with elements matching condition.
sort() - Sort array.
find() - Find first element matching condition.
reduce() - Reduce array to single value.
splice() - Modify array (add/remove elements).
toString() - Convert array to string.
Loops:
for , for...in , for...of , while , do...while - Loop types.
DOM Manipulation:
querySelector() , querySelectorAll() - Select DOM elements with CSS selectors.
closest(selector) - Get nearest ancestor matching selector.
dataset - Access custom data-* attributes.
Window Object:
window.location - Info about the current URL.
window.history.back() , forward() , pushState() - Navigate browser history.
window.navigator.userAgent - Browser/device info.
alert() , confirm() , prompt() - Show dialog boxes.
innerWidth , innerHeight - Viewport size.
Local Storage:
localStorage.setItem() , getItem() , removeItem() , clear() - Store and retrieve key-value
pairs.
Element Methods:
classList.add() , remove() , toggle() - Manage element classes.
setAttribute() , removeAttribute() - Manage HTML attributes.
matches() - Check if element matches selector.
style.setProperty() - Set inline CSS variables.
Events:
target , currentTarget - Get event target.
preventDefault() , stopPropagation() - Control event behavior.
addEventListener() - Attach event listener to element.
Functions
function name(params) { ... } - Regular function declaration.
const name = function(params) { ... } - Function expression.
const name = (params) => { ... } - Arrow function.
arguments - Access all arguments passed to function (not in arrow functions).
return - Return a value from a function.
default parameters - function f(x = 5) sets a default value.
rest parameters - function f(...args) collects multiple args.
callback - Function passed as argument and called inside another function.
Async & Timing:
setTimeout() , setInterval() - Delay and repeat actions.
Promise , then() , catch() , finally() - Handle asynchronous logic.
async/await - Write async code like sync.
fetch() - Make HTTP requests.
ES6+ Features
let , const - Block-scoped variables (instead of var ).
template literals - Use backticks ( `Hello ${name}` ).
destructuring - Extract from objects/arrays: const {a, b} = obj .
spread operator - Copy/merge: [...arr] , {...obj} .
rest operator - Collect function args: function(...args) .
arrow functions - Shorter syntax: (x) => x + 1 .
Promise , async/await - Handle async code more cleanly.
Array.includes() - Check if value is in array.
String.startsWith() , endsWith() , includes()
Object.entries() , Object.fromEntries() - Convert between objects and arrays.
optional chaining - obj?.prop prevents errors if obj is null/undefined.
nullish coalescing - a ?? b returns b if a is null/undefined.
JS Cheatsheet by Masu💚
