How do you clone an array of objects using underscore?

Question

#!/usr/bin/env node
var _ = require('underscore');
var a = [{f: 1}, {f:5}, {f:10}];
var b = _.clone(a);
b[1].f = 55;
console.log(JSON.stringify(a));

This results in:

[{"f":1},{"f":55},{"f":10}]

Clone does not appear to be working! So I RTFM, and see this:

http://underscorejs.org/#clone

Create a shallow-copied clone of the object. Any nested objects or arrays will be copied by reference, not duplicated.

So _.clone is pretty useless. Is there a way to actually copy the array of objects?

There was a pull request for deep copy that was denied: github.com/jashkenas/underscore/pull/595 Lo-Dash has cloneDeep — epascarello
– epascarello, Commented Jan 8, 2014 at 18:03
underscore vs. lodash : stackoverflow.com/questions/13789618/… — Jess
– Jess, Commented Jan 8, 2014 at 19:20

Jess · Accepted Answer · 2014-10-01 15:14:55Z

123

Well, there is a trick! If clone does not "clone" nested objects, you can force it to by explicitly cloning each object inside a map call! Like this:

#!/usr/bin/env node
var _ = require('underscore');
var a = [{f: 1}, {f:5}, {f:10}];
var b = _.map(a, _.clone);       // <----
b[1].f = 55;
console.log(JSON.stringify(a));

Prints:

[{"f":1},{"f":5},{"f":10}]

Yay! a is unchanged! I can now edit b to my liking!

edited Oct 1, 2014 at 15:14

answered Jan 8, 2014 at 17:57

Jess

25.4k21 gold badges134 silver badges158 bronze badges

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

3 Comments

Simon Zyx Over a year ago

Be careful, though. This of course only works two levels deep. not for arrays or objects which are nested even more than this example.

Mark K Cowan Over a year ago

By design, Underscore also won't clone RegExp or Date values properly

gdibble Over a year ago

Anyone looking here should see my answer below.

Nacho Coloma · Accepted Answer · 2015-09-03 14:05:28Z

70

Another solution extracted from the issue on Github that works with any level of nested data, and does not require underscore:

JSON.parse(JSON.stringify(obj))

answered Sep 3, 2015 at 14:05

Nacho Coloma

7,3783 gold badges44 silver badges44 bronze badges

4 Comments

mcdave Over a year ago

This works unless the object has a cycle, in which case JSON.stringify throws an error. Which isn't the case in the original but is still an interesting state of affairs. a = {simple: 'thing'}; a.cycle = a ; JSON.stringify(a).

cayleyh Over a year ago

Also worth noting this solution only works for objects with simple types. For instance, if you're object has Date or Regex instances, they will be serialized to strings. Not the end of the world, but you need to handle it if you're using this and expect Date instances.

Ian Mackinnon Over a year ago

And if you think someone might try and feed undefined to this you'll want JSON.parse(JSON.stringify(obj) || null) otherwise it'll throw an error.

Marko Gresak Over a year ago

Along with what @cayleyh mentioned, this will drop functions altogether.

Hertzel Guinness · Accepted Answer · 2016-10-19 18:47:56Z

14

FWIW, lodash has a cloneDeep function:

This method is like _.clone except that it recursively clones value.

answered Oct 19, 2016 at 18:47

Hertzel Guinness

5,9903 gold badges41 silver badges43 bronze badges

1 Comment

DWilches Over a year ago

It behaves differently with keys with undefined values though. So something to be aware of. Cloning {a: 1, b: undefined} with lodash will keep the undefined, but the parse/stringify version will remove them.

gdibble · Accepted Answer · 2017-05-10 23:08:08Z

Underscore API reference:

_.toArray(list) Creates a real Array from the list (anything that can be iterated over). Useful for transmuting the arguments object.

...or in this case, cloning an array. Try this:

var _ = require('underscore');
var array1 =  [{a:{b:{c:1}}},{b:{c:{a:2}}},{c:{a:{b:3}}}];
var array2 = _.toArray(array1);
console.log(array1 === array2); --> false
console.log(array1[0] === array2[0]); --> true

The following is an addendum I created after Steve's comment below -thx

A Vanilla JS (or using `_.clone` if wanted) deep cloning recursive helper:

