Last Updated: November 21, 2025
📋 Interactive Tools
Format and validate JSON with our JSON Formatter | Test regex patterns with our Regex Tester
Variables & Data Types
let name = "John";
Block-scoped variable (can be reassigned)
const PI = 3.14;
Block-scoped constant (cannot be reassigned)
var oldStyle = "avoid";
Function-scoped variable (legacy, avoid using)
Data Types
| Type | Example | Description |
|---|---|---|
| String |
"hello"
or
'world'
|
Text data |
| Number |
42
,
3.14
|
Integer or float |
| Boolean |
true
,
false
|
True or false value |
| Array |
[1, 2, 3]
|
Ordered list of values |
| Object |
{name: "John"}
|
Key-value pairs |
| Null |
null
|
Intentional absence of value |
| Undefined |
undefined
|
Variable declared but not assigned |
Arrays
arr.push(item)
Add item to end of array
arr.pop()
Remove last item from array
arr.shift()
Remove first item from array
arr.unshift(item)
Add item to beginning of array
arr.map(fn)
Transform each element and return new array
arr.filter(fn)
Return new array with elements that pass test
arr.reduce(fn, initial)
Reduce array to single value
arr.find(fn)
Return first element that passes test
arr.slice(start, end)
Return shallow copy of portion of array
arr.splice(start, deleteCount, ...items)
Add/remove items from array
Objects
const obj = {key: "value"}
Create object literal
obj.key
or
obj["key"]
Access property value
Object.keys(obj)
Return array of object's keys
Object.values(obj)
Return array of object's values
Object.entries(obj)
Return array of [key, value] pairs
{...obj1, ...obj2}
Merge objects using spread operator
Functions
// Function declaration
function greet(name) {
return `Hello, ${name}!`;
}
// Arrow function
const greet = (name) => `Hello, ${name}!`;
// Default parameters
const greet = (name = "World") => `Hello, ${name}!`;
// Rest parameters
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}String Methods
str.length
Get string length
str.toUpperCase()
Convert to uppercase
str.toLowerCase()
Convert to lowercase
str.trim()
Remove whitespace from both ends
str.includes(substring)
Check if string contains substring
str.split(separator)
Split string into array
str.replace(old, new)
Replace first occurrence
str.replaceAll(old, new)
Replace all occurrences
Promises & Async/Await
// Promise
const promise = new Promise((resolve, reject) => {
if (success) resolve(value);
else reject(error);
});
promise
.then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log("Done"));
// Async/Await
async function fetchData() {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}Destructuring
// Array destructuring
const [a, b, ...rest] = [1, 2, 3, 4, 5];
// Object destructuring
const {name, age} = {name: "John", age: 30};
// With default values
const {name = "Guest"} = {};
// Function parameter destructuring
function greet({name, age}) {
return `${name} is ${age} years old`;
}DOM Manipulation
document.querySelector(selector)
Select first matching element
document.querySelectorAll(selector)
Select all matching elements
element.textContent
Get or set text content
element.innerHTML
Get or set HTML content
element.classList.add(className)
Add CSS class
element.addEventListener(event, fn)
Attach event listener
💡 Pro Tip:
Use
const
by default, only use
let
when you need to reassign. Never use
var
in modern JavaScript.