Differences between referencing and valuing in arrays in JavaScript

Question

Differences between referencing and valuing in arrays in JavaScript

I have noticed an interesting behavior when passing arrays to functions by reference. Even after modifying the array inside a function, the changes do not reflect when logging the array outside the function. For example:

let arr = [1, 2];
console.log(arr); // Logs [1, 2]
add(arr, 3)
console.log(arr); // Logs [1, 2] again

function add(array, el)
{
    array = [el];
    console.log(array); // Logs [3]
}

The question arises: Why does the console.log after calling add display [1, 2] instead of [3] (the value of the el parameter)?

javascript arrays

Answer 1

Answer №1

The array remains untouched.

Instead, you're updating the array variable (changing it from pointing to the old array to pointing to a new array).

To illustrate, if you wanted to actually modify the existing array:

let arr = [1, 2];
console.log(arr);
add(arr, 3)
console.log(arr);

function add(array, el) {
  array.length = 0;
  array.push(el);
  console.log(array);
}

Answer 2

The array remains untouched.

Instead, you're updating the array variable (changing it from pointing to the old array to pointing to a new array).

To illustrate, if you wanted to actually modify the existing array:

let arr = [1, 2];
console.log(arr);
add(arr, 3)
console.log(arr);

function add(array, el) {
  array.length = 0;
  array.push(el);
  console.log(array);
}

Answer 3

Answer №2

It seems like there may be some confusion regarding the scope of the array.

When you pass an array into a function and assign that variable to something else, like in the example below:

function add(array, el)
{
  array = [el];
}

You are essentially just reassigning the variable and not actually modifying the array itself. If you want to modify the array, you should do something like this:

function add(array, el)
{
  array[0] = el; // changing the first element to 3
}

By doing this, you will see that the array gets updated with the first element set to 3. This is how array modification works in this context.

If you want to create an entirely new array, you can follow a similar approach as shown below:

arr = add(arr, 3);

function add(array, el)
{
  array = [el];
  return array;
}

Answer 4

It seems like there may be some confusion regarding the scope of the array.

When you pass an array into a function and assign that variable to something else, like in the example below:

function add(array, el)
{
  array = [el];
}

You are essentially just reassigning the variable and not actually modifying the array itself. If you want to modify the array, you should do something like this:

function add(array, el)
{
  array[0] = el; // changing the first element to 3
}

By doing this, you will see that the array gets updated with the first element set to 3. This is how array modification works in this context.

If you want to create an entirely new array, you can follow a similar approach as shown below:

arr = add(arr, 3);

function add(array, el)
{
  array = [el];
  return array;
}

Differences between referencing and valuing in arrays in JavaScript

Answer №1

Answer №2

Similar questions

Unable to add files to my JavaScript file

Issue with JQuery form submission causing controller method not to be executed

React's useState Hook: Modifying Values

The Ubuntu virtual machine hosted on Google Cloud is experiencing difficulties connecting through Node.js using an external IP address

Is there a way to overlay a div on a particular line within a p element?

transform constant values into API requests using React

Loading content dynamically with AJAX and enabling smooth page scrolling

Comparison between PHP's JSON parser and Javascript's JSON parser

Tips for positioning a React component above another component

What is the process for sending values to a component?

Field cannot be submitted without the required input after an Ajax request

The type 'number[]' is lacking the properties 0, 1, 2, and 3 found in the type '[number, number, number, number]'

Troubleshooting broken links on a multi-page website built with node.js and ejs

Filtering data from Arduino using web serial communication

Reading a file with fs alters the visibility of a global array, rendering it inaccessible beyond its scope

Pressing the non-responsive button automatically chooses the following item

Building Silent Authentication in React Native with the help of Auth0: A Step-by-Step Guide

Looking for assistance with a simple Javascript program

What is the best way to have various texts display after a certain number of clicks?

Retrieve the URL redirected by JavaScript without altering the current page using Selenium