Skip to content

Instantly share code, notes, and snippets.

@buxtonpaul

buxtonpaul/for-each.htm

Forked from bennadel/for-each.htm
Last active November 27, 2018 14:59
Show Gist options
  • Save buxtonpaul/b2a3a4efbea6110b228e1fe4e7041dc8 to your computer and use it in GitHub Desktop.
Save buxtonpaul/b2a3a4efbea6110b228e1fe4e7041dc8 to your computer and use it in GitHub Desktop.
Download ZIP
Mutating An Array During .forEach() Iteration In JavaScript
Raw
for-each.htm
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>
Mutating An Array During .forEach() Iteration In JavaScript
</title>
</head>
<body>
<h1>
Mutating An Array During .forEach() Iteration In JavaScript
</h1>
<!-- Load scripts. -->
<script type="text/javascript">
var values = [ "o0", "o1", "o2", "o3", "o4" ];
values.forEach(
function iterator( value, index, collection ) {
console.log( "Visiting:", value );
if ( value === "o1" ) {
// Delete current value.
// --
// NOTE: We have already logged this value out, so this action will
// affect the length of the collection, but not the logging of this
// particular item.
values.splice( index, 1 );
}
if ( index === 3 ) {
// Append new values.
values.push( "n0" );
values.push( "n1" );
values.push( "n2" );
values.push( "n3" );
values.push( "n4" );
}
}
);
// --------------------------------------------------------------------------- //
console.log( "- - - - - - - - - - - - - - - -" );
// --------------------------------------------------------------------------- //
var values = [ "o0", "o1", "o2", "o3", "o4" ];
// This time, when iterating over the collection, we're going to iterate over
// a DUPLICATE of the original collection using .slice().
values.slice().forEach(
function iterator( value, index, collection ) {
console.log( "Visiting:", value );
if ( value === "o1" ) {
// Delete current value.
values.splice( index, 1 );
}
if ( index === 3 ) {
// Append new values.
values.push( "n0" );
values.push( "n1" );
values.push( "n2" );
values.push( "n3" );
values.push( "n4" );
}
}
);
// --------------------------------------------------------------------------- //
console.log( "- - - - - - - - - - - - - - - -" );
// --------------------------------------------------------------------------- //
var values = [ "o0", "o1", "o2", "o3", "o4" ];
// This time, when iterating over the collection, we're going to iterate over
// a DUPLICATE of the original collection using .slice().
// in addition we are going to delete item o1 and o3
values.slice().forEach(
function iterator( value, index, collection ) {
console.log( "Visiting:", value );
if ( value === "o1" || value === "o3" ) {
// Delete current value.
values.splice( index, 1 );
}
if ( index === 3 ) {
// Append new values.
values.push( "n0" );
values.push( "n1" );
values.push( "n2" );
values.push( "n3" );
values.push( "n4" );
}
}
);
// if you inspect values at this point you will see we have actually deleted o1 and o4
var values = [ "o0", "o1", "o2", "o3", "o4" ];
var deleted=0;
// This time, when iterating over the collection, we're going to iterate over
// a DUPLICATE of the original collection using .slice().
// and delete o3, by tracking the number of deleted items and using that to adjust our index
values.slice().forEach(
function iterator( value, index, collection ) {
console.log( "Visiting:", value );
if ( value === "o1" || value === "o3" ) {
// Delete current value.
values.splice( index-deleted, 1 );
deleted ++;
}
if ( index === 3 ) {
// Append new values.
values.push( "n0" );
values.push( "n1" );
values.push( "n2" );
values.push( "n3" );
values.push( "n4" );
}
}
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment