05 JavaScript One-Liners for every Project

Mehrab-18 — Mon, 13 Mar 2023 07:36:56 +0000

JavaScript is a powerful language that can accomplish a lot with minimal code.

The code snippets known as one-liners exemplify this, as they often perform complex tasks in just a single line. In this article, we'll explore 10 essential one-liners that you should use in almost every JavaScript project.

Capitalize Text Capitalizing strings is not a built-in feature of JavaScript, but it's a task we often need to perform. To capitalize a string, we can create a capitalize function that accepts a string and makes the first letter uppercase, then appends the rest of the string.

Get a Random Element Getting a random element from an array is helpful when you want to create unique experiences for users. For instance, you might want to display a different congratulations message based on some action. The getRandomItem function accepts an array of items and uses the Math.random() function to select a random index, which can then be used to select a random element.

Remove Duplicate Elements Removing duplicate values from an array is a common task in JavaScript. For instance, you might be adding a user to another user's friends list, but you don't want to add that user more than once. The removeDuplicates function uses the Set constructor in JavaScript, which removes any duplicate (primitive) values by default. After that, we use the spread operator ... to spread the values into a new array.

Wait for a Certain Period of Time The wait function accepts a parameter of the number of milliseconds to wait, and returns a promise that resolves after the specified amount of time has passed.

To use the wait function, you can simply call it and provide the number of milliseconds to wait. You can then use the then callback or the await keyword to wait for the promise to resolve before continuing with the rest of your code.

For example, if you want to wait for 2 seconds before navigating to a signup page, you can use the then callback like this:

Or you can use the await keyword like this:

Sort Elements By Certain Property A common task when displaying data in JavaScript is to sort it based on some property.

The below function uses the native sort method, compares the elements in the array based off of the provided key, and sorts the array in ascending order.

Where would this be helpful? If you're fetching data that is supposed to be in a certain position based off of a position key, function will make sure that those elements are placed in the proper order.

Here's an example code snippet:

In this example, we define a function sortObjectsByProperty that takes in an array and a property name as arguments. Inside the function, we call the sort method on the array and pass in a compare function that compares the property values of two objects. The sorted array is then returned.

In conclusion, JavaScript is a powerful and flexible programming language that can be used to create a wide variety of applications, from simple scripts to complex web applications. With its many built-in methods and functions, developers can write efficient and concise code that can be easily maintained and updated. The examples above demonstrate just a few of the many useful features and techniques that JavaScript has to offer. By mastering these techniques and continuing to learn and explore the language, developers can create truly remarkable applications and enhance their skills as software engineers.

Protected Routes in React Router V6

Mehrab-18 — Sat, 21 Jan 2023 07:28:53 +0000

In React router, Private Routes commonly known as 'Protected Routes' are routes that requires a user being authorized to visit that route. Hence if a user is not authorized for a page, they cannot access it.Authorization is far more than only authentication. For example, we can use it when we have roles and permissions in specific areas of the application.

In this article, I want to share with you that how to implement Protected Routes in React Router V6?

Get Source Code

Prerequisites?
Make sure to install react-router and react-router-dom dependencies

File Structure

We have pages folder where we have all our components and a utils folder where we have a component with our authentication logic.

index.js

Start from wrapping your component with from react-router-dom

App.js

So, setting up our App.js we will have component that will contain all of our Routes. Now to protect some routes we will write them inside another component ant this route will be our component that will contain our logic

ProtectedRoutes.js

This component will have a simple logic i.e. if user's authenticated direct it to the Child component that is our current route path and if a user isn't authenticated navigate it to our home page with path "/". Simple as that!

Hopefully, this article helped you understand implementing protected routes in react router v6. After completely understanding you'll be able to implement Protected Routes in your react app.

Let's Build Safer React Apps!

DEV Community: Mehrab-18

05 JavaScript One-Liners for every Project

JavaScript is a powerful language that can accomplish a lot with minimal code.

Protected Routes in React Router V6