Changing an array in JavaScript within a function

Question

Changing an array in JavaScript within a function

When working with arrays in JavaScript, how can I mutate the value of an array inside a function? I'm aware that certain array methods can achieve this, but regular assignment doesn't seem to work.


var arr = [4];

function changeArray(arr) {
    arr = [1, 2, 3];
}

// The value of "arr" remains [4]. How can I make it [1, 2, 3]?

I believe that this code does not alter the value of "arr" outside of the function. Is there a way to mutate the array passed as an argument in order to achieve this?

javascript arrays

Answer 1

Answer №1

To modify an array, you can utilize the .splice method:

arr.splice(0, arr.length, 1, 2, 3);

Alternatively, you can clear the array and add elements using the .push function:

arr.length = 0;
arr.push(1, 2, 3);
// or if provided with an array of values
arr.push.apply(arr, newValues);

It's important to note that these operations change the original array directly. While some native functions behave this way (e.g., Array#sort), most methods typically return a new array instead.

I believe this code doesn't alter the content of "arr" once the function has finished executing.

That is correct. Modifying a variable to point to a different value will not affect another variable unless in global scope or within a with statement. In this case, you attempted to reassign the variable rather than mutate its contents.

In JavaScript, parameters are passed by value (Wikipedia also discusses "by sharing"), not by reference.

Answer 2

To modify an array, you can utilize the .splice method:

arr.splice(0, arr.length, 1, 2, 3);

Alternatively, you can clear the array and add elements using the .push function:

arr.length = 0;
arr.push(1, 2, 3);
// or if provided with an array of values
arr.push.apply(arr, newValues);

It's important to note that these operations change the original array directly. While some native functions behave this way (e.g., Array#sort), most methods typically return a new array instead.

I believe this code doesn't alter the content of "arr" once the function has finished executing.

That is correct. Modifying a variable to point to a different value will not affect another variable unless in global scope or within a with statement. In this case, you attempted to reassign the variable rather than mutate its contents.

In JavaScript, parameters are passed by value (Wikipedia also discusses "by sharing"), not by reference.

Changing an array in JavaScript within a function

Answer №1

Similar questions

Error: Attempting to access 'map' property of an undefined variable in NEXTJS

Simple Way to Show API Output in Plain Text (Beginner Inquiry)

Steps for constructing an object containing an array of nested objects

What is the correct way to remove listeners in componentWillUnmount using React, and why is binding necessary in the constructor?

Issue encountered when attempting to invoke server-side function using JavaScript

Searching for values within an array of objects by iterating through nested arrays to apply a filter

Fill the input field with data retrieved from a json file

reCAPTCHA v3 - Alert: There are no existing reCAPTCHA clients available

Scroll function not functioning properly in Internet Explorer

The white-spaces in Quill JS do not retain their original formatting

The Angular routing feature seems to be malfunctioning

Looking to integrate the date, month, and year selection tags into the inline format

Updating Bootstrap modal content based on button clickExplanation on how to dynamically change the content

A guide on sharing an express.js response object with a different module

I am able to see the Redux props showing up in Redux DevTools, but for some reason they are not

Is there a way to embed HTML code within a JavaScript variable?

Achieving a delayed refetch in React-Query following a POST请求

Strategies for making a child div fade out when the parent div is hovered over

Building a custom Vue layout within Laravel UI

I would like to have text show up instead of an alert when validation is triggered