Published on: July 2026 | By: Lovejeet Singh, CodeSardar
Hello friends! 👋
If you're learning JavaScript, you've probably realized that there are hundreds of concepts, methods, functions, and APIs to remember. From variables and loops to the DOM, asynchronous programming, and ES6 features, JavaScript can feel overwhelming at first.
That's why I created this complete JavaScript Cheat Sheet. Instead of jumping between dozens of websites, you'll have all the essential JavaScript concepts organized in one place. Whether you're a beginner writing your first script or an experienced developer looking for a quick reference, this guide will save you time.
This article covers 500+ JavaScript concepts, including syntax, operators, arrays, objects, functions, DOM manipulation, events, promises, async/await, JSON, Web APIs, modules, error handling, browser storage, and much more.
💡 My Experience
When I started learning JavaScript, I kept forgetting method names and syntax. I spent more time searching documentation than actually writing code. Creating my own categorized cheat sheet changed that completely. Instead of memorizing everything, I focused on understanding how each feature worked and used the cheat sheet as a quick reference while building real projects.
What Is JavaScript?
JavaScript (JS) is a high-level, lightweight, and interpreted programming language used to make websites interactive.
With JavaScript, you can:
Build interactive websites
Validate forms
Create animations
Manipulate HTML and CSS
Develop games
Build web applications
Work with APIs
Create mobile apps
Build backend applications using Node.js
Why Learn JavaScript?
JavaScript is one of the most widely used programming languages because it allows developers to:
Add interactivity to web pages
Build Single Page Applications (SPAs)
Create Progressive Web Apps (PWAs)
Develop browser games
Build REST API clients
Create server-side applications
Develop desktop applications
Build cross-platform mobile apps
JavaScript Syntax
Example:
let message = "Hello World!";
console.log(message);
Variables
Declaration keywords:
var
let
const
Best practice:
const→ Values that won't changelet→ Variables that may changeAvoid
varin modern JavaScript unless maintaining older code
Data Types
Primitive types:
String
Number
Boolean
Undefined
Null
BigInt
Symbol
Reference types:
Object
Array
Function
Date
Map
Set
Operators
Common operators:
Arithmetic
Assignment
Comparison
Logical
Bitwise
Ternary
Nullish Coalescing (
??)Optional Chaining (
?.)
Conditional Statements
Examples include:
if
else
else if
switch
Loops
JavaScript supports:
forwhiledo...whilefor...offor...inforEach()
Functions
Types of functions:
Function Declaration
Function Expression
Arrow Function
Anonymous Function
Callback Function
Higher-Order Function
Generator Function
Async Function
Example:
const greet = (name) => {
return `Hello ${name}`;
};
Arrays
Popular methods:
push()
pop()
shift()
unshift()
slice()
splice()
concat()
map()
filter()
reduce()
find()
findIndex()
some()
every()
includes()
sort()
reverse()
flat()
flatMap()
Objects
Useful methods:
Object.keys()
Object.values()
Object.entries()
Object.assign()
Object.freeze()
Object.seal()
Strings
Common methods:
length
trim()
toUpperCase()
toLowerCase()
replace()
replaceAll()
split()
substring()
slice()
includes()
startsWith()
endsWith()
indexOf()
Numbers
Methods:
parseInt()
parseFloat()
Number()
isNaN()
isFinite()
toFixed()
toPrecision()
Math Object
Useful methods:
Math.random()
Math.floor()
Math.ceil()
Math.round()
Math.max()
Math.min()
Math.abs()
Math.pow()
Math.sqrt()
Dates
Common methods:
new Date()
getFullYear()
getMonth()
getDate()
getHours()
getMinutes()
getSeconds()
DOM (Document Object Model)
The DOM allows JavaScript to interact with HTML.
Selecting elements:
document.getElementById()
document.querySelector()
document.querySelectorAll()
document.getElementsByClassName()
document.getElementsByTagName()
DOM Manipulation
Common methods:
innerHTML
textContent
innerText
createElement()
appendChild()
prepend()
remove()
replaceChild()
cloneNode()
CSS Manipulation
Examples:
element.style.color
element.classList.add()
element.classList.remove()
element.classList.toggle()
element.classList.contains()
Event Handling
Popular events:
click
input
change
submit
keydown
keyup
mouseover
mouseout
scroll
resize
load
Event Listeners
Example:
button.addEventListener("click", function(){
});
Forms
Useful properties:
value
checked
selectedIndex
reset()
submit()
Timers
setTimeout()
setInterval()
clearTimeout()
clearInterval()
JSON
Methods:
JSON.parse()
JSON.stringify()
Local Storage
localStorage.setItem()
localStorage.getItem()
localStorage.removeItem()
localStorage.clear()
Session Storage
sessionStorage.setItem()
sessionStorage.getItem()
sessionStorage.removeItem()
Fetch API
Basic workflow:
fetch()
Response
JSON
Error Handling
Promises
States:
Pending
Fulfilled
Rejected
Methods:
then()
catch()
finally()
Async / Await
Example:
async function loadData(){
}
Error Handling
Keywords:
try
catch
finally
throw
ES6+ Features
Modern JavaScript includes:
let
const
Arrow Functions
Template Literals
Destructuring
Spread Operator
Rest Parameters
Modules
Classes
Promises
Async/Await
Optional Chaining
Nullish Coalescing
Browser APIs
Examples:
Fetch API
Clipboard API
Notification API
Geolocation API
History API
Web Storage API
URL API
Fullscreen API
Modules
Keywords:
export
import
default export
Classes
Example concepts:
Constructor
Inheritance
Methods
Static Methods
Getters
Setters
Image Suggestions
Include these visuals:
JavaScript roadmap
Variables diagram
Data types chart
DOM tree illustration
Event flow diagram
Promise lifecycle
Async/Await workflow
Fetch API flow
Local Storage example
ES6 feature overview
💡 My Recommendation
Don't try to memorize all 500+ concepts. Learn one topic at a time, build small projects, and keep this cheat sheet bookmarked as a reference. Even experienced JavaScript developers regularly consult documentation and reference guides.
💡 Pro Tip
Practice every concept immediately after learning it. Build small projects such as calculators, to-do lists, weather apps, or image galleries. Real-world practice helps you remember JavaScript far better than reading alone.
⚠️ Note
JavaScript evolves every year. New ECMAScript (ES) features are added regularly, so it's a good habit to stay updated and check browser compatibility before using the latest features in production projects.
Quick Summary Table
| Category | Topics Covered |
|---|---|
| Basics | Variables, Data Types, Operators |
| Control Flow | Conditions, Loops |
| Functions | Arrow, Callback, Async |
| Arrays | 30+ Methods |
| Objects | Properties & Methods |
| DOM | Selection & Manipulation |
| Events | Mouse, Keyboard, Forms |
| Storage | Local & Session Storage |
| APIs | Fetch, Clipboard, Geolocation |
| Async | Promises, Async/Await |
| ES6+ | Modules, Classes, Destructuring |
Common Beginner Mistakes
Avoid these mistakes:
Using
varinstead ofletorconstin new code.Confusing
==with===.Forgetting to handle Promise errors.
Modifying the DOM repeatedly inside loops without considering performance.
Ignoring browser compatibility for newer features.
Not understanding variable scope.
Trying to memorize methods instead of practicing them.
Interesting Facts
JavaScript was created in 1995 by Brendan Eich in just 10 days.
Nearly every modern website uses JavaScript for interactivity.
JavaScript can run in browsers, servers (Node.js), mobile apps, and desktop applications.
ECMAScript is the official specification that defines JavaScript features.
Modern JavaScript supports object-oriented, functional, and asynchronous programming styles.
Conclusion
JavaScript is one of the most powerful and versatile programming languages available today. From simple web interactions to complex web applications, it plays a vital role in modern development.
Use this cheat sheet as your daily reference while learning and building projects. Focus on understanding the concepts, practice regularly, and revisit the sections whenever you need a quick reminder. With consistent practice, you'll become more confident and productive as a JavaScript developer.
Frequently Asked Questions (FAQs)
1. Is JavaScript difficult for beginners?
No. JavaScript has a beginner-friendly syntax, but mastering advanced topics like asynchronous programming and the DOM takes regular practice.
2. Should I learn HTML and CSS before JavaScript?
Yes. Understanding HTML and CSS first makes learning JavaScript much easier because JavaScript interacts directly with web pages.
3. What's the difference between JavaScript and ECMAScript?
ECMAScript is the official language specification, while JavaScript is the most widely used implementation of that specification.
4. What is the DOM in JavaScript?
The Document Object Model (DOM) is a programming interface that allows JavaScript to read and modify HTML elements on a webpage.
5. What are Promises used for?
Promises help manage asynchronous operations such as API requests and file loading, making code easier to organize and maintain.
6. Why should I use let and const instead of var?
let and const provide block scope and help prevent common bugs associated with var, making modern JavaScript code safer and easier to understand.
7. Can I build complete websites using JavaScript?
Yes. Combined with HTML and CSS, JavaScript can be used to create fully interactive websites. With technologies like Node.js, it can also power backend services and full-stack web applications.
