JavaScript is the heart of modern web development. It adds interactivity, handles logic, and connects the front end with back-end services. Whether you're building a simple webpage or a complex app, this JavaScript Cheat Sheet 2025 is your go-to quick reference. We’ve updated everything with the latest syntax, clear examples, and easy explanations to help you stay ahead.
JavaScript Cheat Sheet Overview
| Section | What It Covers |
|---|---|
| Basics | Variables, Data Types, Comments, Operators |
| Control Structures | if-else, loops, switch |
| Functions | Declarations, Expressions, Arrow Functions |
| Objects & Arrays | Structure, Methods, Spread Operator |
| Strings | Useful string methods |
| Numbers & Math | Math object methods and parsing |
| Dates & Time | Date object and time methods |
| DOM Manipulation | Selecting and changing HTML elements |
| Events | Click, hover, keypress, etc. |
| Error Handling | try-catch, finally, throw |
| Asynchronous JS | Callbacks, Promises, async/await |
| JSON | JSON parsing and stringifying |
1. JavaScript Basics
Learn how to declare variables, understand different data types, use operators, and write comments.
JavaScript Variables
javascript
let x = 5; // using let to declare a number
const y = 10; // constant value that won't change
var z = "Hello"; // using var to declare a string
JavaScript Data Types
- Number, String, Boolean, Array, Object, Null, Undefined
JavaScript Operators
javascript
let a = 5 + 3; // addition
let b = 10 % 3; // modulus
let c = a === b; // strict equality comparison
JavaScript Comments
javascript
// Single-line comment
/* Multi-line comment */
2. Control Structures in JavaScript
Learn how to direct the flow of your code using conditions and loops.
if...else
javascript
if (x > y) {
console.log("x is greater"); // runs if x > y
} else {
console.log("y is greater or equal");
}
switch
javascript
switch (day) {
case 1:
console.log("Monday"); // if day is 1
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("Another day"); // default case
}
for loop
javascript
for (let i = 0; i < 5; i++) {
console.log(i); // prints 0 to 4
}
while loop
javascript
let i = 0;
while (i < 5) {
console.log(i); // prints i while less than 5
i++;
}
do...while
javascript
let i = 0;
do {
console.log(i); // runs at least once
i++;
} while (i < 5);
3. Functions in JavaScript
Functions are reusable blocks of code that perform specific tasks.
Function Declaration
javascript
function myFunction() {
return "Hello"; // returns a string
}
Function Expression
javascript
const myFunc = function() {
return "Hello"; // anonymous function
};
Arrow Function
javascript
const myFunc = () => {
return "Hello"; // arrow function syntax
};
Parameters and Return
javascript
function add(a, b) {
return a + b; // returns the sum of two values
}
4. Objects and Arrays in JavaScript
Store and organize data using objects and arrays.
Object
javascript
const person = {
firstName: "John",
lastName: "Doe",
age: 30
}; // object with 3 properties
Property Access
javascript
console.log(person.firstName); // accesses 'John'
Method
javascript
person.getFullName = function() {
return this.firstName + " " + this.lastName; // returns full name
};
Array
javascript
const fruits = ["Apple", "Banana", "Cherry"]; // array of strings
Array Methods
javascript
fruits.push("Orange"); // adds to end
fruits.pop(); // removes last item
console.log(fruits.length); // outputs array length
Spread Operator
javascript
const newFruits = [...fruits, "Orange"]; // copies and adds new item
5. String Methods in JavaScript
Work with and manipulate text values easily.
javascript
let str = "Hello World";
str.length; // 11
str.toUpperCase(); // "HELLO WORLD"
str.toLowerCase(); // "hello world"
str.indexOf("World"); // 6
str.slice(0, 5); // "Hello"
str.replace("World", "Everyone"); // "Hello Everyone"
str.split(" "); // ["Hello", "World"]
6. Number and Math Methods in JavaScript
Handle numbers and perform calculations.
javascript
Math.round(4.7); // 5
Math.ceil(4.1); // 5
Math.floor(4.9); // 4
Math.random(); // random number between 0-1
Math.max(1, 2, 3); // 3
Math.min(1, 2, 3); // 1
parseInt("10"); // 10
parseFloat("10.5"); // 10.5
7. Date and Time in JavaScript
Use JavaScript's Date object for handling time and dates.
javascript
let now = new Date(); // current date and time
now.getFullYear(); // returns year
now.getMonth(); // 0-11 (Jan = 0)
now.getDate(); // 1-31
now.getDay(); // 0-6 (Sun = 0)
now.getHours(); // 0-23
now.getMinutes(); // 0-59
now.getSeconds(); // 0-59
now.getTime(); // milliseconds since 1970
8. DOM Manipulation
Interact with and update HTML elements dynamically.
javascript
document.getElementById("myElement").innerHTML = "Hello"; // sets content
let elements = document.getElementsByClassName("myClass"); // class selector
let divs = document.getElementsByTagName("div"); // tag selector
let first = document.querySelector(".myClass"); // first match
let all = document.querySelectorAll("div.highlight"); // all matches
let newDiv = document.createElement("div"); // creates new element
document.body.appendChild(newDiv); // appends to body
let parent = document.getElementById("container");
let child = document.getElementById("child");
parent.removeChild(child); // removes child
element.setAttribute("class", "newClass"); // sets attribute
element.classList.add("active"); // adds class
element.classList.remove("active"); // removes class
9. Events in JavaScript
Capture and respond to user interactions.
javascript
element.onclick = function() { alert("Clicked!"); }; // click event
element.onmouseover = function() {
this.style.color = "red"; // mouse enters
};
element.onmouseout = function() {
this.style.color = "black"; // mouse leaves
};
document.onkeydown = function(event) {
console.log(event.key); // logs key press
};
window.onload = function() {
alert("Page Loaded"); // after load
};
form.onsubmit = function() {
return validateForm(); // validate before submit
};
element.addEventListener("click", function() { /* handle click */ });
element.removeEventListener("click", function() { /* remove click */ });
10. Error Handling in JavaScript
Catch and manage errors in your code.
javascript
try {
// risky code
throw new Error("Something broke");
} catch (error) {
console.log(error.message); // handles error
} finally {
console.log("Always runs"); // cleanup
}
11. Asynchronous JavaScript
Manage tasks that take time like data fetching.
Callback
javascript
function fetchData(callback) {
setTimeout(callback, 1000); // simulate delay
}
Promise
javascript
let promise = new Promise((resolve, reject) => {
resolve("Success!"); // resolve the task
});
promise.then(result => console.log(result)) // handle success
.catch(error => console.log(error)); // handle error
Async/Await
javascript
async function getData() {
const response = await fetch("api/data"); // wait for response
const data = await response.json(); // convert to JSON
console.log(data);
}
12. JSON
Exchange data between client and server.
javascript
let jsonStr = '{"name": "Sara", "age": 28}';
let obj = JSON.parse(jsonStr); // convert to object
let backToJson = JSON.stringify(obj); // convert back to JSON
This updated cheat sheet gives you everything you need to start or sharpen your JavaScript skills in 2025. Save it, use it often, and share it with fellow developers!