Question 322405 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – URLSearchParams iteration

Why does the second parameter remain after the loop has completed?

const queryParams = new URLSearchParams({
  first: 'something',
  second: 'something',
  third: 'something',
})

console.log('before', queryParams.toString())

for (const [key, value] of queryParams.entries()){
    queryParams.delete(key)
}

console.log('after', queryParams.toString())
.as-console-wrapper {
    max-height: 100% !important;
}

I expected it to be empty

Tags:

2

Answers


  1. 0

    Here’s what happens when your code is executed:

    1. Initially, the queryParams has three pairs: first=something,
      second=something, and third=something.
    2. On the first iteration, the pair first=something is processed where you delete the first key.
    3. After deletion, the queryParams now has two pairs: second=something
      and third=something.
    4. The iterator moves to the next pair, which is
      now third=something because the original second pair
      (second=something) has shifted up in the order after the deletion of
      the first pair.
    5. The pair third=something is then deleted, and the loop ends because there are no more pairs to process.

    Try this one:

    const queryParams = new URLSearchParams({
  first: 'something',
  second: 'something',
  third: 'something',
});

console.log('before', queryParams.toString());

// Copy keys into array
const keys = [...queryParams.keys()];

// Iterate over the keys array to delete from queryParams
for (const key of keys) {
    queryParams.delete(key);
}

console.log('after', queryParams.toString());
    Login or Signup to reply.
  2. 0

    The issue with your code is that you are modifying the queryParams object while iterating over it using the for…of loop. When you delete an entry from the URLSearchParams object, it affects the iteration process, and unexpected behavior may occur.

    To safely clear all parameters from the URLSearchParams object, you can use the URLSearchParams constructor without any parameters or use the URLSearchParams.clear() method. Here’s an updated version of your code:

    const queryParams = new URLSearchParams({
  first: 'something',
  second: 'something',
  third: 'something',
});

console.log('before', queryParams.toString());

// Clearing parameters using the URLSearchParams constructor
const newQueryParams = new URLSearchParams();

console.log('after', newQueryParams.toString());

    Or using the clear() method:

    const queryParams = new URLSearchParams({
  first: 'something',
  second: 'something',
  third: 'something',
});

console.log('before', queryParams.toString());

// Clearing parameters using the clear() method
queryParams.clear();

console.log('after', queryParams.toString());

    Either of these approaches will safely clear all parameters from the URLSearchParams object without affecting the iteration process.

    If you want to delete entries from the URLSearchParams object while iterating, you need to create a copy of the entries first, and then iterate over the copy. This way, you won’t modify the object being iterated over. Here’s an example:

    // Create a copy of entries
const entriesCopy = [...queryParams.entries()];

// Iterate over the copy and delete entries from the original object
for (const [key, value] of entriesCopy) {
  queryParams.delete(key);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search