function clone(thing, opts) {
    var newObject = {};
    if (thing instanceof Array) {
        return thing.map(function (i) { return clone(i, opts); });
    } else if (thing instanceof Date) {
        return new Date(thing);
    } else if (thing instanceof RegExp) {
        return new RegExp(thing);
    } else if (thing instanceof Function) {
        return opts && opts.newFns ?
                   new Function('return ' + thing.toString())() :
                   thing;
    } else if (thing instanceof Object) {
        Object.keys(thing).forEach(function (key) {
            newObject[key] = clone(thing[key], opts);
        });
        return newObject;
    } else if ([ undefined, null ].indexOf(thing) > -1) {
        return thing;
    } else {
        if (thing.constructor.name === 'Symbol') {
            return Symbol(thing.toString()
                       .replace(/^Symbol\(/, '')
                       .slice(0, -1));
        }
        // return _.clone(thing);  // If you must use _ ;)
        return thing.__proto__.constructor(thing);
    }
}

var a = {
    a: undefined,
    b: null,
    c: 'a',
    d: 0,
    e: Symbol('a'),
    f: {},
    g: { a:1 },
    h: [],
    i: [ { a:2 }, { a:3 } ],
    j: [ 1, 2 ],
    k: function (a) { return a; },
    l: /[a-z]/g,
    z: [ {
        a: undefined,
        b: null,
        c: 'b',
        d: 1,
        e: Symbol(1),
        f: {},
        g: { b:2 },
        h: { c:{ c:3 } },
        i: { a:Symbol('b') },
        j: { a:undefined, b:null },
        k: [],
        l: [ 1, [ 1, 2 ], [ [ 1, 2, 3 ] ] ],
        m: function (a) { return !a; },
        n: { a:function (a) { return !!a; } },
        o: /(a|b)/i
       } ]
};
var b = clone(a);
var c = clone(a, { newFns:true });


/* Results - value beneath each for reference:

a.a === b.a --> true
undefined

a.b === b.b --> true
null

a.c === b.c --> true
'a'

a.d === b.d --> true
0

a.e === b.e --> false
Symbol(a)

a.f === b.f --> false
{}

a.g === b.g --> false
{ a:1 }

a.h === b.h --> false
[]

a.i === b.i --> false
[ { a:2 }, { a:3 } ]

a.i[0] === b.i[0] --> false
{ a:2 }

a.i[0].a === b.i[0].a --> true
2

a.j === b.j --> false
[ 1, 2 ]

a.k === b.k --> true
a.k === c.k --> false
function (a) { return a; }

a.l === b.l --> false
/[a-z]/g

a.z === b.z --> false
[Object]

a.z[0].a === b.z[0].a --> true
undefined

a.z[0].b === b.z[0].b --> true
null

a.z[0].c === b.z[0].c --> true
'b'

a.z[0].d === b.z[0].d --> true
1

a.z[0].e === b.z[0].e --> 
false
Symbol(1)

a.z[0].f === b.z[0].f --> false
{}

a.z[0].g === b.z[0].g -- > false
{ b:2 }

a.z[0].g.b === b.z[0].g.b --> true
2

a.z[0].h === b.z[0].h --> false
{ c:{ c:3 } }

a.z[0].h.c === b.z[0].h.c --> false
{ c:3 }

a.z[0].h.c.c === b.z[0].h.c.c --> true
3

a.z[0].i === b.z[0].i --> false
{ a:Symbol(b) }

a.z[0].i.a === b.z[0].i.a --> false
Symbol(b)

a.z[0].j === b.z[0].j --> false
{ a:undefined, b:null }

a.z[0].j.a === b.z[0].j.a --> true
undefined

a.z[0].k === b.z[0].k --> false
[]

a.z[0].l === b.z[0].l --> false
[ 1, [ 1, 2 ], [ [ 1, 2, 3 ] ] ]

a.z[0].l[1] === b.z[0].l[1] --> false
[ 1, 2 ]

a.z[0].l[1][1] === b.z[0].l[1][1] --> true
2

a.z[0].m === b.z[0].m --> true
a.z[0].m === c.z[0].m --> false
function (a) { return !a; }

a.z[0].n === b.z[0].n --> false
{ a:function (a) { return !!a; } }

a.z[0].n.a === b.z[0].n.a --> true
a.z[0].n.a === c.z[0].n.a --> false
function (a) { return !!a; }

a.z[0].o === b.z[0].o --> false
/(a|b)/i

*/

_.toArray(list) doesn't clone objects in an array. var array1 = [{a: 1}, {a: 2}, {a: 3}]; var array2 = _.toArray(array1); array2[0].a = 999; console.log(array1[0]); --> {a: 999}
@SteveLang thanks for pointing that out. Oops. Therefore I took some time to make the vanilla JS fn above, which if the user really must can use the _.clone in the else condition ;)

Collectives™ on Stack Overflow

How do you clone an array of objects using underscore?

4 Answers 4

3 Comments

4 Comments

1 Comment

A Vanilla JS (or using `_.clone` if wanted) deep cloning recursive helper:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

1 Comment

A Vanilla JS (or using _.clone if wanted) deep cloning recursive helper:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

A Vanilla JS (or using `_.clone` if wanted) deep cloning recursive helper: