Javascrip array.push() stays empty

October 5, 2022

I am trying to create an array of arrays (I’m working on a geometry algorithm and I need to return an array of polygons, the polygons themselves being arrays of verticies). I create my polygons and use a push method to add them to the list.
When I try to return my list it’s always an array that contains a bunch of [undefined, undefined] arrays instead of the polygons.

My code looks like this

function functionName() {
    let polygonsList = [];
    console.log(polygonsList);
    let nextPolygonToCover = [{ lat: -4.915832801313164, lng: -4.684574604034425 }, { lat: -20.632784250388028, lng: -86.95019960403444 }, { lat: 75.49715731893085, lng: -27.887699604034427 }];
    console.log(nextPolygonToCover);
    console.log(polygonsList);
    polygonsList.push(nextPolygonToCover);
    console.log(polygonsList);
    return (polygonsList);
}

And here is a screenshot of my console:

928 is my console.log(polygonsList) after declaration.
930 is console.log(nextPolygonToCover) to check it was correctly declared.
931 is the console.log(polygonsList) just after.
933 is the last console.log(polygonsList), just after the push.

This is a simplified version, where I replaced my nextPolygonToCover variable with a typical value and removed the calculations. The discrepancy in line numbers is due to the large amount of commented code. The issue is the same in both cases.

I also made the following tests:

Copied the code to CodePen and there was no problem. https://codepen.io/compainl/pen/JjvBmVB
Tried puting my test code from CodePen in another function without the comments and it did not work.
Made a mistake when copying from CodePen and forgot to writte the return and that, somehow, allowed the nextPolygonToCover array to be pushed into polygonsList. Adding the return caused the problem to return, wich made the "successfull" code unusable.

Here is a screenshot of my console for the case where return (polygonsList); is commented.

I don’t understand how something can work on CodePen but not in my editor (or at least with no reason to think other elements of code would be interfering) and, more importantly how the presence or abscence of return can be tied to the issue.

What am I doing wrong to end up in this situation ?
Thank you in advance to anyone who can help.

>Solution :

Not sure why it’s not working for you – works without issue in Chrome’s console and in Node.

Anyways, here’s a different approach which will help with your sanity:

function functionName() {
  const polygon = [
    {lat: -4.915832801313164, lng: -4.684574604034425},
    {lat: -20.632784250388028, lng: -86.95019960403444},
    {lat: 75.49715731893085, lng: -27.887699604034427},
  ];
  let polygons = [];

  polygons = [...polygons, polygon]; // or polygons = polygons.concat(polygon)

  return polygons;
}

const polygons = functionName()

console.log(polygons)

Result:

The main idea is to not use array.push – don’t mutate values, replace them via assignment. It’s a core tenet of functional programming, and makes your code much easier to reason about as there are no side effects happening anywhere – you know something has changed because you’ve explicitly replaced it