The groupBy function is one of the functions why people use Lodash in their JavaScript code base. Here I want to give you a brief example on how to implement groupBy in vanilla JavaScript without Lodash by just using JavaScript's reduce method. Let's say we have the following array of objects and we want to group them by property (here color…

Eventually everyone came across the case that JavaScript's replace function, which is available on a JavaScript string primitive , does only replace one occurrence of the matched term. Here I want to show you briefly how to replace all occurrences in JavaScript with two different ways. The first way uses a regular expression to find all matches…

Functions are first-class citizens in JavaScript. That's why you will early on hear about callback functions in JavaScript, which are a super powerful asset when writing JavaScript code. Here I want to give you a brief introduction to them. Callback functions are usually passed as argument to functions: In this case, our printText function takes…

When you have learned about JavaScript promises for the first time, you learned about the promise's methods then and catch. While the former's callback function is called whenever a JavaScript promise resolves successfully, the latter is used for error handling: Eventually you have learned about async/await in JavaScript as alternative to a…

There are two error handling scenarios in JavaScript. Either an error is thrown from a third-party (e.g. library, database, API) or you want to throw an error yourself. While you have the error at your hands for the former, for the latter you need to new it yourself: Sometimes you want to throw custom errors though. I learned that you can create…

Today I came across a question in my Newsletter regarding computed properties in React. I didn't know about the term computed properties before, because such a term doesn't really exist in React, but it exists in other frameworks like Vue. Maybe I would call it computed values , computed state , or derived state (not from props though) in…

It doesn't happen often, but sometimes you have to update state from props in React. In this brief walkthrough, I want to show you a use case where you would want to derive state from props and how to do it for the initial props and updated props. Keep in mind that this concept should only be used rarely though, because often there is no need…

After learning how to pass props in React , the next thing you will learn is often state in React . Managing JavaScript primitives such as strings, booleans, and integers in React State are the basics for state management in React. But what about more complex data structures such as JavaScript arrays? There are many questions popping up for React…

Gatsby is an open-source framework based on React that helps build websites and apps. It allows you to build your website and apps using React and then generates HTML, CSS, and JS when you build for production. One of the many advantages of using Gatsby is that it allows accessing data through a query language called GraphQL. GraphQL is a query…