JavaScript NoteBook
Published: June 27, 2024
•Last Updated: June 27, 2024
Here's a JavaScript cheat sheet tailored for React and Next.js development, focusing on essential JavaScript features and practices useful for these frameworks. This cheat sheet reflects modern JavaScript (ES6+).
JavaScript Cheat Sheet for React and Next.js
1. Variable Declaration
let name = "John"; // Mutable variable const age = 30; // Immutable variable
2. Template Literals
const greeting = `Hello, ${name}! You are ${age} years old.`; console.log(greeting); // Output: Hello, John! You are 30 years old.
3. Arrow Functions
const add = (a, b) => a + b; console.log(add(2, 3)); // Output: 5
4. Destructuring Assignment
// Array Destructuring const [first, second] = [10, 20]; console.log(first, second); // Output: 10 20 // Object Destructuring const user = { id: 1, username: "john_doe" }; const { id, username } = user; console.log(id, username); // Output: 1 john_doe
5. Spread and Rest Operator
// Spread Operator const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; console.log(arr2); // Output: [1, 2, 3, 4, 5] const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; console.log(obj2); // Output: { a: 1, b: 2, c: 3 } // Rest Operator const sum = (...numbers) => numbers.reduce((acc, num) => acc + num, 0); console.log(sum(1, 2, 3)); // Output: 6
6. Default Parameters
const multiply = (a, b = 2) => a * b; console.log(multiply(3)); // Output: 6 console.log(multiply(3, 4)); // Output: 12
7. Object Property Shorthand
const makeUser = (id, username) => ({ id, username }); console.log(makeUser(1, "john_doe")); // Output: { id: 1, username: 'john_doe' }
8. Optional Chaining and Nullish Coalescing
const user = { profile: { email: "john@example.com" } }; console.log(user.profile?.email); // Output: john@example.com console.log(user.profile?.phone); // Output: undefined const name = null; console.log(name ?? "Guest"); // Output: Guest
9. Array Methods
const numbers = [1, 2, 3, 4, 5]; // map const doubled = numbers.map(n => n * 2); console.log(doubled); // Output: [2, 4, 6, 8, 10] // filter const even = numbers.filter(n => n % 2 === 0); console.log(even); // Output: [2, 4] // find const firstEven = numbers.find(n => n % 2 === 0); console.log(firstEven); // Output: 2 // reduce const sum = numbers.reduce((total, n) => total + n, 0); console.log(sum); // Output: 15
10. Promises and Async/Await
// Promises const fetchData = () => new Promise((resolve, reject) => { setTimeout(() => resolve("Data fetched!"), 1000); }); fetchData().then(data => console.log(data)); // Output: Data fetched! // Async/Await const fetchDataAsync = async () => { const data = await fetchData(); console.log(data); // Output: Data fetched! }; fetchDataAsync();
11. Modules (Import/Export)
// file: math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; // file: app.js import { add, subtract } from './math.js'; console.log(add(5, 3)); // Output: 8 console.log(subtract(5, 3)); // Output: 2
12. Classes
class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); } } const john = new Person("John", 30); john.greet(); // Output: Hello, my name is John and I am 30 years old.
13. Error Handling
try { throw new Error("Something went wrong!"); } catch (error) { console.error(error.message); // Output: Something went wrong! } finally { console.log("Cleanup code runs regardless of error."); // Always runs }
14. Short-circuit Evaluation
const isLoggedIn = true; const userName = isLoggedIn && "JohnDoe"; console.log(userName); // Output: JohnDoe const loggedInUser = null; const defaultUser = loggedInUser || "Guest"; console.log(defaultUser); // Output: Guest
More Advanced JavaScript for React and Next.js Development
15. Advanced Destructuring
const user = { name: "John", age: 30, address: { city: "New York", zip: "10001" } }; const { name, address: { city, zip } } = user; console.log(name, city, zip); // Output: John New York 10001
16. Enhanced Object Literals
const createUser = (id, name, age) => ({ id, name, age, isActive: true, greet() { console.log(`Hello, ${this.name}!`); } }); const user = createUser(1, "John", 30); user.greet(); // Output: Hello, John!
17. Chaining Promises
const fetchData = () => new Promise((resolve) => { setTimeout(() => resolve("Data fetched!"), 1000); }); fetchData() .then(data => { console.log(data); // Output: Data fetched! return "Another data"; }) .then(moreData => console.log(moreData)); // Output: Another data
18. Async/Await with Error Handling
const fetchData = () => new Promise((resolve, reject) => { setTimeout(() => reject(new Error("Fetch failed!")), 1000); }); const fetchDataAsync = async () => { try { const data = await fetchData(); console.log(data); } catch (error) { console.error(error.message); // Output: Fetch failed! } }; fetchDataAsync();
19. Dynamic Imports
const loadModule = async () => { const { add, subtract } = await import('./math.js'); console.log(add(5, 3)); // Output: 8 console.log(subtract(5, 3)); // Output: 2 }; loadModule();
20. Generators
function* numberGenerator() { yield 1; yield 2; yield 3; } const gen = numberGenerator(); console.log(gen.next().value); // Output: 1 console.log(gen.next().value); // Output: 2 console.log(gen.next().value); // Output: 3
21. Set and Map
// Set const set = new Set([1, 2, 3, 3]); console.log(set); // Output: Set { 1, 2, 3 } set.add(4); console.log(set.has(2)); // Output: true // Map const map = new Map([["name", "John"], ["age", 30]]); console.log(map); // Output: Map { 'name' => 'John', 'age' => 30 } map.set("city", "New York"); console.log(map.get("city")); // Output: New York
22. Symbol
const sym1 = Symbol("identifier"); const sym2 = Symbol("identifier"); console.log(sym1 === sym2); // Output: false const obj = { [sym1]: "value" }; console.log(obj[sym1]); // Output: value
23. Proxy
const target = { message1: "hello", message2: "everyone" }; const handler = { get: (obj, prop) => { return prop in obj ? obj[prop] : "Property not found"; } }; const proxy = new Proxy(target, handler); console.log(proxy.message1); // Output: hello console.log(proxy.message3); // Output: Property not found
24. for...of
Loop
const array = [10, 20, 30]; for (const value of array) { console.log(value); // Output: 10, 20, 30 } const map = new Map([["a", 1], ["b", 2]]); for (const [key, value] of map) { console.log(key, value); // Output: a 1, b 2 }
25. for...in
Loop
const user = { name: "John", age: 30 }; for (const key in user) { if (user.hasOwnProperty(key)) { console.log(key, user[key]); // Output: name John, age 30 } }
26. Optional Chaining with Arrays
const users = [{ name: "John", details: { age: 30 } }, null, {}]; users.forEach(user => { console.log(user?.details?.age ?? "No age available"); // Output: 30, No age available, No age available });
27. Tagged Template Literals
const tag = (strings, ...values) => { return strings.raw[0] + values.map((value, i) => `${value}${strings.raw[i + 1]}`).join(''); }; const name = "John"; const age = 30; console.log(tag`Hello ${name}, you are ${age} years old!`); // Output: Hello John, you are 30 years old!
Advanced JavaScript Features for React and Next.js Development
28. Array Destructuring with Default Values
const [a = 10, b = 20] = [1]; console.log(a, b); // Output: 1 20
29. Nested Destructuring
const user = { name: "John", details: { age: 30, address: { city: "New York", zip: "10001" } } }; const { name, details: { age, address: { city, zip } } } = user; console.log(name, age, city, zip); // Output: John 30 New York 10001
30. Combining Arrays
const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const combined = [...array1, ...array2]; console.log(combined); // Output: [1, 2, 3, 4, 5, 6]
31. Combining Objects
const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const combined = { ...obj1, ...obj2 }; console.log(combined); // Output: { a: 1, b: 3, c: 4 }
32. Function Parameter Destructuring
const printUser = ({ name, age }) => { console.log(`Name: ${name}, Age: ${age}`); }; const user = { name: "John", age: 30 }; printUser(user); // Output: Name: John, Age: 30
33. Iterators and Generators
const myIterable = { *[Symbol.iterator]() { yield 1; yield 2; yield 3; } }; for (const value of myIterable) { console.log(value); // Output: 1, 2, 3 }
34. WeakMap and WeakSet
// WeakMap const weakMap = new WeakMap(); const obj = {}; weakMap.set(obj, "value"); console.log(weakMap.get(obj)); // Output: value // WeakSet const weakSet = new WeakSet(); const obj1 = {}; weakSet.add(obj1); console.log(weakSet.has(obj1)); // Output: true
35. Private Class Fields
class User { #name; constructor(name) { this.#name = name; } getName() { return this.#name; } } const user = new User("John"); console.log(user.getName()); // Output: John console.log(user.#name); // Error: Private field '#name' must be declared in an enclosing class
36. Static Methods
class MathUtil { static add(a, b) { return a + b; } } console.log(MathUtil.add(5, 3)); // Output: 8
37. Method Chaining
class Calculator { constructor(value = 0) { this.value = value; } add(value) { this.value += value; return this; } subtract(value) { this.value -= value; return this; } multiply(value) { this.value *= value; return this; } divide(value) { this.value /= value; return this; } } const result = new Calculator(10).add(5).subtract(3).multiply(2).divide(6).value; console.log(result); // Output: 4
38. Call, Apply, and Bind
const person = { name: "John", greet() { console.log(`Hello, ${this.name}!`); } }; // Call person.greet.call({ name: "Jane" }); // Output: Hello, Jane! // Apply person.greet.apply({ name: "Jane" }); // Output: Hello, Jane! // Bind const greetJane = person.greet.bind({ name: "Jane" }); greetJane(); // Output: Hello, Jane!
39. Debouncing and Throttling Functions
// Debounce const debounce = (func, delay) => { let debounceTimer; return function() { const context = this; const args = arguments; clearTimeout(debounceTimer); debounceTimer = setTimeout(() => func.apply(context, args), delay); }; }; // Throttle const throttle = (func, limit) => { let lastFunc; let lastRan; return function() { const context = this; const args = arguments; if (!lastRan) { func.apply(context, args); lastRan = Date.now(); } else { clearTimeout(lastFunc); lastFunc = setTimeout(() => { if (Date.now() - lastRan >= limit) { func.apply(context, args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } }; };
40. JSON Methods
const user = { name: "John", age: 30 }; // Convert object to JSON string const jsonString = JSON.stringify(user); console.log(jsonString); // Output: '{"name":"John","age":30}' // Parse JSON string to object const parsedUser = JSON.parse(jsonString); console.log(parsedUser); // Output: { name: 'John', age: 30 }
41. Fetch API
// GET request fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); // POST request fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'John', age: 30 }), }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
42. Local Storage and Session Storage
// Local Storage localStorage.setItem('name', 'John'); console.log(localStorage.getItem('name')); // Output: John localStorage.removeItem('name'); localStorage.clear(); // Session Storage sessionStorage.setItem('name', 'John'); console.log(sessionStorage.getItem('name')); // Output: John sessionStorage.removeItem('name'); sessionStorage.clear();
43. Intersection Observer API
const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { console.log('Element is in view:', entry.target); observer.unobserve(entry.target); } }); }); document.querySelectorAll('.observe').forEach(el => observer.observe(el));
44. Intl API for Formatting
// Number Formatting const number = 1234567.89; const formattedNumber = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number); console.log(formattedNumber); // Output: $1,234,567.89 // Date Formatting const date = new Date(); const formattedDate = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(date); console.log(formattedDate); // Output: June 26, 2024
These advanced features provide powerful tools for enhancing your JavaScript code and can be particularly useful in React and Next.js development. Understanding and utilizing these features will help you write more efficient, readable, and maintainable code.