How do you copy by value a composite data type? in JavaScript

Before getting into call by value/call by reference, lets first understand what are all the different data types in JavaScript.

Data Type in JavaScript:

1. Primitive
2. Trivial
3. Composite

Lets see what are these datatypes with example and then find the difference in call by value and call by reference

1. Primitive:

These are the basic data type in JavaScript which contains Numbers, String, Boolean.

Number- 1, 1.11 etc..

String- “Aarthi”, “Badminton”

Boolean-true/false

Primitive Data types

2. Trivial:

Under this trivial datatype, we have two different types. One is “undefined” and the other is “null”.

“null” is familiar with someone from java background. If we don't have a value then it will be considered as null in Java. All the class variables which is of type string and not initialized will be having a default value of null in Java.

But it is different here!!!!! Lets find out how

If a variable has been declared, but has not been assigned a value, has the value undefined.

Whereas, null in JavaScript is an assignment value. You can assign it to a variable.

Anyway both means its empty. How can we find that? Simple, consider the code below.

undefined vs null. Console output will be printed

But then what is the difference? undefined itself is a type, whereas null an object.

3. Composite:

All the objects, arrays, functions are considered as composite data types.

Object={“a”:1};

array = [1,2,3,97*empty values,100];

function print(){return “hi”};

Variables that are assigned a non-primitive value are given a reference to that value. That reference points to the object’s location in memory. The variables don’t actually contain the value.

Ok now we are fine to go to call by value/call by reference topic

1. Call by value:

In Copy/call by value, variable data is passed to another variable . Both the variables refers two different memory locations. consider the below example. No memory location is shared, just the data is copied to another memory location. All primitive data by default follows call by value.

call by value example

2. Call by reference

In call by reference, no new memory is created/allocate when trying to copy. Just an reference is create which points to the old memory. All composite datatypes follow call by reference by default. Lets look at the example below for better understanding.

This is because no new memory is allocated arr1 and arr2 points to same memory

So now arises a question, How do you copy by value a composite data type? in JavaScript :D

There are 3 ways to copy by value for composite data types.

1. Using the spread (...) operator
2. Using the Object.assign() method
3. Using the JSON.stringify() and JSON.parse() methods

1. Using Spread

Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 values are expected. It allows us the privilege to obtain a list of parameters from an array. Using spread will clone your object.

copy by value using spread operator

In the above example when copied variable value is changed but original variable value remain same .

2. Using Object.assign()

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object.

copy by value using object.assign() method

Note the empty [] as the first argument, this will ensure you don’t mutate the original object

3. Using JSON.parse() and JSON.stringify()

The JSON object, available in all modern browsers, has two useful methods to deal with JSON-formatted content: parse and stringify.

JSON.stringify() takes a JavaScript object and transforms it into a JSON.

JSON.parse() takes a JSON string and transforms it into a JavaScript object.

so we can use it here, first convert the object to string using stringify() method and then convert it back to object using parse()

copy by value using stringify() and parse() method