Honestly hard to explain.. I use something like a=b, then a++, but b changes. Except, these are Arrays

Question

Well my short and easy to explain explanation can be this. I have 2 arrays, FilterList and GamesReset. Whenever this function I have works and filters out some games with check boxes and a drop down menu, the function starts off with something like FilterList=GamesReset;. This functions seems to work fine until I filter out ages for the game. The function never touches GamesReset unless it's something like while(i<GamesReset.length){} or FilterList=GamesReset;. And the only tool I use when I filter games is FilterList.splice(i,1);. Now with that, GamesReset definitely, should never change as far as I know. I have it to reset FilterList, then depending on what needs to be filtered out, it will start removing those games from the FilterList. The problem I have, is that, GamesReset also becomes filtered. Which, does not make any sense at all. So like my title, it's just like saying b=0;, a=b;, a++;, and now b equals 1.

Now, I think that's the best/shortest way I can reveal this problem, without overdoing it with my bad habit of explaining things to people. I have a webpage currently available if anyone would like to see whats going on in action, because I wouldn't get what's going on with GamesReset either if I were you, ~~here (url removed, read edit)~~. To get the error working, just change the age to 10 without checking any boxes. The bottom paragraph is the GamesReset array (using <br> to separate each array), and it's the one that changes when I'm only changing FilterList in the JavaScript. The actual codes if you view the page source may be a little off compared to when I mentioned above, but it's pretty much 100% the same thing. I also wanted to have the codes available without a url and on this page, but I can't figure out how to do that with the html tags included.

Actually, here's the JavaScript function. I just figured out the 4 spaces thing when my question was rejected.

function SearchFilter() {
  Games = GamesReset;
  plat = document.getElementById('platformcheck').checked;
  rpg = document.getElementById('rpgcheck').checked;
  puzz = document.getElementById('puzzlecheck').checked;
  hybo = document.getElementById('hybocollectcheck').checked;
  ages = document.getElementById('agescheck').value;
  if ((!plat) && (!rpg) && (!puzz) && (!hybo)) {
    FilterList = Games;
  } else {
    FilterList = [];
    i = 0;
    while (i < Games.length) {
      Set = '';
      Set = Games[i];
      Set = Set.split('</>');
      StrFind = Set[0];
      if (
        (plat && (StrFind.search(',platform,') > -1)) || (rpg && (StrFind.search(',rpg,') > -1)) || (puzz && (StrFind.search(',puzzle,') > -1)) || (hybo && (StrFind.search(',hybocollect,') > -1))) {
        FilterList.push(Games[i]);
      }
      i++;
    }
    // so by now, we should have the filtered array
  }
  //seperate filter for ages
  i = 0;
  while (i < FilterList.length) { //The problem should definitely start here
    Set = '';
    Set = FilterList[i];
    Set = Set.split('</>');
    StrFind = Set[1];
    if ((Math.abs(StrFind)) > ages) {
      FilterList.splice(i, 1);
    } else {
      i++;
    }
  }
  GL.innerHTML = GamesReset.join('<br>');
}

As a reminder, the problem starts when the age filter is working. And the only thing it does is FilterList.splice(i,1);. But it ends up changing GamesReset. I changed this function a bit when I added Games=GamesReset;, but that was another test to try and make sure GamesReset doesn't get filtered like FilterList, but it still does.

EDIT: I removed my url since the answers definitely explained everything, so there's no need for it now.

score 5 · Answer 1 · edited May 23 '17 at 12:21

5

Arrays are not copied when assigned, both variables will refer to the same data. Here is a post that goes into detail on this: Copying array by value in JavaScript

edited May 23 '17 at 12:21

Community

1
1

answered Jan 14 '13 at 00:17

Peter Wooster

6,009
2
27
39

David Hellsing · Accepted Answer · 2013-01-14T00:34:07.023

It makes perfect sense since variables are just references to objects in memory. One object can have several references. Consider this:

var a = { foo: 'bar' };
var b = a;

// b is now a reference to a and they both point to the same object

b.foo = 'doe';
alert( a.foo ); // alerts doe

The same goes for arrays. So when you do FilterList = GamesReset you are not copying the array - you are just assigning the same array to another variable. Any mutations or changes made to either reference will be reflected in all references.

To create a copy of an array you can use slice:

FilterList = GamesReset.slice();

Honestly hard to explain.. I use something like a=b, then a++, but b changes. Except, these are Arrays

2 Answers2