[{"data":1,"prerenderedAt":97},["ShallowReactive",2],{"blog-tech-javascript":3},[4,25,40,55,69,82],{"id":5,"slug":6,"title":7,"subtitle":8,"shortDescription":9,"description":10,"featureImage":11,"category":12,"tags":13,"author":17,"publishedDate":18,"featured":19,"relatedPosts":20,"tech":24},13,"es2024-new-features","ES2024 New Features You Should Know","Exploring the latest JavaScript features","ES2024 introduces Array grouping, Promise.withResolvers, and more powerful features.","ES2024 (ES15) brings several new features to JavaScript. Let's explore the most important ones.\n\n## Object.groupBy() and Map.groupBy()\n\n```javascript\nconst products = [\n  { name: 'Apple', category: 'fruit' },\n  { name: 'Carrot', category: 'vegetable' },\n  { name: 'Banana', category: 'fruit' }\n]\n\nconst grouped = Object.groupBy(products, product => product.category)\n\u002F\u002F { fruit: [{...}, {...}], vegetable: [{...}] }\n```\n\n## Promise.withResolvers()\n\n```javascript\nconst { promise, resolve, reject } = Promise.withResolvers()\n\n\u002F\u002F Use resolve\u002Freject anywhere\nsetTimeout(() => resolve('Done!'), 1000)\n\nawait promise \u002F\u002F 'Done!'\n```\n\n## Well-Formed Unicode Strings\n\n```javascript\nconst str = 'Hello\\uD800World'\nconst wellFormed = str.toWellFormed()\n\u002F\u002F 'Hello\\uFFFDWorld'\n\nstr.isWellFormed() \u002F\u002F false\nwellFormed.isWellFormed() \u002F\u002F true\n```\n\n## ArrayBuffer Transfer\n\n```javascript\nconst buffer = new ArrayBuffer(8)\nconst newBuffer = buffer.transfer(16)\n\u002F\u002F buffer is now detached\n\u002F\u002F newBuffer has 16 bytes with original data\n```\n\n## Atomics.waitAsync()\n\nFor better async coordination in SharedArrayBuffer:\n\n```javascript\nconst result = Atomics.waitAsync(int32Array, 0, 0)\nresult.value.then(() => console.log('Value changed!'))\n```\n\n## Browser Support\n\nAll major browsers support these features. For older environments, use polyfills.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1579468118864-1b9ea3c0db4a?w=800&auto=format&fit=crop","JavaScript",[14,12,15,16],"ES2024","New Features","ECMAScript","Satish Vishwakarma","2026-04-16",true,[21,22,23],14,15,16,"javascript",{"id":21,"slug":26,"title":27,"subtitle":28,"shortDescription":29,"description":30,"featureImage":31,"category":12,"tags":32,"author":17,"publishedDate":37,"featured":19,"relatedPosts":38,"tech":24},"javascript-closures-deep-dive","JavaScript Closures: A Deep Dive","Understanding closures and their practical applications","Master JavaScript closures to write more powerful and flexible code.","Closures are one of the most powerful features in JavaScript. Let's understand them thoroughly.\n\n## What is a Closure?\n\nA closure is a function that has access to variables from its outer (enclosing) scope, even after that scope has finished executing.\n\n```javascript\nfunction createCounter() {\n  let count = 0  \u002F\u002F Private variable\n  \n  return {\n    increment() {\n      count++\n      return count\n    },\n    decrement() {\n      count--\n      return count\n    },\n    getCount() {\n      return count\n    }\n  }\n}\n\nconst counter = createCounter()\ncounter.increment() \u002F\u002F 1\ncounter.increment() \u002F\u002F 2\ncounter.getCount() \u002F\u002F 2\n```\n\n## Practical Use Cases\n\n### Data Privacy\n\n```javascript\nfunction createBankAccount(initialBalance) {\n  let balance = initialBalance\n  \n  return {\n    deposit(amount) {\n      balance += amount\n      return balance\n    },\n    withdraw(amount) {\n      if (amount \u003C= balance) {\n        balance -= amount\n        return balance\n      }\n      throw new Error('Insufficient funds')\n    },\n    getBalance() {\n      return balance\n    }\n  }\n}\n```\n\n### Function Factories\n\n```javascript\nfunction createMultiplier(multiplier) {\n  return function(number) {\n    return number * multiplier\n  }\n}\n\nconst double = createMultiplier(2)\nconst triple = createMultiplier(3)\n\ndouble(5)  \u002F\u002F 10\ntriple(5)  \u002F\u002F 15\n```\n\n## Common Pitfalls\n\n### Loop Variable Capture\n\n```javascript\n\u002F\u002F Problem\nfor (var i = 0; i \u003C 3; i++) {\n  setTimeout(() => console.log(i), 100)\n}\n\u002F\u002F Outputs: 3, 3, 3\n\n\u002F\u002F Solution: Use let\nfor (let i = 0; i \u003C 3; i++) {\n  setTimeout(() => console.log(i), 100)\n}\n\u002F\u002F Outputs: 0, 1, 2\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1515879218367-8466d910aaa4?w=800&auto=format&fit=crop",[33,34,35,36],"Closures","Scope","Functions","Advanced","2026-04-11",[5,22,39],17,{"id":22,"slug":41,"title":42,"subtitle":43,"shortDescription":44,"description":45,"featureImage":46,"category":12,"tags":47,"author":17,"publishedDate":52,"featured":53,"relatedPosts":54,"tech":24},"async-await-best-practices","Async\u002FAwait Best Practices in JavaScript","Write cleaner asynchronous code","Learn the best practices for using async\u002Fawait in modern JavaScript.","Async\u002Fawait makes asynchronous code easier to write and read. Let's explore best practices.\n\n## Basic Usage\n\n```javascript\nasync function fetchUser(id) {\n  try {\n    const response = await fetch(`\u002Fapi\u002Fusers\u002F${id}`)\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`)\n    }\n    return await response.json()\n  } catch (error) {\n    console.error('Failed to fetch user:', error)\n    throw error\n  }\n}\n```\n\n## Parallel Execution\n\n```javascript\n\u002F\u002F Sequential - Slow\nasync function getDataSequential() {\n  const users = await fetchUsers()\n  const posts = await fetchPosts()\n  return { users, posts }\n}\n\n\u002F\u002F Parallel - Fast\nasync function getDataParallel() {\n  const [users, posts] = await Promise.all([\n    fetchUsers(),\n    fetchPosts()\n  ])\n  return { users, posts }\n}\n```\n\n## Error Handling Patterns\n\n### Individual Error Handling\n\n```javascript\nconst [usersResult, postsResult] = await Promise.allSettled([\n  fetchUsers(),\n  fetchPosts()\n])\n\nif (usersResult.status === 'fulfilled') {\n  console.log(usersResult.value)\n}\n```\n\n### Wrapper Function\n\n```javascript\nasync function safeAsync(promise) {\n  try {\n    const data = await promise\n    return [data, null]\n  } catch (error) {\n    return [null, error]\n  }\n}\n\nconst [user, error] = await safeAsync(fetchUser(1))\nif (error) {\n  \u002F\u002F Handle error\n}\n```\n\n## Common Mistakes\n\n### Forgetting await\n\n```javascript\n\u002F\u002F Bug: returns Promise, not data\nfunction getData() {\n  return fetch('\u002Fapi\u002Fdata').then(r => r.json())\n}\n\n\u002F\u002F Fix\nasync function getData() {\n  return await fetch('\u002Fapi\u002Fdata').then(r => r.json())\n}\n```\n\n### Await in Loops\n\n```javascript\n\u002F\u002F Slow: sequential\nfor (const id of ids) {\n  await processItem(id)\n}\n\n\u002F\u002F Fast: parallel\nawait Promise.all(ids.map(id => processItem(id)))\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1542831371-29b0f74f9713?w=800&auto=format&fit=crop",[48,49,50,51],"Async\u002FAwait","Promises","Asynchronous","Best Practices","2026-04-06",false,[5,21,23],{"id":23,"slug":56,"title":57,"subtitle":58,"shortDescription":59,"description":60,"featureImage":61,"category":12,"tags":62,"author":17,"publishedDate":67,"featured":53,"relatedPosts":68,"tech":24},"javascript-debounce-throttle","Debounce vs Throttle: When to Use Each","Optimizing event handlers for performance","Learn the difference between debounce and throttle and when to use each technique.","Debounce and throttle are essential techniques for optimizing performance. Let's understand when to use each.\n\n## Debounce\n\nDebounce delays execution until after a period of inactivity.\n\n```javascript\nfunction debounce(fn, delay) {\n  let timeoutId\n  return function (...args) {\n    clearTimeout(timeoutId)\n    timeoutId = setTimeout(() => fn.apply(this, args), delay)\n  }\n}\n\n\u002F\u002F Usage: Search input\nconst handleSearch = debounce((query) => {\n  fetchSearchResults(query)\n}, 300)\n\ninput.addEventListener('input', (e) => handleSearch(e.target.value))\n```\n\n**Use debounce for:**\n- Search inputs\n- Window resize handlers\n- Form auto-save\n- Button clicks (prevent double-click)\n\n## Throttle\n\nThrottle ensures a function executes at most once per time period.\n\n```javascript\nfunction throttle(fn, limit) {\n  let inThrottle\n  return function (...args) {\n    if (!inThrottle) {\n      fn.apply(this, args)\n      inThrottle = true\n      setTimeout(() => inThrottle = false, limit)\n    }\n  }\n}\n\n\u002F\u002F Usage: Scroll handler\nconst handleScroll = throttle(() => {\n  updateScrollPosition()\n}, 100)\n\nwindow.addEventListener('scroll', handleScroll)\n```\n\n**Use throttle for:**\n- Scroll events\n- Mouse move tracking\n- Game loop updates\n- API rate limiting\n\n## Visual Comparison\n\n```\nEvents:    |--x-x-x-x-x-x-x-------x-x-x-x|\n\nDebounce:  |------------------------x----|\n           (Fires after last event + delay)\n\nThrottle:  |--x-----x-----x-------x------|\n           (Fires at regular intervals)\n```\n\n## Advanced: Leading & Trailing\n\n```javascript\nfunction debounce(fn, delay, { leading = false, trailing = true } = {}) {\n  let timeoutId\n  let lastCallTime\n  \n  return function (...args) {\n    const now = Date.now()\n    \n    if (leading && (!lastCallTime || now - lastCallTime > delay)) {\n      fn.apply(this, args)\n      lastCallTime = now\n    }\n    \n    clearTimeout(timeoutId)\n    \n    if (trailing) {\n      timeoutId = setTimeout(() => {\n        fn.apply(this, args)\n        lastCallTime = Date.now()\n      }, delay)\n    }\n  }\n}\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1504868584819-f8e8b4b6d7e3?w=800&auto=format&fit=crop",[63,64,65,66],"Debounce","Throttle","Performance","Event Handling","2026-03-30",[21,22,39],{"id":39,"slug":70,"title":71,"subtitle":72,"shortDescription":73,"description":74,"featureImage":75,"category":12,"tags":76,"author":17,"publishedDate":80,"featured":19,"relatedPosts":81,"tech":24},"javascript-event-loop-explained","JavaScript Event Loop Explained","Understanding how JavaScript handles asynchronous operations","A deep dive into the JavaScript event loop and how it manages async code.","Understanding the event loop is crucial for writing efficient JavaScript. Let's break it down.\n\n## The Call Stack\n\nJavaScript is single-threaded, with one call stack:\n\n```javascript\nfunction third() { console.log('Third') }\nfunction second() { third(); console.log('Second') }\nfunction first() { second(); console.log('First') }\n\nfirst()\n\u002F\u002F Third, Second, First\n```\n\n## Web APIs and Task Queue\n\n```javascript\nconsole.log('Start')\n\nsetTimeout(() => {\n  console.log('Timeout')\n}, 0)\n\nconsole.log('End')\n\n\u002F\u002F Output: Start, End, Timeout\n```\n\n## Microtasks vs Macrotasks\n\n```javascript\nconsole.log('1')\n\nsetTimeout(() => console.log('2'), 0)\n\nPromise.resolve().then(() => console.log('3'))\n\nconsole.log('4')\n\n\u002F\u002F Output: 1, 4, 3, 2\n```\n\n**Microtasks (higher priority):**\n- Promise callbacks\n- queueMicrotask()\n- MutationObserver\n\n**Macrotasks:**\n- setTimeout\u002FsetInterval\n- I\u002FO operations\n- UI rendering\n\n## Event Loop Cycle\n\n1. Execute all synchronous code\n2. Execute all microtasks\n3. Execute one macrotask\n4. Repeat\n\n## Practical Example\n\n```javascript\nasync function async1() {\n  console.log('async1 start')\n  await async2()\n  console.log('async1 end')\n}\n\nasync function async2() {\n  console.log('async2')\n}\n\nconsole.log('script start')\n\nsetTimeout(() => console.log('setTimeout'), 0)\n\nasync1()\n\nnew Promise((resolve) => {\n  console.log('promise1')\n  resolve()\n}).then(() => console.log('promise2'))\n\nconsole.log('script end')\n\n\u002F\u002F Output:\n\u002F\u002F script start\n\u002F\u002F async1 start\n\u002F\u002F async2\n\u002F\u002F promise1\n\u002F\u002F script end\n\u002F\u002F async1 end\n\u002F\u002F promise2\n\u002F\u002F setTimeout\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1484417894907-623942c8ee29?w=800&auto=format&fit=crop",[77,78,79,36],"Event Loop","Async","Concurrency","2026-03-22",[21,22,23],{"id":83,"slug":84,"title":85,"subtitle":86,"shortDescription":87,"description":88,"featureImage":89,"category":12,"tags":90,"author":17,"publishedDate":95,"featured":53,"relatedPosts":96,"tech":24},18,"javascript-modern-array-methods","Modern JavaScript Array Methods You Should Know","Essential array methods for cleaner code","Master modern array methods to write more expressive JavaScript code.","Modern JavaScript provides powerful array methods. Let's explore the essential ones.\n\n## Array.prototype.at()\n\n```javascript\nconst arr = [1, 2, 3, 4, 5]\n\narr.at(0)   \u002F\u002F 1\narr.at(-1)  \u002F\u002F 5 (last element)\narr.at(-2)  \u002F\u002F 4\n```\n\n## Array.prototype.findLast()\n\n```javascript\nconst numbers = [1, 2, 3, 4, 5, 4, 3]\n\nnumbers.findLast(n => n > 3)      \u002F\u002F 4\nnumbers.findLastIndex(n => n > 3) \u002F\u002F 5\n```\n\n## Array.prototype.toSorted()\n\nNon-mutating sort:\n\n```javascript\nconst original = [3, 1, 4, 1, 5]\nconst sorted = original.toSorted()\n\nconsole.log(original) \u002F\u002F [3, 1, 4, 1, 5]\nconsole.log(sorted)   \u002F\u002F [1, 1, 3, 4, 5]\n```\n\n## Array.prototype.toReversed()\n\n```javascript\nconst arr = [1, 2, 3]\nconst reversed = arr.toReversed()\n\nconsole.log(arr)      \u002F\u002F [1, 2, 3]\nconsole.log(reversed) \u002F\u002F [3, 2, 1]\n```\n\n## Array.prototype.toSpliced()\n\n```javascript\nconst arr = [1, 2, 3, 4, 5]\nconst newArr = arr.toSpliced(1, 2, 'a', 'b')\n\nconsole.log(arr)    \u002F\u002F [1, 2, 3, 4, 5]\nconsole.log(newArr) \u002F\u002F [1, 'a', 'b', 4, 5]\n```\n\n## Array.prototype.with()\n\n```javascript\nconst arr = [1, 2, 3]\nconst newArr = arr.with(1, 'two')\n\nconsole.log(arr)    \u002F\u002F [1, 2, 3]\nconsole.log(newArr) \u002F\u002F [1, 'two', 3]\n```\n\n## Practical Examples\n\n```javascript\n\u002F\u002F Chain methods for powerful transformations\nconst users = [\n  { name: 'Alice', age: 30 },\n  { name: 'Bob', age: 25 },\n  { name: 'Charlie', age: 35 }\n]\n\nconst result = users\n  .filter(u => u.age >= 25)\n  .toSorted((a, b) => a.age - b.age)\n  .map(u => u.name)\n\n\u002F\u002F ['Bob', 'Alice', 'Charlie']\n```","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1516116216624-53e697fedbea?w=800&auto=format&fit=crop",[91,92,93,94],"Arrays","Methods","ES2023","Modern JavaScript","2026-03-15",[5,21,23],1779734543423]