JavaScript - Filter array with mutation

Question

I want to filter a array by keeping the same array without creating a new one.

with Array.filter() :

getFiltersConfig() {
  return this.config.filter((topLevelConfig) => topLevelConfig.name !== 'origin')
}

what is the best way to get the same result by filtering by value without returning a new array ?

Answer 1

For completeness, I thought it might make sense to show a mutated array variant.

Below is a snippet with a simple function mutationFilter, this will filter the array directly, notice in this function the loop goes in reverse, this is a technique for deleting items with a mutated array.

Also a couple of tests to show how Array.filter creates a new array, and mutationFilter does not.

Although in most cases creating a new array with Array.filter is normally what you want. One advantage of using a mutated array, is that you can pass the array by reference, without you would need to wrap the array inside another object. Another advantage of course is memory, if your array was huge, inline filtering would take less memory.

let arr = ['a','b','a'];
let ref = arr; //keep reference of original arr

function mutationFilter(arr, cb) {
  for (let l = arr.length - 1; l >= 0; l -= 1) {
    if (!cb(arr[l])) arr.splice(l, 1);
  }
}

const cond = x => x !== 'a';

const filtered = arr.filter(cond);
mutationFilter(arr, cond);

console.log(`ref === array -> ${ref === arr}`);
console.log(arr);

console.log(`ref === filtered -> ${ref === filtered}`);
console.log(filtered);

Answer 2

I want to filter a array by keeping the same array without creating a new one.

what is the best way to get the same result by filtering by value without returning a new array ?

I have an answer for the second criterion, but violates the first. I suspect that you may want to "not create a new one" specifically because you only want to preserve the reference to the array, not because you don't want to create a new array, necessarily (e.g. for memory concerns).

What you could do is create a temp array of what you want

var temp = this.config.filter((topLevelConfig) => topLevelConfig.name !== 'origin')

Then set the length of the original array to 0 and push.apply() the values "in-place"

this.config.length = 0; //clears the array
this.config.push.apply(this.config, temp); //adds what you want to the array of the same reference

Answer 3

You could define you custom method like so:

if(!Array.prototype.filterThis){
  Array.prototype.filterThis = function (callBack){
          if(typeof callBack !== 'function')
              throw new TypeError('Argument must of type <function>');
    let t = [...this];
    this.length = 0;
    for(let e of t) if(callBack(e)) this.push(e);
          return this;
  }
}

let a = [1,2,3,4,5,5,1,5];
a.filterThis(x=>x!=5);
console.log(a);

Warning: Be very cautious in altering built in prototypes. I would even say unless your making a polyfill don't touch. The errors it can cause can be very subtle and very hard to debug.

Answer 4

Not sure why would you want to do mutation but if you really want to do it, maybe assign it back to itself?

let arr = ['a','b','a'];

arr = arr.filter(x => x !== 'a');

console.log(arr)