JavaScript is a cornerstone of modern web development, offering the flexibility to create dynamic and interactive user experiences. Mastering JavaScript can be daunting, given its wide range of features and capabilities. That’s why we’ve created this comprehensive javascript cheatsheet to cover everything you need—from basic syntax to advanced concepts.
Whether you’re a beginner or an experienced developer, this JS cheatsheet is designed to provide quick reference and actionable insights.
On This Page
Table of Contents
JavaScript CheatSheet
| Feature | Syntax/Example | Explanation | Notes |
|---|
| Declare Variables | let x = 10;const y = 20; | Use let for reassignable variables and const for constants | Avoid using var due to scoping issues |
| Data Types | string, number, boolean, object | JavaScript supports primitive and reference types | Use typeof to check data types |
| Template Literals | `Hello, ${name}` | Embed expressions in strings | Use backticks for multi-line strings |
| Functions | function name(params) { ... } | Define reusable blocks of code | Arrow functions: const fn = () => { ... } |
| Arrow Functions | const add = (a, b) => a + b; | Shorter syntax for anonymous functions | No this binding |
| Array Methods | .push(), .pop(), .map(), .filter() | Built-in methods for working with arrays | Commonly used for transforming and manipulating arrays |
| String Methods | .length, .slice(), .replace() | Built-in methods for string operations | Strings are immutable; methods return new strings |
| Object Destructuring | const {a, b} = obj; | Extract properties from objects | Works with arrays too: const [x, y] = arr; |
| Spread Operator | const newArr = [...arr1, ...arr2]; | Expands arrays or objects into individual elements | Useful for merging arrays or objects |
| Rest Operator | function sum(...nums) { } | Collects arguments into an array | Opposite of the spread operator |
| Conditional Statements | if (x > 5) { } else { } | Used for decision-making | Ternary: condition ? value1 : value2; |
| Switch Statement | switch (key) { case 1: ... } | Simplifies multiple conditional checks | Use default for unmatched cases |
| Loops | for, while, do...while | Iterates over arrays, objects, or numbers | Use for...of for arrays and for...in for objects |
| Event Listeners | element.addEventListener('click', fn); | Attaches an event handler to an element | Use removeEventListener to clean up |
| Promises | new Promise((resolve, reject) => { }); | Handles asynchronous operations | .then() and .catch() for chaining |
| Async/Await | async function fn() { await promise; } | Syntactic sugar for promises | Requires async keyword |
| Error Handling | try { ... } catch (err) { ... } | Catches runtime errors | Use finally for cleanup operations |
| DOM Manipulation | document.querySelector('.class'); | Access and modify HTML elements | Use .innerHTML or .textContent to update content |
| Event Delegation | parent.addEventListener('click', fn); | Use a parent element to handle events for multiple child elements | Improves performance when dealing with dynamic elements |
| Timers | setTimeout(fn, ms);setInterval() | Delays or repeats execution | Use clearTimeout and clearInterval to stop them |
| Modules | export const x;import { x } from | Reuse code across files | Use default export for single-value exports |
| Classes | class MyClass { constructor() { } } | Blueprint for creating objects | Use extends for inheritance |
| Fetch API | fetch(url).then(res => res.json()); | Makes HTTP requests | Supports modern promise-based syntax |
| LocalStorage | localStorage.setItem('key', value); | Stores key-value pairs persistently | Use sessionStorage for temporary storage |
| Object Methods | Object.keys(obj), Object.values(obj) | Retrieves keys, values, or entries from an object | Iterates objects effectively |
| Map and Set | new Map(), new Set() | Efficient data structures for key-value pairs and unique values | Use .has() and .add() for checks and additions |
| Regular Expressions | /pattern/.test(string) | Matches patterns in strings | Use exec() for detailed match results |
| Short-Circuiting | `const x = a | b;<br>a && b;` |
| Nullish Coalescing | const x = a ?? b; | Returns right operand if left is null or undefined | More precise than ` |
| Debouncing | const fn = debounce(func, delay); | Limits frequency of a function execution | Useful for optimizing event handlers |
| Throttling | const fn = throttle(func, delay); | Ensures a function runs at most once per specified interval | Often used in scroll or resize events |
| Event Loop | Explains how JS handles async operations | JS uses a single-threaded model with non-blocking asynchronous APIs | Learn tasks, microtasks, and priorities |
| Arrow Function + This | No binding of this in arrow functions | Retains this from enclosing context | Useful in callbacks |
| Optional Chaining | obj?.prop?.nestedProp | Safely accesses nested properties | Avoids runtime errors on null or undefined |
| Dynamic Imports | import('./module.js').then(module => { }); | Lazily load modules | Useful for performance optimization |
| Optional Parameters | function fn(a, b = 10) { } | Allows setting default values for function parameters | Provides flexibility in function calls |
| SetTimeout with Arguments | setTimeout(fn, ms, arg1, arg2) | Passes additional arguments to the callback function | Useful for dynamic time-based executions |
| GlobalThis | globalThis.property | A standardized way to access the global object | Works across environments (browser, Node.js, etc.) |
| Intl API | new Intl.NumberFormat().format(num) | Formats numbers, dates, and strings for internationalization | Use Intl.DateTimeFormat for date localization |
| WeakMap and WeakSet | new WeakMap(), new WeakSet() | Holds objects without preventing garbage collection | Ideal for private properties and memory optimization |
| Symbol Data Type | const sym = Symbol('desc'); | Creates unique and immutable values | Used for creating custom object properties |
| Proxy Object | new Proxy(target, handler) | Intercepts and customizes operations on objects | Useful for validation, logging, or data binding |
| BigInt | const big = 123n; | Represents integers with arbitrary precision | Use BigInt for calculations beyond Number.MAX_SAFE_INTEGER |
| Dynamic Property Keys | const obj = { [keyName]: value }; | Creates object keys dynamically | Enables flexibility in object creation |
FAQs
Why is JavaScript important for developers?
JavaScript is a versatile, client-side language that powers interactive web applications. It is crucial for front-end, back-end, and even mobile development.
What are some advanced features included in the cheat sheet?
Features like Promises, Async/Await, Proxy Objects, WeakMap, Symbols, and the Intl API are considered advanced and are covered in the cheat sheet.
Can I use this cheat sheet for ES6+ JavaScript?
Yes, the cheat sheet includes modern JavaScript features introduced in ES6 and later versions, like template literals, arrow functions, and the spread operator.
What are some commonly used array methods in JavaScript?
Methods like .map(), .filter(), .reduce(), .push(), and .pop() are commonly used to manipulate and transform arrays.
Is JavaScript only used for front-end development?
No, JavaScript is also used for back-end development with frameworks like Node.js and for building mobile applications with tools like React Native.
How can I format numbers or dates in JavaScript?
You can use the Intl.NumberFormat and Intl.DateTimeFormat APIs to format numbers and dates for different locales.
Are there any features to handle asynchronous tasks in JavaScript?
Yes, JavaScript provides Promises, Async/Await, and the Fetch API for handling asynchronous tasks effectively.
