How to assign a locally created array in a function to a globally defined array in JavaScript

Question

How to assign a locally created array in a function to a globally defined array in JavaScript

Whenever I try to assign arrays, a problem arises:

    var arr = [ {'id': 1, 'size': 'large' }, {'id':4, 'size': 'small'} ];
    function adjust(a){
      var result=[{'id': 1, 'size': 'large'}];
      a=result.slice();
    }
    adjust(arr);
    document.write("result:" + JSON.stringify(arr)); //arr contains both 'large and small'

I wish to populate 'arr' with the data from the 'result' array, but this method doesn't seem to work. However, it is possible to clear the array and update its content in this manner:

    a.length=0;//arr is now empty outside of the function
    a[1].id = 100;//changing id value outside of the function

I am aware that I could achieve this by returning the 'result' array and assigning it externally to 'arr', but there will be many such connections within the function. Any guidance on resolving this issue would be highly appreciated. Thank you

javascript arrays

Answer 1

Answer №1

If you're looking to incorporate the assignment within a function, there are two approaches you can take. One method involves changing the content of obj and passing it as a parameter:

var obj = [ {'id': 1, 'size': 'king' }, {'id':4, 'size': 'queen'} ];
function update(o){
  var result=[{'id': 1, 'size': 'king'}];
  o.length = 0;
  o.push.apply(o,result); // adding each element from result
}
update(obj);
console.log(obj);

Alternatively, you can modify the reference to another value. In this scenario, you must manipulate the actual variable rather than a function parameter:

var obj = [ {'id': 1, 'size': 'king' }, {'id':4, 'size': 'queen'} ];
function updateObj(){
  var result=[{'id': 1, 'size': 'king'}];
  obj = result.slice();
}
updateObj();
console.log(obj);

An enhanced version of the second approach is to store your array within an object, but this adjustment will impact how you access it in your code:

var container = { 
  obj : [ {'id': 1, 'size': 'king' }, {'id':4, 'size': 'queen'} ] 
};
function update(container, key){
  var result=[{'id': 1, 'size': 'king'}];
  container[key] = result.slice();
}
update(container, 'obj');
console.log(container.obj);

Answer 2

If you're looking to incorporate the assignment within a function, there are two approaches you can take. One method involves changing the content of obj and passing it as a parameter:

var obj = [ {'id': 1, 'size': 'king' }, {'id':4, 'size': 'queen'} ];
function update(o){
  var result=[{'id': 1, 'size': 'king'}];
  o.length = 0;
  o.push.apply(o,result); // adding each element from result
}
update(obj);
console.log(obj);

Alternatively, you can modify the reference to another value. In this scenario, you must manipulate the actual variable rather than a function parameter:

var obj = [ {'id': 1, 'size': 'king' }, {'id':4, 'size': 'queen'} ];
function updateObj(){
  var result=[{'id': 1, 'size': 'king'}];
  obj = result.slice();
}
updateObj();
console.log(obj);

An enhanced version of the second approach is to store your array within an object, but this adjustment will impact how you access it in your code:

var container = { 
  obj : [ {'id': 1, 'size': 'king' }, {'id':4, 'size': 'queen'} ] 
};
function update(container, key){
  var result=[{'id': 1, 'size': 'king'}];
  container[key] = result.slice();
}
update(container, 'obj');
console.log(container.obj);

How to assign a locally created array in a function to a globally defined array in JavaScript

Answer №1

Similar questions

Count of jSon objects

Struggling to integrate Ajax with Angular framework

Struggling to make PayPal Cordova Plugin function properly in both production and sandbox modes

When using the `style` prop, it is important to provide a mapping of style properties to their corresponding values, rather

Adjust the location.hash and then navigate using the Back button - Internet Explorer displays unique behavior compared to other web browsers

Searching in MongoDB using regular expressions, starting with the JavaScript driver in a Node.js environment

Unexpected behavior encountered with Angular module dependency injection

Troubleshooting Ajax contact form's failure to refresh (PHP and Bootstrap 4)

Transferring information from a component to a service file in Angular 2

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

The system encountered an error while trying to access the property 'enabled' of an undefined object

The export "hasInjectionContext" is not provided by the source file "node_modules/vue-demi/lib/index.mjs", but it is being requested in the file "node_modules/pinia/dist/pinia.mjs"

utilizing ajax to submit data with checkbox option

Issue with ng-model causing incorrect variable binding

What is causing the object, which is clearly defined (as shown in the callback to JSONLoader), to be interpreted as undefined

Issue encountered while attempting to load a JSON file into an ExtJS JSONPStore due to a

The cookie appears in the callback URL, but does not get stored in the browser's cookie storage

Is there a convenient method to combine arrays of objects in JavaScript using ellipses or an equivalent approach?

Unlock the Power of Rendering MUI Components in ReactJS Using a For Loop

Ensure the vertical dimension of the webpage is properly maintained