Reference and Copy Variables in JavaScript

In this article, we will talk about pass-by-value and pass-by-reference in JavaScript. JavaScript always passes by value, but in an array or object, the value is a reference to it, so you can ‘change’ the data. JavaScript has 5 primitive data types that are passed by value, they are Boolean, NULL, undefined, String, and Number.

In this article, we will talk about pass-by-value and pass-by-reference in JavaScript.

JavaScript always passes by value, but in an array or object, the value is a reference to it, so you can ‘change’ the data. JavaScript has 5 primitive data types that are passed by value, they are Boolean, NULL, undefined, String, and Number. It has 3 non-primitive data types that are passed by reference, they are Array, Function, and Object. In non-primitive data types, we have some challenges for copying data. As we know objects are created at some place in the computer’s memory. When we declare any property it creates a space in memory.

Example: The address is a data type that is passed by value just like a number, string, and address points to the location in memory.

Pass by value in case of number.

<script> 
let age = 100; 
let age2 = age; 
document.write(age, age2); 
document.write("<br>"); 
age = 200; 
document.write(age, age2);  
</script> 

Output:

100 100
200 100

Pass by value in case of string

<script> 
let name = 'sam'; 
let name2 = name; 
document.write(name, name2);  
document.write("<br>"); 
name = 'xyz'; 
document.write(name, name2);  
</script> 

Output:

sam sam
xyz sam

Pass by reference in case of array

<script> 
const players = ['Sam', 'Sarah', 'Ryan', 'Poppy']; 
const team = players; 
document.write(players, team); 
</script> 

Output:

["Sam", "Sarah", "Ryan", "Poppy"]
["Sam", "Sarah", "Ryan", "Poppy"]

Now if you change the data from “team” array it also affects the “players” array

<script> 
const players = ['Sam', 'Sarah', 'Ryan', 'Poppy']; 
const team = players; 
team[3] = 'xyz'; 
document.write(players, team); 
</script> 

Output:

["Sam", "Sarah", "Ryan", "Poppy"]
["Sam", "Sarah", "Ryan", "xyz"]

It’s an array reference, not an array copy. They both point to the same array.

We have 4 ways to do it. By using these methods the primary array will not change.

javascript web technologies javascript-misc programming

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

JavaScript private class fields and methods are new features for classes. In this tutorial, you will learn all you need to know about them.

WeakMap allows you to add additional data into an Object that belongs to another or third-party code. With the special “weak” link feature of WeakMaps, we can make sure the data associated with this alien object, would only exist as long as the object is alive.