Forem: AditiJ

Shallow Copy and Deep Copy

AditiJ — Mon, 06 Jun 2022 13:23:11 +0000

Introduction
Shallow Copy
Deep Copy
Summary
References

Introduction

Good day, folks!
Often times we want to create copies of variables for different purposes. There can be two different kinds of copies created - Shallow copy and Deep copy. We commonly encounter shallow copy and deep copy understanding and differences during interviews. So, let's go over the terminologies and related examples.

Shallow Copy

Shallow copy method creates a copy where the source and the copied variable reference remain the same. This means that modifications made in one place would affect both places.

Here's an example to get a better understanding:



const first_person = {
name: "Jack",
age: 24,
}

const second_person = first_person;

second_person.age = 25;

console.log(first_person.age); // output: 25
console.log(second_person.age); // output: 25

Changing the age property value of second_person object, changes the first_person object's age property too.

Now let's look at another example:



const first_person = {
  name: "Jack",
  age: 24
};
let second_person = first_person;
second_person = {
  name: "Jack",
  age: 23
};

console.log(first_person.age); // Output: 24
console.log(second_person.age); // Output: 23

Uh, what happened here? 🤔 Why aren't the values same?
Well, here we are not changing the values of a specific property rather we are assigning a new object.

Deep Copy

Deep copy method creates a copy where the source and the copied variable reference are completely different. This means that modifications made in one place would only affect the variable where we are making a change.

Now let's look at the examples:

If the objects/arrays are not nested, then we can achieve deep copy by using

Spread (...) operator

Using the spread syntax, we can create a deep copy if there is no nesting.



const first_person = {
name: "Jack",
age: 24,
}

const second_person = { ...first_person };

second_person.age = 25;

console.log(first_person.age); // output: 24
console.log(second_person.age); // output: 25

Let's take a look when there is nesting.



const first_person = {
  name: "Jack",
  age: 24,
  address: {
    apartment: "A",
    city: "London"
  }
};

const second_person = { ...first_person };

second_person.age = 25;
second_person.address.apartment = "N";
console.log(first_person.address.apartment); // output: N
console.log(second_person.address.apartment); // output: N

In case of nesting, the spread operator creates a shallow copy.

If the objects/arrays are nested, then we can achieve deep copy by using

JSON.parse() and JSON.stringify()



const first_person = {
  name: "Jack",
  age: 24,
  address: {
    apartment: "A",
    city: "London"
  }
};

const second_person = JSON.parse(JSON.stringify(first_person));

second_person.age = 25;
second_person.address.apartment = "N";
console.log(first_person);
console.log(second_person);

Output:

Combining these two creates a deep copy even when there is nesting involved.

Summary

Shallow copy method creates a copy where the source and the copied variable reference remain the same. Changing one, would change the other as well.
Deep copy method creates a copy where the source and the copied variable reference are entirely different. Changing one, would not affect the other one.
Common methods like Array.concat(), Array.from(), Object.assign(), etc creates a shallow copy.
Spread(...) operator, creates a deep copy when there is no nesting.
One of the ways to create a deep copy is by using JSON.parse() and JSON.stringify().

References

Promises Methods- At a glance

AditiJ — Fri, 13 May 2022 20:10:31 +0000

Promise
The Promise States
Create a new Promise
Promise Handlers
Promise Methods
Summary
References

They say "A Promise is meant to be fulfilled". The truth is- In JavaScript, it might as well be rejected.

Note: This blog assumes you have a basic understanding of asynchronous programming.

Promise

A Promise literally promises to get back with a value or information for something which hasn't even happened till now.
It is simply a JavaScript object that holds a result of an asynchronous operation.

The Promise States

Pending: This is the initial state of a promise. This depicts that the task is in progress.

Fulfilled: If the task was successfully done, then the promise returns a fulfilled state.

Rejected: If the task failed, then the promise returns a rejected state.

Settled: Once the promise is resolved or rejected, we say that the promise has been settled.

Create a new Promise

To create a Promise object, we use the Promise constructor.

const myPromise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled!");
  } else {
    reject("Promise Rejected!");
  }
});

Let's try to find out the state of the promise by running console.log(myPromise);.
We will get a Promise Object in a Pending state.

Promise Handlers

then()

To get the value of a resolved promise, we use then() method.

syntax: promiseObj.then(callBackFunction)

Eg: myPromise.then((res) => console.log(res)); This will return Promise Fulfilled! as an output. If the promise would have been reject, it would have given an error.

catch()

To handle the error once a resolved promise is rejected, we use catch() method.

syntax: promiseObj.then(callBackFunction).catch(callBackFunction)

Eg: myPromise.then((res) => console.log(res)).catch((e) => console.log(e)); This will return Promise Rejected! as an output.

finally()

The code inside finally() method will run irrespective of the promise state.

