DEV Community: ashwani3011

Destructuring and Spread Operators: Why and When to Use?

ashwani3011 — Sat, 15 Jul 2023 14:37:57 +0000

Imagine you're a detective trying to solve a crime. You've just received a list of suspects and their corresponding alibis from your informant. However, the list is a mess and it's difficult to find the information you need.

That's where destructuring and spread operators come in. With these tools, we can quickly extract the relevant information from the list and work with it in a more organized and efficient way.

⭐ Destructuring

Destructuring allows us to extract values from arrays and objects and assign them to variables in a concise syntax.

Destructuring an array:

const suspects = ['Alice', 'Bob', 'Mallory'];
const [firstSuspect, secondSuspect] = suspects;
console.log(firstSuspect); // 'Alice'
console.log(secondSuspect); // 'Bob'

As you can see, we were able to extract the first & second elements of the suspects array and assign them to variables using destructuring.

Destructuring an object:

const suspects = {
 'Alice': 'at the library',
 'Bob': 'at the gym',
 'Eve': 'at home',
 'Mallory': 'at the park'
};
const { Alice, Bob, Eve } = suspects;
console.log(Alice); // 'at the library'
console.log(Bob); // 'at the gym'
console.log(Eve); // 'at home'

⭐ Spread Operator

The spread operator allows us to add or spread out elements.

Add elements to an array:

const suspects = ['Alice', 'Bob', 'Eve', 'Mallory'];
const newSuspects = ['Frank', 'Gina', ...suspects];
console.log(newSuspects); // ['Frank', 'Gina', 'Alice', 'Bob', 'Eve', 'Mallory']

As we can see, we used the spread operator to add the elements from the suspects array to the newSuspects array.

Spread out elements in an array:

const suspects = ['Alice', 'Bob', 'Eve', 'Mallory'];
console.log(...suspects); // 'Alice', 'Bob', 'Eve', 'Mallory'

⭐ When to Use

1️⃣ When we want to extract multiple properties from an object: Instead of manually selecting each property, we can destructure them into separate variables.

2️⃣ When we want to set default values: If a value is not present in the object, destructuring allows us to set a default value.

const { Alice, Bob = "No evidence, but doubtful" } = suspects;

3️⃣ When we want to pass object properties as function parameters: Destructuring can be used to unpack object properties directly into function parameters.

4️⃣ When we want to clone an object or array: The spread operator allows us to easily create a copy of an object or array.

5️⃣ When we want to merge objects or arrays: We can use the spread operator to combine multiple objects or arrays into one.

⭐ Why to Use

1️⃣ It simplifies the syntax when dealing with data stored in objects and arrays.

2️⃣ Destructuring reduces the amount of code needed to extract data from objects and arrays.

3️⃣ Spread operator helps to make our code more readable and maintainable.

4️⃣ Spread operator provides a simple syntax for combining and copying data structures.

5️⃣ Spread operator provides an easy way to expand elements in iterable objects.

Can you explain the meaning of '^1.2.3' in a package.json file?

ashwani3011 — Sun, 09 Jul 2023 13:23:38 +0000

In this post, let's dive into npm versioning together and uncover its significance!

🌟 npm Versioning Basics:

1️⃣ Major Version (X.y.z): Signifies significant changes, often incompatible with previous versions.

2️⃣ Minor Version (x.Y.z): Introduces new features while maintaining backward compatibility.

3️⃣ Patch Version (x.y.Z): Reserved for bug fixes and minor updates, with no new features.

🌟 Symbols:

1️⃣ Tilde (~):

~ allows patch updates and compatible bug fixes.
Example: ~1.2.3 includes 1.2.4, 1.2.9, but not 1.3.0.

2️⃣ Caret (^):

^ includes minor and patch updates, including new features.
Example: ^1.2.3 includes 1.2.4, 1.3.0, but not 2.0.0.

🤔 So, how can we use this knowledge in our projects?

1️⃣ If you're developing an open-source library:

🌟 Increment the major version for breaking changes and major updates.

🌟 Increment the minor version for introducing new features and enhancements while maintaining backward compatibility.

🌟 Increment the patch version for bug fixes and minor updates that don't introduce new features.

2️⃣ When using someone else's library.

🌟 Use the ~ (tilde) symbol to allow patch updates and compatible bug fixes.

🌟 Use the ^ (caret) symbol to allow minor and patch updates, including new features.

🌟 Specify an exact version (without symbol) when you want to be precise about the dependency version used.

Happy coding!

Console.time() and Console.timeEnd()

ashwani3011 — Fri, 29 Apr 2022 09:20:57 +0000

When people use web applications, they want them to deliver fast and efficient performance. As a result, speed has become one of the top metrics that people use to assess the quality of an application.

So, as a developer when we start working on a real-life application, then it's not only about achieving the desired result, it's also about how performant our code is?

Generally there are multiple ways a work can be done and it becomes important to take an informed decision while opting for a particular solution.

⭐ The console object's time() and timeEnd() methods can be used to analyse the performance of a piece of code.

First we call console.time() by providing a string argument, then the code that we want to test, then we call **console.timeEnd() **with the same string argument. That's all we need to do, it will now show us the time it took to run this piece of code in our browser console.

Example:

Let's swap two variables in two different ways, and let's find which one is more time-efficient.

1. Destructuring assignment

let a = 3;
let b = 4;
console.time("Destructuring_assignment");
[a, b] = [b, a];
console.timeEnd("Destructuring_assignment");

O/P - Destructuring_assignment: 0.017333984375 ms

2. Temporary variable

let a = 3;
let b = 4;
let temp;
console.time("Temporary_variable");
temp = a;
a = b;
b = temp;
console.timeEnd("Temporary_variable");

O/P - Temporary_variable: 0.008056640625 ms

We can see that by using these techniques, we can quickly obtain the elapsed time in milliseconds, which will aid us in identifying the bottleneck in our code and refactoring it.

⛔Note: In this post, I'm talking about the solution by only considering the time factor. There are other factors also that need to be considered while working on a project.

Cookies, Local Storage & Session Storage

ashwani3011 — Sun, 24 Apr 2022 07:45:41 +0000

These are storage methods provided by the browser, to store information on the user's browser.

Now let's see what's the difference between them and how can we use them.

Local storage

➡️ Capacity - 10MB
➡️ Expiry - Never
➡️ Data accessibility - Any tab of a browser

➡️ Syntax -

1️⃣ Storing data

localStorage.setItem('name', 'Ashwani')

// Here the first parameter is the name and the second parameter is the value, both need to be in string format

2️⃣ Getting Data

localStorage.getItem('name')

// We need to specify the key for which we want to get the data

3️⃣ Removing Data

localStorage.removeItem('name')

Session Storage

➡️ Capacity - 5MB
➡️ Expiry - On tab close
➡️ Data accessibility - Same tab

➡️ Syntax - Exact same methods as localStorage

1️⃣ Storing data

sessionStorage.setItem('name', 'Ashwani')

2️⃣ Getting Data

sessionStorage.getItem('name')

3️⃣ Removing Data

sessionStorage.removeItem('name')

Cookies

➡️ Capacity - 4KB
➡️ Expiry - Manually set
➡️ Data accessibility - Any tab of a browser

➡️ Syntax -

document.cookie is used both for setting and getting the data.

1️⃣ Storing data

document.cookie = 'name = Ashwani'

⬇️ Manually setting expiry - we can use the expiry or max-age property.

document.cookie = "lastName = jha ; max-age = 10"

2️⃣ Getting Data

console.log(document.cookie)

// There's not any way to get a particular cookie data.

⭐ As we now know that all these three are methods to store data in the browser, but with cookie we can store data on the server as well.

Now, let's conclude this -

Most of the time we prefer local storage or session storage due to its simple syntax and large capacity, we use cookie when we need data on the server (e.g. authentication).

Function Currying in JavaScript

ashwani3011 — Tue, 29 Mar 2022 07:30:43 +0000

With the rapid rise of functional programming in JavaScript, a lot of attention has been given to the curried function. So in this post, let's discuss this.

⬇️ What is Function Currying ❓

Currying is a transformation that can be applied to functions to allow them to take one less argument than previously.

Okay okay, let's simplify this

Currying is when a function, rather than taking all arguments at once, takes the first one and returns a new function, which then takes the second one and returns a new function, and so on until all arguments are completed.

⬇️ Uses and Need of Function Currying ❓

➡️ It helps us to avoid passing the same variable again and again.

➡️ It separates our function into several smaller functions, each of which can handle a single duty. This ensures that our function is error-free and free of side effects.

➡️ It is used in functional programming to create a higher-order function.

➡️ It is extremely useful in event handling.

⬇️ How can we do Function Currying ❓

There are multiple ways by which we can do function currying, in this post we will discuss one of that methods.

⭐ Function Currying using Closures

function add (a) {
return function (b) {
console.log ( a + b );
};
}
add(2)(5);

Confused 😕❓, Let's discuss

Here, the result of add(a) is the wrapper function(b).

When it's called add(2), the argument is saved in the Lexical Environment, and a new wrapper is returned function(b).

Then this wrapper is called with ‘5’ as an argument, this wrapper will already have access to ‘a’ due to closure, which is currently equal to ‘2’, so we will get ‘7’ printed on the console.

Currying is a difficult concept to grasp. But, with time and practice, we can certainly get the hang of it.