Reference and Copy Variables in JavaScript

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 BooleanNULLundefinedString, and Number. It has 3 non-primitive data types that are passed by reference, they are ArrayFunction, 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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to get The Height of Scroll Bar Using JavaScript ?

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.

What Garbage Collection in JavaScript Is and How It Works

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.

What Javascript Spread Operator is, How It Works and How to Use It

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.

Private Class Fields and Methods in JavaScript Classes

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 in JavaScript - An Easy Introduction

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.