add item to array in loop by this array js

Question

I have the following method:

var items = [1,2,3];
$.map(items, function (item) {
 if (item === 1) {
 items.push(4);
 }
 console.log(item);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

and I expect in console 1,2,3,4, but see 1,2,3. I mean I want to see one extra loop item.

Can I resolve it somehow? And if yes, how can I resolve it?

• Narendra Jadhav: you have log wrong array instead of item use this console.log(items); this will give expect output.
• Jonathan Lonowski: .map() stores the original length of the array before invoking the callback (step 2). By design, it won't continue into new elements added during iteration.
• Death-is-the-real-truth: Agreed with @JonathanLonowski
• Death-is-the-real-truth: console.log(item); needs to be console.log(items);. Seems TYPO mistake to me
• A. Gladkiy: @JonathanLonowski Maybe I can use something instead .map() for this?

Answer 1

Iterator methods, like .map() or .forEach(), will prevent visiting elements added during iteration by using only the original length.

To avoid that, you'll want to use a standard loop, such as for..of (with the default array iterator checking length as it progresses):

var items = [1, 2, 3];
for (var item of items) {
 if (item === 1) {
 items.push(4);
 }
 
 console.log(item);
}

Though, other types of loops can be used to do the same.

Of course, beyond this current example, be careful that the loop doesn't become infinite from there always being new elements to iterate to next.

• Kiran Shakya: What a coincidence? I just posted an answer almost similar to yours.

Answer 2

Yes certainly you can resolve it, but in your specific case, items is passed by value to your map function so that you won't accidentally alter the original variable. The purpose of map is not for what you are using, but for mapping by specific key for an object or associative array. You should fall back to for loop or some other method for getting your desired output.

var items = [1, 2, 3];
for (var i = 0; i < items.length; i++) {
 const item = items[i];
 if (item === 1) {
 items.push(4);
 }
 console.log(item);
};

Answer 3

use forIn instead of forOf, because sometime forOf give an error (maybe forOf not supported older version of js )..

 var items = [1,2,3];
 var k;
 for (k in items){
 if(items[k] === 1){
 	 items.push(4);
 }
 }
 alert(items);

• Jonathan Lonowski: for..of loops are relatively new to the language (since 2015), but are supported by all modern browsers. Though, a basic for loop would be a better alternative. With arrays, for..in loops behave different than is often expected.