Why aren't array elements not deleted in forEach loop logged in the console?

Question

I wanted to delete the first and third elements of the array using the forEach method. I was able to do this, but the question came to me: Why are elements deleted in forEach registered in the console but elements that were not deleted are not registered in the console?

Does not the forEach method apply to all elements of a functional array? So why aren't all the array elements registered in the console?

const cartItems = ['Book1', 'Book2', 'Book3', 'Book4']

cartItems.forEach(function (item, index, array) {

    // I mean console.log below 👇

    console.log(item)

    if (index == 0) {
        array.shift()
    }

    if (index == 1) {
        array.splice(1, 1)
    }
})

console.log(cartItems)

Because shift() and splice() mutate the original array.

Hassan Imam
– Hassan Imam

2021-06-19 11:03:15 +00:00
Commented Jun 19, 2021 at 11:03 — Hassan Imam
– Hassan Imam, Commented Jun 19, 2021 at 11:03

raina77ow · Accepted Answer · 2021-06-19 11:08:39Z

3

In a nutshell, it's not a good idea to modify the array walked over by forEach (or any other iterative function). Here's a telling quote from MDN docs:

The range of elements processed by forEach() is set before the first invocation of callbackFn. Elements which are assigned to indexes already visited, or to indexes outside the range, will not be visited by callbackFn.

In your example, the callback function of forEach is skipped for 'Book2' item because array.shift essentially reassigns it to index 0 (which has already been visited). The same thing happens with 'Book4' after array.splice.

edited Jun 19, 2021 at 11:08

answered Jun 19, 2021 at 11:03

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

Comments

Alireza Ahmadi · Accepted Answer · 2021-06-19 12:14:05Z

1

You must notice the definition of shift and splice method. Based on this the definition of shift is:

The shift() method removes the first item of an array.

Note: This method changes the length of the array.

Note: The return value of the shift method is the removed item.

Note: This method will change the original array.

And the same as splice method is:

The splice() method adds/removes items to/from an array, and returns the removed item(s).

Note: This method changes the original array.

And the answer for your question why aren't all the array elements registered in the console? is that both methods change the original array.

edited Jun 19, 2021 at 12:14

answered Jun 19, 2021 at 11:22

Alireza Ahmadi

10.2k8 gold badges28 silver badges66 bronze badges

Collectives™ on Stack Overflow

Why aren't array elements not deleted in forEach loop logged in the console?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related