Every article tagged JavaScript, in one place.
Showing 24 articles
TypeScript is JavaScript with types. The types are checked at build time and then removed, so the code that runs is plain JavaScript. What you gain is autocomplete that knows your data and errors before your users find them. Inference does most of the work let...
If you learned Node.js a few years ago, you probably install packages for things the runtime now does itself. Here's a tour of built-ins in current LTS versions. fetch, WebSocket and Web APIs const res = await fetch('https://api.github.com/repos/nodejs/node');...
JavaScript gets a new edition every year. If you learned it a while ago, these additions will make your code shorter and safer. Safer property access const city = user?.address?.city; // undefined instead of a crash const limit = options.limit ?? 20; // only f...
Short answer: a closure is a function together with the variables from the scope where it was created. The function keeps access to those variables even after the outer function has returned. function makeCounter() { let count = 0; // captured by the inner fun...
await in a loop runs requests one after another. JavaScript's promise combinators let you run them together and decide how to handle failures. Sequential vs parallel // Slow: each request waits for the previous one for (const id of ids) { results.push(await fe...
Short answer: JavaScript runs on a single thread with a call stack. Async work (timers, network, I/O) is handled by the environment, which queues callbacks. The event loop takes the next callback when the stack is empty, always draining all microtasks before t...
Node.js supports two module systems: the original CommonJS ( require ) and standard ES modules ( import ). New projects should use ESM, but you'll meet both. Turning on ESM // package.json { "type": "module" } With "type": "module" , .js files are ESM. Without...
sort() , reverse() and splice() change the original array. That causes subtle bugs, especially with React state, where you must not mutate. ES2023 added non-mutating versions. The old trap const scores = [30, 10, 20]; const ranked = scores.sort((a, b) => b - a...
Short answer: === (strict equality) compares value and type with no conversion. == (loose equality) converts the operands to a common type first, which leads to surprising results. 1 === '1' // false - different types 1 == '1' // true - '1' converted to 1 0 ==...
Grouping a list (orders by status, posts by month, people by team) used to need reduce or lodash. Object.groupBy does it in one line. Object.groupBy const orders = [ { id: 1, status: 'paid', total: 500 }, { id: 2, status: 'pending', total: 250 }, { id: 3, stat...
Short answer: var is function-scoped and hoisted with the value undefined . let and const are block-scoped and can't be used before their declaration (the temporal dead zone). const can't be reassigned. Scope if (true) { var a = 1; let b = 2; } console.log(a);...
JavaScript has had Set since ES2015, but combining sets meant converting to arrays and filtering. ES2025 added the classic set operations as methods. The operations const frontend = new Set(['asha', 'ravi', 'meera']); const oncall = new Set(['ravi', 'kiran']);...
Short answer: for regular functions, this is decided by how the function is called , not where it's defined. Arrow functions don't have their own this ; they use the this of the surrounding scope. The rules, in order new : new User() - this is the new object....
Array methods create a whole new array at each step. Iterator helpers work on iterators instead and are lazy : values are processed one at a time, only as many as you need. The methods iterator.map(fn) iterator.filter(fn) iterator.take(n) iterator.drop(n) iter...
Short answer: a promise represents a value that will be available later; it's pending, then fulfilled or rejected. async / await is syntax on top of promises: an async function always returns a promise, and await pauses the function until a promise settles. Sa...
Date mixes up dates, times and time zones, months start at 0, and objects are mutable. Temporal is a new built-in API that fixes these problems. It has started shipping in browsers; elsewhere you can use the official polyfill. npm install @js-temporal/polyfill...
Short answer: every JavaScript object has an internal link to another object, its prototype . When you read a property that the object doesn't have, JavaScript looks it up along this prototype chain until it finds it or reaches null . const animal = { speak()...
Animating from one UI state to another (a thumbnail growing into a detail view, a list reordering) used to need a heavy animation library. The View Transitions API lets the browser do it. Same-page transitions function showDetails(item) { if (!document.startVi...
A closure is a function that remembers the variables from the place where it was created, even after that outer function has returned. Closures are behind callbacks, React hooks, module patterns and much more. Lexical scope const greeting = 'Hello'; function o...
Short answer: a shallow copy duplicates only the top level; nested objects are still shared. A deep copy duplicates every level, so changing the copy never affects the original. const original = { name: 'Asha', address: { city: 'Pune' } }; const shallow = { .....
Some events fire very often: typing, scrolling, resizing. Running expensive work (an API call, a layout calculation) on every event wastes resources and can make the page janky. Debounce: wait until things calm down Run the function only after the events have...
Task: write debounce(fn, wait) that returns a function which only calls fn after it stops being called for wait milliseconds. Typical use: search-as-you-type. Solution function debounce(fn, wait) { let timer; return function (...args) { clearTimeout(timer); //...
Users navigate away, type a new search or close a dialog while a request is still running. AbortController lets you cancel that work instead of letting it finish uselessly or, worse, overwrite newer results. Cancel a fetch const controller = new AbortControlle...
Short answer: event delegation means attaching one listener to a parent element instead of one per child. It works because most DOM events bubble up from the element where they happened through its ancestors. <ul id="todo-list"> <li data-id="1">Buy milk <butto...
