JavaScript
Updated: September 10, 2025Categories: Frontend, Backend, Languages, Web
Printed from:
JavaScript Cheatsheet
Language Overview
JavaScript is a dynamic, interpreted programming language primarily used for web development. It runs in browsers and on servers (Node.js), supporting event-driven, functional, and object-oriented programming paradigms.
Basic Syntax
JavaScript
123456// Single line comment
/* Multi-line comment */
// Semicolons are optional but recommended
console.log("Hello World");
Data Types
Primitive Types
JavaScript
12345678910111213141516171819202122232425// Number
let age = 25;
let price = 99.99;
// String
let name = "John";
let message = `Hello, ${name}!`;
// Boolean
let isActive = true;
let isComplete = false;
// Undefined
let x;
console.log(x); // undefined
// Null
let data = null;
// Symbol (ES6)
let sym = Symbol('id');
// BigInt (ES2020)
let bigNumber = 123456789012345678901234567890n;
Non-Primitive Types
JavaScript
12345678910111213141516// Object
let person = {
name: "John",
age: 30,
city: "New York"
};
// Array
let numbers = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "orange"];
// Function
function greet(name) {
return `Hello, ${name}!`;
}
Variables
JavaScript
12345678910// var (function-scoped, hoisted)
var x = 1;
// let (block-scoped)
let y = 2;
// const (block-scoped, immutable binding)
const z = 3;
const PI = 3.14159;
Operators
Arithmetic Operators
JavaScript
12345678let a = 10, b = 3;
console.log(a + b); // 13 (addition)
console.log(a - b); // 7 (subtraction)
console.log(a * b); // 30 (multiplication)
console.log(a / b); // 3.333... (division)
console.log(a % b); // 1 (modulus)
console.log(a ** b); // 1000 (exponentiation)
Comparison Operators
JavaScript
1234567console.log(5 == "5"); // true (loose equality)
console.log(5 === "5"); // false (strict equality)
console.log(5 != "6"); // true
console.log(5 !== "5"); // true
console.log(5 > 3); // true
console.log(5 >= 5); // true
Logical Operators
JavaScript
1234console.log(true && false); // false (AND)
console.log(true || false); // true (OR)
console.log(!true); // false (NOT)
Control Structures
If/Else
JavaScript
123456789101112131415let score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else {
console.log("Grade: F");
}
// Ternary operator
let result = score >= 60 ? "Pass" : "Fail";
Switch
JavaScript
1234567891011121314151617let day = "Monday";
switch (day) {
case "Monday":
console.log("Start of work week");
break;
case "Friday":
console.log("TGIF!");
break;
case "Saturday":
case "Sunday":
console.log("Weekend!");
break;
default:
console.log("Regular day");
}
Loops
JavaScript
12345678910111213141516171819202122232425262728293031// For loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
// While loop
let count = 0;
while (count < 3) {
console.log(count);
count++;
}
// Do-while loop
let num = 0;
do {
console.log(num);
num++;
} while (num < 3);
// For...of loop (arrays)
let colors = ["red", "green", "blue"];
for (let color of colors) {
console.log(color);
}
// For...in loop (objects)
let person = {name: "John", age: 30};
for (let key in person) {
console.log(key + ": " + person[key]);
}
Functions
Function Declaration
JavaScript
123456789function add(a, b) {
return a + b;
}
// Function with default parameters
function greet(name = "World") {
return `Hello, ${name}!`;
}
Function Expression
JavaScript
1234const multiply = function(a, b) {
return a * b;
};
Arrow Functions (ES6)
JavaScript
123456789101112const subtract = (a, b) => a - b;
const square = x => x * x;
const sayHello = () => "Hello!";
// Multi-line arrow function
const processData = (data) => {
const processed = data.map(x => x * 2);
return processed.filter(x => x > 10);
};
Data Structures
Arrays
JavaScript
12345678910111213141516let fruits = ["apple", "banana", "orange"];
// Array methods
fruits.push("grape"); // Add to end
fruits.unshift("mango"); // Add to beginning
fruits.pop(); // Remove from end
fruits.shift(); // Remove from beginning
// Array iteration
fruits.forEach(fruit => console.log(fruit));
let uppercased = fruits.map(fruit => fruit.toUpperCase());
let longFruits = fruits.filter(fruit => fruit.length > 5);
// Array destructuring
let [first, second, ...rest] = fruits;
Objects
JavaScript
12345678910111213141516171819let person = {
name: "John",
age: 30,
sayHello: function() {
return `Hello, I'm ${this.name}`;
}
};
// Object methods
console.log(Object.keys(person)); // Get keys
console.log(Object.values(person)); // Get values
console.log(Object.entries(person)); // Get key-value pairs
// Object destructuring
let {name, age} = person;
// Spread operator
let newPerson = {...person, city: "New York"};
Maps and Sets
JavaScript
123456789101112// Map
let map = new Map();
map.set("name", "John");
map.set(1, "one");
console.log(map.get("name"));
// Set
let set = new Set([1, 2, 3, 3, 4]);
console.log(set); // Set {1, 2, 3, 4}
set.add(5);
set.delete(1);
Object-Oriented Programming
Classes (ES6)
JavaScript
123456789101112131415161718192021222324252627282930313233class Animal {
constructor(name, type) {
this.name = name;
this.type = type;
}
speak() {
return `${this.name} makes a sound`;
}
static getSpecies() {
return "Various species";
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name, "dog");
this.breed = breed;
}
speak() {
return `${this.name} barks`;
}
wagTail() {
return `${this.name} wags tail`;
}
}
let myDog = new Dog("Buddy", "Golden Retriever");
console.log(myDog.speak());
Prototypes
JavaScript
123456789101112function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return `Hello, I'm ${this.name}`;
};
let john = new Person("John", 30);
console.log(john.greet());
Error Handling
JavaScript
1234567891011121314151617181920212223242526272829try {
let result = riskyOperation();
console.log(result);
} catch (error) {
console.error("An error occurred:", error.message);
} finally {
console.log("Cleanup code here");
}
// Throwing custom errors
function divide(a, b) {
if (b === 0) {
throw new Error("Division by zero is not allowed");
}
return a / b;
}
// Async error handling
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
return data;
} catch (error) {
console.error("Fetch failed:", error);
throw error;
}
}
Asynchronous Programming
Promises
JavaScript
1234567891011121314let promise = new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve("Success!");
} else {
reject("Failed!");
}
}, 1000);
});
promise
.then(result => console.log(result))
.catch(error => console.error(error));
Async/Await
JavaScript
123456789101112131415async function getData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
return data;
} catch (error) {
throw new Error(`Failed to fetch data: ${error.message}`);
}
}
// Using async function
getData()
.then(data => console.log(data))
.catch(error => console.error(error));
File I/O (Node.js)
JavaScript
1234567891011121314151617181920212223const fs = require('fs').promises;
const path = require('path');
// Reading files
async function readFile(filename) {
try {
const data = await fs.readFile(filename, 'utf8');
return data;
} catch (error) {
console.error('Error reading file:', error);
}
}
// Writing files
async function writeFile(filename, content) {
try {
await fs.writeFile(filename, content, 'utf8');
console.log('File written successfully');
} catch (error) {
console.error('Error writing file:', error);
}
}
Common Libraries and Frameworks
Popular Libraries
- Lodash: Utility library
- Axios: HTTP client
- Moment.js/Day.js: Date manipulation
- jQuery: DOM manipulation (legacy)
Frontend Frameworks
- React: Component-based UI library
- Vue.js: Progressive framework
- Angular: Full-featured framework
Backend (Node.js)
- Express.js: Web framework
- Koa.js: Next-generation web framework
- Socket.io: Real-time communication
Testing
- Jest: Testing framework
- Mocha: Test runner
- Cypress: End-to-end testing
Best Practices
Code Style
JavaScript
123456789101112131415161718// Use const for immutable values
const CONFIG = {
API_URL: 'https://api.example.com',
TIMEOUT: 5000
};
// Use meaningful variable names
const userAccountBalance = 1000;
const isUserLoggedIn = true;
// Use template literals for string interpolation
const message = `Welcome back, ${userName}!`;
// Use strict equality
if (value === expectedValue) {
// do something
}
Performance
JavaScript
1234567891011121314151617// Use array methods efficiently
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
// Avoid global variables
(function() {
// Your code here
})();
// Use event delegation
document.addEventListener('click', function(e) {
if (e.target.classList.contains('button')) {
// Handle button click
}
});
Modern JavaScript Features
JavaScript
1234567891011121314// Destructuring
const {name, email} = user;
const [first, ...rest] = items;
// Spread operator
const newArray = [...oldArray, newItem];
const newObject = {...oldObject, newProperty: value};
// Optional chaining (ES2020)
const city = user?.address?.city;
// Nullish coalescing (ES2020)
const username = user.name ?? 'Anonymous';
Resources for Further Learning
Documentation
Books
- "Eloquent JavaScript" by Marijn Haverbeke
- "You Don't Know JS" series by Kyle Simpson
- "JavaScript: The Good Parts" by Douglas Crockford
Online Platforms
- freeCodeCamp
- Codecademy JavaScript Course
- JavaScript30 by Wes Bos
Practice
Continue Learning
Discover more cheatsheets to boost your productivity