🚀 Modern JavaScript ES6-ES2023

var:

• Function-scoped (not block-scoped)
• Can be redeclared and reassigned
• Hoisted with undefined value
• Creates property on global object when declared globally

let:

• Block-scoped { }
• Cannot be redeclared, but can be reassigned
• Temporal Dead Zone (TDZ) - cannot access before declaration
• Best for variables that will change

const:

• Block-scoped { }
• Cannot be redeclared or reassigned
• Must be initialized at declaration
• Object/Array properties can still be modified (reference is constant, not content)

Arrow Functions: Concise syntax for writing functions with lexical 'this' binding.

Key differences from regular functions:

• No own 'this' - inherits from parent scope
• Cannot be used as constructors
• No 'arguments' object
• Implicit return for single expressions

Use in React:

• Event handlers: onClick={() => handleClick()}
• Array methods: data.map(item => <Component />)
• Functional components
• Callbacks in useEffect, useState

map(): Transforms each element and returns new array of same length

// React: Rendering list
users.map(user => <UserCard key={user.id} user={user} />)

filter(): Returns new array with elements that pass a test

// React: Filtering active users
activeUsers = users.filter(user => user.active)

reduce(): Reduces array to single value (sum, object, etc.)

// React: Calculate total price
const total = cart.reduce((sum, item) => sum + item.price, 0)

Can be chained:

products
  .filter(p => p.inStock)
  .map(p => p.price)
  .reduce((sum, price) => sum + price, 0)

Promises: Objects representing eventual completion/failure of async operation

Three states: Pending → Fulfilled/Rejected

Promise approach:

fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))
  .finally(() => setLoading(false))

Async/Await approach (cleaner):

async function fetchUsers() {
  try {
    const res = await fetch('/api/users');
    const data = await res.json();
    setUsers(data);
  } catch (error) {
    setError(error.message);
  } finally {
    setLoading(false);
  }
}

Key points:

• async functions always return a Promise
• await pauses execution until Promise resolves
• Always use try-catch for error handling
• finally block runs regardless of success/failure

Shallow Copy: Copies top-level properties only. Nested objects/arrays are still referenced.

// Spread operator (shallow)
const copy = { ...original };
const arrCopy = [...originalArr];

// Object.assign (shallow)
const copy = Object.assign({}, original);

Deep Copy: Creates completely independent copy with all nested levels.

// JSON method (limitations: no functions, dates, undefined)
const deepCopy = JSON.parse(JSON.stringify(original));

// structuredClone (modern, best)
const deepCopy = structuredClone(original);

// Lodash library
const deepCopy = _.cloneDeep(original);

React State Management:

• Never mutate state directly
• Use spread for shallow updates: setState({...state, name: 'New'})
• For nested updates, create new objects at each level

Debouncing: Delays function execution until after a specified time has passed since the last call.

Use cases: Search bars, auto-save, window resize

// Search implementation
const searchAPI = debounce((query) => {
  fetch(`/api/search?q=${query}`)
    .then(res => res.json())
    .then(setResults);
}, 500);

// In component
<input onChange={(e) => searchAPI(e.target.value)} />

Throttling: Ensures function executes at most once in a specified time period.

Use cases: Scroll events, button clicks, window resize with live updates

// Infinite scroll
const handleScroll = throttle(() => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    loadMoreData();
  }
}, 1000);

window.addEventListener('scroll', handleScroll);

Key Difference:

• Debounce: Wait until user stops (delay after last event)
• Throttle: Execute at regular intervals (ignore intermediate events)

Optional Chaining (?.): Safely access nested properties without checking each level

// Old way - verbose
const city = user && user.address && user.address.city;

// New way - concise
const city = user?.address?.city;

// Works with methods
user?.getName?.();

// Works with arrays
users?.[0]?.name;

Nullish Coalescing (??): Returns right operand only when left is null/undefined

// || problem: treats 0, '', false as falsy
const count = 0;
const value1 = count || 10;  // 10 (wrong!)
const value2 = count ?? 10;  // 0 (correct!)

// React example
function Component({ timeout = 0 }) {
  // timeout can be 0 (valid), but || would fail
  const delay = timeout ?? 1000;
}

Why better:

• Shorter, more readable code
• No runtime errors for undefined access
• ?? only checks null/undefined, not all falsy values
• Prevents bugs with 0, '', false values