Return of the javascript function without reference [duplicate]

Question

In the code below, I expected that the result of the 3 logs would be the same.

But they are not.

var m = (function () {
  var arr = [
    {a: 1, b: 2}, 
    {c: 3, d: 4}
  ];

  return {
    getArr: function () {
      return arr;
    }
  };
})();

var myArr = m.getArr();

console.log(myArr);

myArr.pop();

console.log(m.getArr());

What is the best way to ensure that the array is not passed as a reference?

Use return arr.map()?

You can use return arr.slice() - however be aware that this would only be a shallow copy and you can still run into issues. — Chris Cousins
– Chris Cousins, Commented Sep 11, 2018 at 19:23
In Javascript, all objects are effectively "passed by reference". (This isn't strictly true, but is an easy way to think of it.) Arrays are objects too, so this is why this happens. Note that primitive values (strings, numbers, booleans) are always "passed by value" instead. This question may be useful for further explanation — Robin Zigmond
– Robin Zigmond, Commented Sep 11, 2018 at 19:37

jmcgriz · Accepted Answer · 2018-09-11 19:25:09Z

5

JSON.parse(JSON.stringify(arr)) will give you a deep copy of an object or array.

var m = (function () {
  var arr = [
    {a: 1, b: 2}, 
    {c: 3, d: 4}
  ];

  return {
    getArr: function () {
      return JSON.parse(JSON.stringify(arr));
    }
  };
})();

var myArr = m.getArr();

console.log(myArr);

myArr.pop();

console.log(m.getArr());

answered Sep 11, 2018 at 19:25

jmcgriz

3,3981 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tyler Roper Over a year ago

While it works in most cases, a few things should definitely be brought to the attention of anyone using this method: 1. It only works on JSON-serializable content (that is, your array and objects cannot contain functions/methods, nor Infinity, null, or undefined). 2. It will convert date values to string. 3. It is very inefficient. That said, if your array is small (relatively speaking) and consists of only primitives and/or objects that consist of only primitives (string/number/boolean), this method will work perfectly fine.

Eric Nordelo Galiano · Accepted Answer · 2018-09-11 19:26:22Z

1

var m = (function () {
  var arr = [
    {a: 1, b: 2}, 
    {c: 3, d: 4}
  ];

  return {
    getArr: function () {
      return Array.from(arr);
    }
  };
})();

Ensure that the closure returns a copy of the arr.

answered Sep 11, 2018 at 19:26

Eric Nordelo Galiano

4554 silver badges16 bronze badges

1 Comment

jmcgriz Over a year ago

This also returns a shallow copy, so if the array has multiple layers of depth, you could still run into problems using Array.from

Collectives™ on Stack Overflow

Return of the javascript function without reference [duplicate]

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related