18

I am working on a chat and using an array to hold the users. Here is my problem:

User1 joins and is given Index 0 in the array via push. User2 joins and is given Index 1 in the array via push.

User1 disconnects and is removed via splice.

NOW User2 becomes Index 0.

User1 reconnects and is given Index 1 via push.

User2 disconnects, and Index 1 is removed which is now User1.

This is of course causing a problem.

So my question is how can I remove the item from the array without the index of the other elements changing? Am I on the wrong track here?

2
  • just set the field to null
    – shift66
    Jun 30, 2013 at 5:55
  • 1
    "This is of course causing a problem." - Why "of course"? This could be perfectly acceptable depending on how your other code uses the array. (That is, your other code could be written in a way that isn't dependent on the array indices.) Having said that, you could use an object instead of an array...
    – nnnnnn
    Jun 30, 2013 at 5:56

5 Answers 5

16

Instead of removing the items from the array with splice(), why not just set the value to null or undefined?

Then when you're adding a new user, you can just scan through the array to find the first available slot.

javascript arrays are simply lists of items - they're not keyed to a specific key like you might be familiar with in PHP. So if you want to keep the same position in the array, you can't remove other items - you need to keep them, and just mark them as empty.


You might scan through something like this:

var users = [];
function addUser(user) {
    var id = users.indexOf(null);
    if (id > -1) {
        // found an empty slot - use that
        users[id] = user;
        return id;
    } else {
        // no empty slots found, add to the end and return the index
        users.push(user);
        return users.length - 1;
    }
}
function removeUser(id) {
    users[id] = null;
}
3
  • Thank you for your reply. I had considered using the delete as it would be better than having the index grow with each new user and having the index grow very large. Could you please explain how to "scan through" and find and then assign it to an array. More precisely how to scan, assign if available, and then if not push to the end?
    – Cyrus
    Jun 30, 2013 at 5:58
  • 1
    Assuming you "clear" a slot by setting it to null, you can use yourArray.indexOf(null) to get the index of the first available slot. If it returns -1 that means there are no null entries, so then you can .push().
    – nnnnnn
    Jun 30, 2013 at 6:04
  • @nnnnnn Thanks, I had overlooked that. I updated my example to use indexOf.
    – jcsanyi
    Jun 30, 2013 at 6:10
13

Use delete instead of splice.

> a = ['1', '2', '3']
< Array [ "1", "2", "3" ]

> delete a[1]
< true

> a
< Array [ "1", undefined × 1, "3" ]

> a.length
< 3
4
  • 1
    a.filter(x=>x).length will give length of 2 Jan 20, 2020 at 18:52
  • I assume this was expected, as the question asked: > how can I remove the item from the array without the index of the other elements changing Jan 22, 2020 at 10:43
  • 2
    Yep, I just thought I’d add that as a way to get the length of non-empty indexes. Jan 23, 2020 at 16:35
  • Oh sorry, I misread. :) Yes indeed it's possible to get the length of defined elements. :) Jan 29, 2020 at 10:20
6

Another option is to use a javascript object instead of an array.

Something like this:

var users = {};

users[1] = 'user 1';
users[2] = 'user 2';

delete users[1];
alert(users[2]);        // alerts "user 2"
alert(typeof users[1]); // alerts "undefined"

You lose the array length property though, so you'll have to keep track of your max user number yourself.

0

I'm sure there is a variety of solutions that work depending on your specific context. I have a project using React and was having a similar issue when setting an object in an array to undefined because elsewhere in the code I would get an error like cannot find {key} of undefined ...the same happened with null ...my solution that now works fine is to simply recreate the whole array, which I can do in my case because it is not a super long list. Altered to fit your description:

let newUsers = [];
users.forEach((u, i) => {
  if (u.isOnline) newUsers[i] = u;
});
this.setState({ users: newUsers });

...something to that effect. In my case I have a list of selected recipes. If the recipe was deleted from the overall list of recipes, this removes it from the list of selections, where the selected index indicates which 'course' it is (i.e. Appetizer, Entree, Dessert) so the index matters.

Another solution could be to use your Users' ID as the index of the array. When a user comes online you can set onlineUsers[user.ID] = user //or true or user.Name or whatever

-1

remove array elements without facing re-indexing problem

    var ind=[1,6]; //index positions of elements to remove
    var arr=['a','b','c','d','e','f','g']; // actual array
    var arr2 = arr.filter(function(item,index){
            if(ind.indexOf(index)== -1){
            return true;
    }});

now arr2 is ==========>> ['a','c','d','e','f']

1
  • 2
    How did this not change the index? c moved to index 1 which is supposed to remain at 2, unless I misunderstand the OP question.
    – johnny
    Mar 30, 2017 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.