Javascript
161 bites tagged Javascript — interview questions with model answers, and 60-second explainers.
Axios: A Simpler Way to Make HTTP Requests
Axios simplifies making network requests by wrapping native browser APIs in a promise-based client. Use it to GET or POST data in any JavaScript app. The main footgun is forgetting requests are asynchronous; you must use `async/await` to get the data.
Immer: Write Mutable Code for Immutable State
Immer lets you write simple, mutable-style code to produce an immutable next state. It's essential in Redux or with React's useState to avoid complex spread operators for deep updates. The footgun: mutations are only safe inside Immer's `produce` function.
Redux Middleware: Intercepting Actions Before Reducers
Redux middleware is like an Express middleware for your state, intercepting actions before they hit the reducer. It's used for logging, crash reporting, or async API calls. The footgun is forgetting to call `next(action)`, which silently blocks the action.
Redux: A Single Source of Truth for App State
Redux centralizes app state into a single "store." Instead of components managing state locally, they dispatch actions to a global reducer. Use it when many components share data.
Passing Data to Routes in React Native
Think of it like passing arguments to a function. When you navigate to a new screen, you give it the data it needs, like a product ID. This is key for master-detail views. The footgun: only pass JSON-serializable data to avoid breaking state persistence.
Stack Navigator: JavaScript-based Screen Transitions
Stack Navigator treats your screens like a stack of cards: push a new screen on top, pop it off to go back. It’s ideal for standard navigation flows, but its JavaScript-based implementation means you trade the performance of a native solution for…
Hermes: The JS Engine for Faster React Native Apps
Hermes is a JavaScript engine optimized for React Native that prioritizes fast startup and low memory use. It's the default for new apps, pre-compiling JS to bytecode at build time. The footgun: don't just check a global variable; benchmark release builds.
Metro: The JavaScript Bundler for React Native
Metro bundles your React Native app's JavaScript, finding all modules, transpiling them for the device, and merging them into one file. It's what powers `npx react-native start`.
Sinon.JS: Isolate and Inspect Code for Unit Tests
Sinon.JS lets you replace real functions with test doubles to check *if* and *how* they were called. Use it to fake network requests or control timers. The biggest footgun is forgetting to restore fakes, which causes tests to leak state and fail unpredictably.
SharedArrayBuffer: True Shared Memory for JS Threads
SharedArrayBuffer is a shared whiteboard for JS threads, letting them access the same memory without slow data copies. It's used for high-performance parallel tasks. The footgun: without `Atomics` to coordinate, you'll get race conditions and corrupted data.
Chai: Assertions for Readable JavaScript Tests
Chai makes your JavaScript tests read like sentences. It provides assertion styles like `expect(value).to.equal(5)` to verify code behavior in test frameworks like Mocha. The main footgun: the `should` style fails silently on null or undefined values.
Mocha: A Flexible JavaScript Test Runner
Mocha is a flexible JavaScript test runner, providing structure but not assertions. It organizes and executes tests in Node.js and browsers, excelling with asynchronous code. The main footgun is forgetting you must pair it with an assertion library like Chai.
Jest: A Batteries-Included JavaScript Test Framework
Jest is a 'batteries-included' JavaScript test framework, bundling a runner, assertions, and mocks for a zero-config experience. It's a go-to for testing Node, React, and TypeScript apps. Footgun: Snapshot tests only catch unexpected changes, not flawed logic.
Joi: Declarative Schemas for Data Validation
Joi lets you describe your data's shape with a readable schema instead of writing manual validation logic. It's used to validate API request bodies or config files.
Custom Error Classes: Beyond Generic Errors
Create specific error types, like `NotFoundError`, instead of generic ones. This lets your code react differently to different failures, like sending a 404 for a missing user vs. a 500 for a database outage.
Top-Level Await: `await` Without an `async` Function
Top-level await lets you use `await` directly in an ES module, no `async` function needed. Use it to initialize resources like database connections on startup. The footgun: the entire module's execution blocks until the promise resolves, delaying startup.
Promise.any(): Get the Fastest Successful Result
Promise.any() is a race where only finishers count. It returns the value of the first promise to succeed, ignoring any that fail. Use it to query redundant endpoints and take the first successful response.
Promise.allSettled(): Never Fail a Batch of Promises
Promise.allSettled() waits for every promise in a set to finish, success or fail, without short-circuiting. Use it for independent tasks, like multiple API calls, where you need the outcome of each.
Promise.race(): First Promise to Settle Wins
Promise.race() returns a promise that mirrors the outcome of the first promise in a set to finish—the winner takes all, whether it resolves or rejects. Use it to set a timeout on a network request.
Promise.all(): Wait for Multiple Promises at Once
Promise.all() runs multiple promises in parallel, resolving only when all have succeeded. It's for when you need data from several API endpoints to render a single component.
Async/Await: Write Non-Blocking Code That Reads Synchronously
async/await lets you write non-blocking code that reads like simple, synchronous logic. It's used for network requests or database queries without freezing your app. The biggest footgun is using `await` inside a function you forgot to declare as `async`.
Promise .catch(): Handling Rejections
`.catch()` is the `try...catch` for promises, intercepting errors (rejections) in a chain. Use it at the end of a promise chain to handle failures from preceding steps, like a failed API call. The footgun: placing it mid-chain can swallow errors.
Promise.then(): Each Call Returns a New Promise
Each `.then()` call returns a new promise, letting you chain async tasks sequentially. This is key for multi-step operations like API calls. The footgun is attaching multiple `.then()`s to the original promise, which executes them in parallel, not in sequence.
JavaScript Promises: Handling Future Values
A Promise is an IOU for a future value from an async operation. Instead of blocking your code, you get an object that will eventually contain the result or an error. They're essential for API calls or file reads.
Get Javascript bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.