Computed Property Names in Javascript

Computed Property Names is an ES6 feature which allows the names of object properties in JavaScript object literal notation to be determined dynamically, i.e. computed. JavaScript objects are really dictionaries, so it was always possible to dynamically create a string and use it as a key with the syntax object[‘property’] = value. However, ES6 Computed Property Names allow us to use dynamically generated names within object literals. Example: const myPropertyName = 'c' const myObject = { a: 5, b: 10, [myPropertyName]: 15 } console....

February 3, 2023 · 1 min · Daman Arora

Replacing Switch Statements With Object Literals

A typical switch statement in javascript looks like this example below: var type = 'coke'; var drink; switch(type) { case 'coke': drink = 'Coke'; break; case 'pepsi': drink = 'Pepsi'; break; default: drink = 'Unknown drink!'; } console.log(drink); // 'Coke' It’s similar to if and else statements below: function getDrink (type) { if (type === 'coke') { type = 'Coke'; } else if (type === 'pepsi') { type = 'Pepsi'; } else if (type === 'mountain dew') { type = 'Mountain Dew'; } else if (type === 'lemonade') { type = 'Lemonade'; } else if (type === 'fanta') { type = 'Fanta'; } else { // acts as our "default" type = 'Unknown drink!...

February 3, 2023 · 2 min · Daman Arora

What Are Nested Routes and How to Implement Them Using React Router

Officially, Nested Routing is the general idea of coupling segments of the URL to component hierarchy and data. In my own words, a nested route is a region within a page layout that reacts to route changes. For example, in a single-page application, when navigating from one URL to another, you do not need to render the entire page, but only those regions within the page that are dependent on that URL change....

January 31, 2023 · 1 min · Daman Arora

Exploring the Core Redux Concepts

So, let’s try to explore the core redux concepts by creating a simple counter application. Redux Store First thing we need is a redux store. Let’s create one. const store = redux.createdStore(); Reducer This store is responsible to hold our data. The data it holds is determined by the reducer. The reducer has one job, i.e. to spit out a new snapshot of the store when an action occurs. So, the next thing we want to add is a reducer function....

January 26, 2023 · 2 min · Daman Arora

In order to understand Redux, you must understand Redux

I started learning Redux this week and while doing so, I realized that before I learn the core Redux library and the functions it has to offer, I’d be better off learning about the Redux as a design pattern for global state management. With a thorough understanding of the Redux design pattern, I can utilize the best tools available to implement the pattern (i.e. the Redux toolkit and Redux library) to their full potential....

January 23, 2023 · 2 min · Daman Arora