JavaScript (JS) function array equality works as pointer? How to just use the variables?

Question

I was creating a code where I need to use some variables from a global scope, when I made my local = global, I've noticed the changes I've made in the local scope were being modified into the global scope.

This is an example of what I am talking about

global = [];
load_global();
use_global();

function load_global() {
  for (i = 0; i < 10; i++) {
    global.push(i);
  }
}

function use_global() {
  local = [];
  local = global;
  for (i = 0; i < 5; i++) {
    global.push("x");
  }
  console.log(local);
}

JSbin Example

Is there a way to use the values of a global array, but without changing it?

Answer 1

You can try copying the global array

local = global.slice()

btw you might wanna use var keyword to make that array local. Without it the "local" array will be accessible from outside of the function

Answer 2

You need to clone the array into a local variable. You can do that with slice or concat for example.

To add clone to javascript arrays, you can use

Array.prototype.clone = function() {
    return this.slice(0);
};

And then

var localArray = globalArray.clone();

Also check this SO question here Javascript fastest way to duplicate an Array - slice vs for loop

Answer 3

Besides old school Array#slice, you can use the ES6 method Array.from, which is designed for such scenarios:

var local = Array.from(global)

This method can be used on array-like objects or any iterable values, which don't have a slice method. You may say Array.prototype.slice.call(). Oops you are right, but isn't that annoying?

Besides, you can pass a mapping function to it as well. For example:

Array.from('asdf', c => c.toUpperCase())  // ["A", "S", "D", "F"]

Comparing to ES5 style, you can see how neat ES6 is:

Array.prototype.slice.call('asdf').map(function(c){return c.toUpperCase()})

Read MDN doc for more.

On the other hand, the method is not widely supported at the moment, you need babel or a polyfill. But ES6 is the future, eventually it'll be fully supported by all major browsers.

Answer 4

In Javascript, as in many other languages, you only handle references of objects. This also means that the object "inside" your array could also need to be copied. The answers based on the use of Array.slice() are excellent but it doesn't make a deep copy of the items in the array (meaning the Object element in the array are also copied so changing the state of a local object doesnt affect your global object).

One very simple (but maybe not very efficient) solution could be to serialize and deserialize your array. Ex:

var newObj = JSON.parse(JSON.stringify(obj));

Note that using JSON doesn't allow you to handle an functions. Here was an answer using this technique.

EDIT

To allow deep copy, you can also iterate the properties of the object as DMaster suggested but you should use some kine of recursion. I have taken this example from this answer in SO.

function clone(destination, source) {
    for (var property in source) {
        if (typeof source[property] === "object" && source[property] !== null && destination[property]) { 
            clone(destination[property], source[property]);
        } else {
            destination[property] = source[property];
        }
    }
}