Simplifying Object.assign method in JavaScript

Read full article on the Infragistics blog

“In JavaScript, Object’s assign method copies source object’s own enumerable properties to a target object, and returns that target object “

There are two important keywords in the above sentence:

  1. Enumerable
  2. Own

Before we go ahead and understand purpose of Object.assign, it is essential that we really understand these two words, enumerable properties and own properties.  Let us see them one by one:

A JavaScript object could have either enumerable or non-enumerable properties. However, by default when you create property on an object, it is enumerable.  Enumerable  means you can enumerate through those properties. Let us understand it through code.

 

 

There are two properties in babycat object. By default both are enumerable, hence as the output of for..in loop, you will get both age and name printed.

Now let us change default enumerable behavior of age property using Object.defineProperty method.

 

We have changed enumerable of age property to false, so as output, you will get only color printed. Hence, age is no longer an enumerable property of babycat object.

Another keyword in above sentence is own properties. To understand it, you need to understand object prototype chain. All JavaScript objects are part of a prototype chain, hence can access properties of its prototype’s also.  So, own properties are those properties, which are particular to the object and not from the prototype chain.  Let us understand own properties through code examples,

In above code snippet, there are two objects cat and babycat. In addition, [[Prototype]] property of babycat object is set to cat object. When you print properties of the babycat object using for..in loop, you will find as output age, color, name printed as shown in below image:

What is happening here? Well, JavaScript prints all properties from the prototype chain. However, only age and color are, own properties of babycat object.

As of now, you should have understood own properties and enumerable properties in context of a JavaScript object.   So let us revisit first statement of this post,

“In JavaScript, Object’s assign method copies source object’s own enumerable properties to a target object, and returns that target object “

You should able to infer what exactly above sentence implies.  Consider code below :

 

 

 

 

 

Using Object.assign() method , we are copying cat object own enumerable properties to babycat object. Here, cat object is source and babycat object is target. You will get output printed as below:

The Object.assign() method uses [[Get]] on the source object and [[set]] on the target object and invokes setter and getter to perform the task. Essentially, it assigns properties values from source to target object. It does not create new property in the target object.

As of now you know purpose of the Object.assign() method. Let us examine some variations while copying properties from source object to a target object.

Same Properties in both target and source object

If target object has same properties as of source object, then Object.assign() method will  override target object properties.  To understand it consider code listing below:

 

 

 

 

There is age property in both target object and source object.  While copying properties in target object the Object.assign() method will override target object age property, hence you will get output as shown in the below image :

Read full article on the Infragistics blog

How to Clone a Git repository in Visual Studio

In my trainings, often I get a question from junior developers that how to clone a Git repository in the visual studio? Perhaps it may be very simple for senior developers, however for the developers who struggle to get it right steps are discussed below,

Step 1

Find the URL of the remote git repository. For GitHub repository URL can be found as shown in the image below. Copy the URL from here.

image 

Step 2

Launch Visual Studio and from the View select Team Explorer. In the Team Explorer window select Clone.

clip_image002

On clicking Clone, you will get an option to provide the URL of the Git repo and the choose folder in which repository will be cloned. In the URL section paste the remote repository URL as whon in the below image:

clip_image004

As the last step click on the Clone and the remote Git repository will be cloned in the Visual Studio in the given folder. If everything goes right you will get success message as shown below.

clip_image006

I hope it helps. Thanks and Happy Coding.