JavaScript Cheatsheet
A comprehensive quick reference guide covering essential JavaScript syntax, methods, and features. Perfect for beginners and experienced developers alike.
1Variables
Variables are containers for storing data values. JavaScript has three ways to declare variables: let, const, and var.
// let - can be reassigned
let age = 25;
age = 26; // OK
// const - cannot be reassigned
const name = "John";
// name = "Jane"; // Error!
// var - old way (avoid in modern code)
var city = "New York";2Data Types
JavaScript has 7 primitive data types: String, Number, Boolean, Undefined, Null, Symbol, and BigInt. Plus complex types like Object and Array.
// String
let greeting = "Hello World";
// Number
let count = 42;
let price = 19.99;
// Boolean
let isActive = true;
let isComplete = false;
// Undefined
let notDefined;
// Null
let empty = null;
// Array
let colors = ["red", "green", "blue"];
// Object
let person = { name: "Alice", age: 30 };3Operators
Operators perform operations on variables and values. JavaScript includes arithmetic, comparison, logical, and assignment operators.
// Arithmetic
let sum = 5 + 3; // 8
let diff = 10 - 4; // 6
let product = 6 * 7; // 42
let quotient = 20 / 4; // 5
let remainder = 10 % 3; // 1
// Comparison
5 == "5" // true (loose equality)
5 === "5" // false (strict equality)
10 != 5 // true
7 > 3 // true
4 <= 8 // true
// Logical
true && false // false (AND)
true || false // true (OR)
!true // false (NOT)4Strings
Strings are sequences of characters used to represent text. JavaScript provides many built-in methods for string manipulation.
let str = "Hello World";
// Length
str.length // 11
// Case conversion
str.toUpperCase() // "HELLO WORLD"
str.toLowerCase() // "hello world"
// Substring operations
str.slice(0, 5) // "Hello"
str.substring(6, 11) // "World"
// Split and join
str.split(" ") // ["Hello", "World"]
// Search
str.includes("World") // true
str.indexOf("o") // 4
str.startsWith("Hello") // true
// Replace
str.replace("World", "JS") // "Hello JS"
// Trim whitespace
" space ".trim() // "space"5Arrays
Arrays store multiple values in a single variable. JavaScript provides powerful methods for array manipulation and iteration.
let arr = [1, 2, 3, 4, 5];
// Add/remove elements
arr.push(6) // Add to end: [1,2,3,4,5,6]
arr.pop() // Remove from end: 6
arr.unshift(0) // Add to start: [0,1,2,3,4,5]
arr.shift() // Remove from start: 0
// Array methods
arr.length // 5
arr.includes(3) // true
arr.indexOf(4) // 3
// Iteration methods
arr.map(x => x * 2) // [2,4,6,8,10]
arr.filter(x => x > 2) // [3,4,5]
arr.reduce((a,b) => a+b) // 15
arr.find(x => x > 3) // 4
// Slice and splice
arr.slice(1, 3) // [2,3]
arr.splice(2, 1) // Remove 1 at index 2
// Join and reverse
arr.join(", ") // "1, 2, 3, 4, 5"
arr.reverse() // [5,4,3,2,1]6Objects
Objects are collections of key-value pairs. They are the building blocks of complex data structures in JavaScript.
// Creating objects
let person = {
name: "Alice",
age: 25,
city: "NYC"
};
// Accessing properties
person.name // "Alice" (dot notation)
person["age"] // 25 (bracket notation)
// Adding/modifying properties
person.email = "alice@example.com";
person.age = 26;
// Deleting properties
delete person.city;
// Destructuring
let { name, age } = person;
// Object methods
Object.keys(person) // ["name", "age", "email"]
Object.values(person) // ["Alice", 26, "alice@..."]
Object.entries(person) // [["name","Alice"],...]7Functions
Functions are reusable blocks of code. JavaScript supports multiple ways to declare functions, including arrow functions.
// Function declaration
function greet(name) {
return `Hello, ${name}!`;
}
// Function expression
const add = function(a, b) {
return a + b;
};
// Arrow function
const multiply = (a, b) => a * b;
// Arrow function with body
const calculate = (x, y) => {
let result = x * y;
return result;
};
// Default parameters
function greetUser(name = "Guest") {
return `Hello, ${name}!`;
}
// Rest parameters
function sum(...numbers) {
return numbers.reduce((a, b) => a + b);
}8Conditionals
Conditionals control the flow of your program based on conditions. JavaScript offers if/else, ternary operators, and switch statements.
// If/else statement
let age = 18;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
// Else if
let score = 85;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else {
console.log("C");
}
// Ternary operator
let status = age >= 18 ? "Adult" : "Minor";
// Switch statement
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("Other day");
}9Loops
Loops allow you to repeat code multiple times. JavaScript provides several types of loops for different use cases.
// For loop
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
// While loop
let count = 0;
while (count < 3) {
console.log(count);
count++;
}
// For...of (iterate over values)
let fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
console.log(fruit);
}
// For...in (iterate over keys)
let person = { name: "John", age: 30 };
for (let key in person) {
console.log(key, person[key]);
}
// forEach method
fruits.forEach((fruit, index) => {
console.log(index, fruit);
});10DOM Manipulation
The DOM (Document Object Model) allows JavaScript to interact with HTML. You can select, modify, and create elements dynamically.
// Selecting elements
let element = document.querySelector(".class");
let byId = document.getElementById("myId");
let all = document.querySelectorAll("p");
// Modifying content
element.textContent = "New text";
element.innerHTML = "<strong>Bold</strong>";
// Modifying attributes
element.setAttribute("src", "image.jpg");
element.classList.add("active");
element.classList.remove("hidden");
// Creating elements
let newDiv = document.createElement("div");
newDiv.textContent = "Hello!";
document.body.appendChild(newDiv);
// Event listeners
element.addEventListener("click", function() {
console.log("Clicked!");
});11ES6+ Features
Modern JavaScript (ES6+) introduces powerful features like destructuring, spread/rest operators, and template literals that make code more concise and readable.
// Template literals
let name = "Alice";
let greeting = `Hello, ${name}!`;
// Destructuring arrays
let [a, b, c] = [1, 2, 3];
// Destructuring objects
let person = { name: "Bob", age: 25 };
let { name, age } = person;
// Spread operator (arrays)
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1,2,3,4,5]
// Spread operator (objects)
let obj1 = { x: 1, y: 2 };
let obj2 = { ...obj1, z: 3 };
// Rest parameters
function sum(...numbers) {
return numbers.reduce((a, b) => a + b);
}
// Default parameters
function greet(name = "Guest") {
return `Hello, ${name}!`;
}Ready to practice?
Master JavaScript syntax through interactive fill-in-the-blank exercises. Start building muscle memory today.
Start Practicing JavaScript