How do I create an array of individual objects Javascript

Question

they all point to the same object "bestGamer" I don't want them to do that, I want that each cell in the array will be an individual object with different values in their props.

I want to do it static cause later I want to pass an array, I don't to push in runtime different values

const bestGamer = {
        "name" : "",
        "points" : 0    
}
arr2 = new Array(2).fill(bestGamer)
console.log("First:",arr2[0])
console.log("Second:",arr2[1]);    
arr2[0].name ="Yossi"
arr2[0].points++
arr2[1].name ="Dima"
arr2[1].points++
console.log("First:",arr2[0]);
console.log("Second:",arr2[1]);
console.log("Orignal Object",bestGamer);

@Mike'Pomax'Kamermans That likely won't work, either, because it evaluates the object literal before calling fill, so it'll just fill the array with the same object reference in all indices. — IceMetalPunk, Sep 30 '19 at 17:57

score 4 · Accepted Answer · answered Sep 30 '19 at 17:58

4

You need to create a copy while placing it into newArray, fill(bestGamer) places same bestGamer on all indices so you end up having same reference at all indices

let bestGamer = { a: 1,  b: 2 }
let newArr = new Array(2).fill(0).map(v=> ({...bestGamer}))

newArr[0].a = 10
console.log(newArr)

Instead of new Array you can use Array.from

let bestGamer = { a: 1,  b: 2 }
let newArr = Array.from({length:2}, () => ({...bestGamer}) )

newArr[0].a = 10
console.log(newArr)

answered Sep 30 '19 at 17:58

Code Maniac

33,907
4
28
50

@EddieKnaz `...` is [`spread syntax`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) – Code Maniac Sep 30 '19 at 18:11
@EddieKnaz See [What does this symbol mean in JavaScript?](https://stackoverflow.com/q/9549780/4642212) and the documentation on MDN about [expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators). – Sebastian Simon Sep 30 '19 at 18:12
alright so using the spread syntax on an object {...bestGamer} does a clone. and than I map it to each cell using the map synax, thank you very much guys – Eddie Knaz Sep 30 '19 at 18:32
I also could write, seems to work arr2 = new Array(2).fill(0).map(v=> ({ "name" : "", "points" : 0 })) – Eddie Knaz Sep 30 '19 at 18:53

IceMetalPunk · Answer 2 · 2019-09-30T18:00:34.877

0

You're filling the array with bestGamer, so it'll be filled with references to that same object. You need to create a new object for each element. An easy way to do this is combining Array.map with Object.assign:

arr2 = new Array(2).fill(0).map(() => Object.assign({}, bestGamer));

edited Sep 30 '19 at 18:00

answered Sep 30 '19 at 17:57

IceMetalPunk

4,963
3
13
23

You don’t need the `0`. Alternatively: `Array.from({length: 2}, () => ({ ...bestGamer }))`. – Sebastian Simon Sep 30 '19 at 17:59
Thanks for pointing out the missing parenthesis; I edited it in. While you don't need the 0, I always prefer to give it some value instead of filling with undefined, as a good practice habit when using `fill`. – IceMetalPunk Sep 30 '19 at 18:01
_“I always prefer to give it some value instead of filling with undefined”_ — but the `0` doesn’t mean anything; it’s never used, it is immediately discarded, it doesn’t need to be a number. I’d prefer `.fill()`, or more explicitly `.fill(undefined)`, if `fill` is to be used. But, honestly, this looks like a misuse of `fill` anyway, which is why I’d use the `Array.from` approach instead. – Sebastian Simon Sep 30 '19 at 18:04
I understand that in this instance it's not used, but in other cases of using `fill` there may not be an immediate map, so I just prefer to be in the habit of always including a non-undefined value. It's all preference. (As for fill vs Array.from, that's also just preference; both do the same thing in basically the same efficiency.) – IceMetalPunk Sep 30 '19 at 18:06

score 0 · Answer 3 · answered Sep 30 '19 at 18:01

to create an array that has individual objects, you can do this.

Step 1: declare an array

var myArray = [];

Step 2: add an object to it

myArray.push[{0, 1, 2, 3}]

Now your array has 1 item. This item is item[0]. Item[0] is an object. It has multiple values inside of it, in this case 4. so to access the second item inside of item[0] you can have item[0][1].

How do I create an array of individual objects Javascript

3 Answers3