syntax: promiseObj.then(callBackFunction).catch(callBackFunction).finally(callbackFunction)

Eg: myPromise.then((res) => console.log(res)).catch((e) => console.log(e)); This will return Promise Rejected! as an output.

Promise Methods

These methods are used to handle multiple promises

Promise.all()

Promise.all() takes an array of promises as input.
It waits for all promises to be resolved.
It returns an array containing all values if all of them are fulfilled.
It returns an error of the first rejected promise.

const myPromise1 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.all([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res)
// output 
// ["Promise Fulfilled 1!", "Promise Fulfilled 2!", "Promise Fulfilled 3!"]
);

Promise.any()

Promise.any() takes an array of promises as an input.
It returns a value of the first fulfilled promise.
Once it finds a fulfilled promise, it returns a value. It doesn't wait for any other promise to be complete.

const myPromise1 = new Promise((resolve, reject) => {
  const success = false;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.any([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res)
// output 
// "Promise Fulfilled 2!"
);

Promise.allSettled()

Promise.allSettled() takes an array of promises as an input.
It waits for all promises to be either fulfilled or rejected.
It returns an object containing status and reason in case a promise is rejected or value in case a promise is fulfilled.

const myPromise1 = new Promise((resolve, reject) => {
  const success = false;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.allSettled([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res));

// output 
/* 
[
{
status: "rejected"
reason: "Promise Rejected 1!"
},
{
status: "fulfilled"
value: "Promise Fulfilled 2!"
},
{
status: "fulfilled"
value: "Promise Fulfilled 3!"
}
]
*/

promise.race()

Promise.race() takes array of promises as an input.
It returns a value of the first fulfilled promise or error in case of the first promise is rejected.

const myPromise1 = new Promise((resolve, reject) => {
  const success = false;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.race([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res)
// output 
// "Promise Rejected 1!"
);

Summary

Promise is a JavaScript object that holds a result of an asynchronous operation.
It has 3 states- pending, fulfilled, and rejected.
.then() and .catch() are promise handlers to access promise values once it is resolved.
.finally() is used to execute a code irrespective of the promise state.
Promise.all() waits for all promises to be resolved or for the first rejected promise.
Promise.any() returns a value of the first fulfilled promise.
Promise.allSettled() waits for all promises to be either fulfilled or rejected.
Promise.race() returns a value of the first fulfilled promise or error in case of the first promise is rejected.

References

Call, Bind and Apply - The Trinity

AditiJ — Fri, 13 May 2022 08:26:56 +0000

Introduction to Call Bind and Apply
Definition
Why to use?
How to use?
Summary
References

Introduction to Call Bind and Apply

When I first came across these terms, I was super confused and clueless. How are these different from each other? Function borrowing!? - What does that even mean?

Here's my attempt to share what I have learned so far!
Note: This blog assumes you have a basic understanding of this keyword.

Definition

Function borrowing

It allows us to use methods of an object on another object without having to create a copy or rewrite it in several places.

call()

call() is used to invoke a method.
syntax- call(thisArg, arg1,arg2, ...., argN)

apply()

apply() is also used to invoke a method.
It is similar to call(), with the only difference that call() takes all the arguments individually, while apply() take array like object as an argument.
syntax- apply(thisArg,[arg1,agr2,...,agrN])

bind()

bind() creates a new function which can be invoked somewhere later when needed.
syntax- bind(thisArg, arg1,arg2, ...., argN)

Why to even use these in the first place?

Let's take an example to understand when and why to use these methods.

First things first: We know how to access a normal Object property.

const userList = {
  user: "Aditi",
  age: 25
};
//accessing the properties
console.log(`Hi ${userList.user}. How's ${userList.age} 
treating you?`);

// output
// Hi Aditi. How's 25 treating you?

Now let's suppose we have a method inside userList.

const userList = {
  user: "Aditi",
  age: 25,
printDetails: function(){
console.log(`Hi ${this.user}. How's ${this.age} 
treating you?`);
}
};
// output
// Hi Aditi. How's 25 treating you?

Now if we call userList.printDetails(); we get the same output.

Now suppose we have another object adminList and we want to access the printDetails() method. What to do now?
You can say we can create another object with a different value and copy the printDetails() method to access it.

const adminList = {
  user: "Ananya",
  age: 26,
printDetails: function(){
console.log(`Hi ${this.user}. How's ${this.age} 
treating you?`);
}
};

// output
// Hi Ananya. How's 26 treating you?

Sounds good?
Now suppose your app grows, and you have more numbers of objects. You would need to copy and repeat this method in all your objects. There also might be a case where the number of methods increases too.
So, to avoid repetition we should use these function borrowing methods!

How to use these methods?

Now let's understand how to solve the above-discussed problem.

Using call()

const userList = {
  user: "Aditi",
  age: 25,
  printDetails: function (city, country) {
    console.log(`Hi ${this.user} from ${city}, ${country}.
    How's ${this.age} treating you?`
    );
  }
};
const adminList = {
  user: "Ananya",
  age: 26
};

// borrowing printDetails() using call()

userList.printDetails.call(adminList, "Patna", "India");

// output
// Hi Ananya from Patna, India. How's 26 treating you?

Using apply()

const userList = {
  user: "Aditi",
  age: 25,
  printDetails: function (city, country) {
    console.log(`Hi ${this.user} from ${city}, ${country}.
    How's ${this.age} treating you?`
    );
  }
};
const adminList = {
  user: "Ananya",
  age: 26
};

// borrowing printDetails() using apply()

userList.printDetails.apply(adminList, ["Patna", "India"]);

// output
// Hi Ananya from Patna, India. How's 26 treating you?

Using bind()

const userList = {
  user: "Aditi",
  age: 25,
  printDetails: function (city, country) {
    console.log(`Hi ${this.user} from ${city}, ${country}.
    How's ${this.age} treating you?`
    );
  }
};
const adminList = {
  user: "Ananya",
  age: 26
};

// borrowing printDetails() using bind()

const printAdminDetails = userList.printDetails.bind(
  adminList,
  "Patna",
  "India"
);

printAdminDetails();

// output
// Hi Ananya from Patna, India. How's 26 treating you?

So, without having to copy the printDetails() inside the second object adminlist we were able to access the method with the help of call(), apply() and bind().

Summary

call(), bind() and apply() are used to borrow methods of a object.
call() and apply() are invoked and executed immediately.
The difference between call() and apply() is the way they take arguments. call() takes all arguments separately while apply() takes arguments in an array.
bind() creates a new function which is executed later when invoked.

References

What is Virtual DOM doing?

AditiJ — Tue, 28 Sep 2021 19:03:09 +0000

Introduction

In Vanilla JS or jQuery, we need to manipulate DOM and add event handlers to handle every change. This makes the UI slow.

A React Application is responsible for the View part of the system.
This means it handles the user interface for the application.

When a user interacts with the system, changes take place.
For example The user fills the username and password and then clicks on the Login button. We take that user to the Homepage after successful login or give an error message if the username or password is wrong.
This leads to updating the prior state to the current state. Then the app describes what the UI should look like after these changes by the user. This process is called rendering and the output of this render is a React Element.

A react element is a simple plain JavaScript Object that maps to the DOM Element.

It keeps a light-weight representation of the actual DOM element and performs all operations on it. This is called the Virtual DOM.

Whenever we change the state of a component, we get a new React Element.

React then compares this element along with its children with the prior state in the virtual DOM and figures out what is changed. After this, it updates the part of the actual DOM to keep it in sync with the Virtual DOM.

React Components In Theory

AditiJ — Tue, 28 Sep 2021 17:21:20 +0000

Development

React development was led by Jordan Walke who is a software engineer at Facebook. React was first deployed in 2011.
Now it has become super famous and a lot of contributions have been made globally.

Introduction

React is a JavaScript library used for building fast and interactive user interfaces.

The heart and soul of every React-based Application are Components.

Components

A Component in plain words, is just like a building block. We take a bunch of isolated code blocks and fit them together to form a large scale application.

We can also visualize a React App as a tree of Components.
Taking Twitter for Example We can split the home page into independent components. The App becomes the Root component or the parent component which contains all the other components as its child components.

Here in this example, we see how a large app like Twitter can be made manageable with the help of components.
Components allow us to make use of reusability in our apps thus increasing code readability and code management.
For instance: The Tweet button can be used across the Twitter application for different purposes with a different look and feel!

Let's take another example We can split the home page of a website into independent components like:

SearchBar
SideBar
NavBar
Card

Conclusion

The component-based design in React increases the efficiency to write code and makes it easier to follow and learn. The components also provide their own logic and a layer of separation in general so that one can add and update logic without causing a lot of issues.

Forem: AditiJ

Shallow Copy and Deep Copy

Table of Contents

Introduction

Shallow Copy

Deep Copy

Spread (...) operator

JSON.parse() and JSON.stringify()

Summary

References

Promises Methods- At a glance

Table of Contents

Promise

The Promise States

Create a new Promise

Promise Handlers

then()

catch()

finally()

Promise Methods

Promise.all()

Promise.any()

Promise.allSettled()

promise.race()

Summary

References

Call, Bind and Apply - The Trinity

Table of Contents

Introduction to Call Bind and Apply

Definition

Function borrowing

call()

apply()

bind()

Why to even use these in the first place?

How to use these methods?

Using call()

Using apply()

Using bind()

Summary

References

What is Virtual DOM doing?

Introduction

React Components In Theory

Development

Introduction

Components

Conclusion