Array.push is correctly pushing iterated objects to an array, but once the array is returned by method, all object properties have become the same

Question

The below code is a method for my constructor for the class Word which is part of a word-search app I am building.

createCoordinates () {
        let result = []
        let printDir = getPrintDirection(this)
        let startPos = this.startPos
        let coord = {x: startPos.x, y: startPos.y}
        for (let i = 0; i < this.text.length; i++) {
            result.push (coord)
            coord.x = coord.x + printDir.x
            coord.y = coord.y + printDir.y
        }
        return result
    } 
  
}

When a new Word is created, the method needs to create an array of board coordinates that the word covers.

Firstly the method creates an empty array: result.

Then it obtains a printDir value (for example {x: 0, y: 1} that dictates how much to change coordinates by for each letter, depending on word direction.

Starting with the startPos value, which is already defined for the word object, it should push a value to the array for each letter in the word, and increment the values in coord according to the direction the word is moving in, and then finally return the array of objects which should reflect all the board squares the word is covering.

So a four letter word moving top to bottom starting at the position: {x: 1, y: 1} should return something like:

[{x:1, y:1}, {x:1, y:2}, {x:1, y:3}, {x:1, y:4}]

From logging inside the loop I can see the coord variable is changing as required, however when I log the array 'result' all the values have become the a different new value which is the value for the letter/iteration after the word should finish. To use the above example the array would look like this:

[{x:1, y:5}, {x:1, y:5}, {x:1, y:5}, {x:1, y:5}]

If I log the progress of the array within the loop, in the 1st iteration I can see that this has already taken place.

I'm stumped by this problem so any help would be appreciated, and I can share all of my code if this would help.

Does this answer your question? Modifying a copy of a JavaScript object is causing the original object to change — StackByMe
– StackByMe, Commented Jun 15, 2021 at 14:59
Does this answer your question? How to push object to array from for loop properly in JavaScript? — ggorlen
– ggorlen, Commented Jun 15, 2021 at 15:03
@ggorlen If I move let coord and set it to startPos it will on each run of the loop reset to the start Position and create an array of all the same objects, but this time all matching the start co-ordinates. — Thomas Walsh
– Thomas Walsh, Commented Jun 15, 2021 at 15:05
Try result.push(...coord) then to copy the object, or change your logic to get the coordinates you want, maybe by using a separate object to accumulate the printDirs. — ggorlen
– ggorlen, Commented Jun 15, 2021 at 15:05

Tushar Shahi · Accepted Answer · 2021-06-15 15:12:07Z

1

What is happening in your code:

You have an object coord. You are pushing its reference to the array, in each iteration. All your array elements point to coord. You are changing the properties of the object coord again in turn changing your array elements.

        let coord = {x: startPos.x, y: startPos.y}
        for (let i = 0; i < this.text.length; i++) {
           
           result.push ({x : coord.x , y : coord.y})
            coord.x = coord.x + printDir.x
            coord.y = coord.y + printDir.y
        }
        return result

I am now sending a new object in each loop.

edited Jun 15, 2021 at 15:12

answered Jun 15, 2021 at 15:07

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

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

3 Comments

Thomas Walsh Over a year ago

With the above code having the declaration inside the loop resets coord back to the startPos.x/y values. So I get an array of values that matches the start position value in that scenario.

Tushar Shahi Over a year ago

I have edited the code. I am passing a new object each time.

Tushar Shahi Over a year ago

Glad. Consider upvoting/accepting the answer in that case.

Collectives™ on Stack Overflow

Array.push is correctly pushing iterated objects to an array, but once the array is returned by method, all object properties have become the same

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related