jQuery has revolutionized web development by introducing a new array

Question

jQuery has revolutionized web development by introducing a new array

Having a problem with managing a jQuery array.

My goal is to create two distinct arrays.

var main_array = []

function initialize_arrays(){

   main_array[0] = {id: 1, status: true, number: 10};
   main_array[1] = {id: 1, status: true, number: 16};
   main_array[2] = {id: 1, status: true, number: 20};

}

function adjust_number(array, index, new_number){

   array[index].number = new_number

}

initialize_arrays()

new_array = adjust_number(main_array, 0, 20); 

console.log(main_array)

The issue I'm facing is that when I try to modify an element in the $main_array and create a new array, the original main_array also gets changed.

I specifically want to avoid changing the numbers in the main_array.

I'm having difficulty figuring out what might be going wrong here.

javascript arrays

Answer 1

Answer №1

When dealing with arrays in JavaScript, it's important to remember that they are objects. This means that when you pass an array as a parameter to a function, you are actually passing a reference to the memory location of the array, not a copy of the array itself. Therefore, any modifications made to the array within the function will affect the original array.

Furthermore, if your array contains objects, those objects are also passed by reference. In order to work with copies of these objects instead, you can use the Object.assign() method.

One other thing to note is the convention of prefixing identifiers with a dollar sign to indicate that they hold references to JQuery wrapped set objects. If you're not using JQuery in your code, it's recommended to remove this prefix.

var main_array = [];  // <-- This is where the main array will go
var newArray =   [];  // <-- This will be where the copied array goes

function create_array(){

   main_array[0] = {id: 1, status: true, number: 10};
   main_array[1] = {id: 1, status: true, number: 16};
   main_array[2] = {id: 1, status: true, number: 20};
   
   return main_array;
}

function change(array, key, number){
   // Loop thorugh the original array:
   main_array.forEach(function(obj){
    // Make a copy of the objects in the array and put them in the new array
    newArray.push(Object.assign({}, obj));
   });
   newArray[key].number = number
}

main_array = create_array();

change(main_array, 0, 20); 

console.log(main_array, newArray)

Answer 2

When dealing with arrays in JavaScript, it's important to remember that they are objects. This means that when you pass an array as a parameter to a function, you are actually passing a reference to the memory location of the array, not a copy of the array itself. Therefore, any modifications made to the array within the function will affect the original array.

Furthermore, if your array contains objects, those objects are also passed by reference. In order to work with copies of these objects instead, you can use the Object.assign() method.

One other thing to note is the convention of prefixing identifiers with a dollar sign to indicate that they hold references to JQuery wrapped set objects. If you're not using JQuery in your code, it's recommended to remove this prefix.

var main_array = [];  // <-- This is where the main array will go
var newArray =   [];  // <-- This will be where the copied array goes

function create_array(){

   main_array[0] = {id: 1, status: true, number: 10};
   main_array[1] = {id: 1, status: true, number: 16};
   main_array[2] = {id: 1, status: true, number: 20};
   
   return main_array;
}

function change(array, key, number){
   // Loop thorugh the original array:
   main_array.forEach(function(obj){
    // Make a copy of the objects in the array and put them in the new array
    newArray.push(Object.assign({}, obj));
   });
   newArray[key].number = number
}

main_array = create_array();

change(main_array, 0, 20); 

console.log(main_array, newArray)

jQuery has revolutionized web development by introducing a new array

Answer №1

Similar questions

AngularJS interprets expressions in the 'action' attribute

Autocomplete Dropdown failing to select default value when defaultValue option is set

Optimizing Firebase rendering with useEffect

Specifying the data type of the input being passed into a .css() function within a jQuery ID selector

An array of NSObjects and boolean values

Discover how to implement custom data filtering in an Angular controller

JavaScript click event to open a URL in a new window

How do I deactivate dragControls in THREE.JS after enabling them for a group of elements?

Convert a single array into an array of objects, with keys derived from a JSON response in JavaScript

When I click the button, it deletes the DOM element and hides it, preventing me from

Encountering an issue when attempting to import a non-source module from a node library while running a Typescript script

Having trouble getting angular-masonry to function properly as it keeps throwing an error saying it does not recognize the method 'imagesLoaded'

Navigating and organizing with React Native: TabBarIOS and Navigation

The concept of tweening camera.lookat in Three.js

What is the process for creating a new subdocument if it doesn't already exist, and then appending another subdocument below it?

Is it possible to generate output from a string dust template without the need for prior compilation?

Using jQuery to dynamically pass variables to an HTML document

The functionality of Google Maps fails to operate within an Angular directive

Populate an array of uint16_t with data from uint64_t in C programming

Creating dynamic 2-dimensional math matrices using malloc