Removing an element from a javascript array inside a loop

Question

I have the following code which iterates through a JS array. When I get to a specific element, I want to remove it. I realise that I can use splice, but is there a way that doesn't involve me tracking the index:

    myArray.forEach(function (point) {
        canvasContext.clearRect(point.PointX - 3, point.PointY - 3, 6, 6);
        point.PointY++;
        canvasContext.fillRect(point.PointX - 3, point.PointY - 3, 6, 6);

        if (point.PointY > canvas.height) {
            // Remove point

        }
    });

Other great (better?) solutions than the here given ones: http://stackoverflow.com/questions/9882284/looping-through-array-and-removing-items-without-breaking-for-loop — Simon Steinberger, Aug 04 '14 at 05:52

Ja͢ck · Accepted Answer · 2013-04-19T16:57:52.490

1

Modifying the array in-place can be tricky, so perhaps Array.filter() is a better function to use:

myArray = myArray.filter(function (point) {
    canvasContext.clearRect(point.PointX - 3, point.PointY - 3, 6, 6);
    point.PointY++;
    canvasContext.fillRect(point.PointX - 3, point.PointY - 3, 6, 6);

    if (point.PointY > canvas.height) {
        return false;
    }
    return true;
});

It returns an array with all elements for which the callback returned true.

edited Apr 19 '13 at 16:57

answered Apr 19 '13 at 16:51

Ja͢ck

170,779
38
263
309

Just a heads-up: I think this doesn't work in IE < 9. – Simon Steinberger Aug 04 '14 at 05:52
@SimonSteinberger The link has a polyfill for browsers that don't support `.filter()` natively. – Ja͢ck Aug 04 '14 at 05:53

score 0 · Answer 2 · answered Apr 19 '13 at 16:41

Use the 2nd parameter to forEach, index and Array.splice:

myArray.forEach(function (point, index) {
    canvasContext.clearRect(point.PointX - 3, point.PointY - 3, 6, 6);
    point.PointY++;
    canvasContext.fillRect(point.PointX - 3, point.PointY - 3, 6, 6);

    if (point.PointY > canvas.height) {
        myArray.splice(index, 1);
    }
});

score 0 · Answer 3 · answered Apr 19 '13 at 16:50

There's often an issue with loops that change the length of the array being looped over. They will end up 'skipping' an item.

It's typical when you're going to affect the length of the array to count down instead of up, with a loop like this:

for (var i = Things.length - 1; i >= 0; i--) {
  //your code here
};

Removing an element from a javascript array inside a loop

3 Answers3