Array.push() and unique items

Question

I have a simple case of pushing unique values into array. It looks like this:

  this.items = [];

  add(item) {
    if(this.items.indexOf(item) > -1) {
      this.items.push(item);
      console.log(this.items);
    }
  }

Seems pretty straight-forward, right? No, as it appears. It doesn't add any values. I am sure it's some kind of silly mistake on my side, but I can't seem to find it.

score 166 · Accepted Answer · edited Apr 01 '20 at 16:01

166

Yep, it's a small mistake.

if(this.items.indexOf(item) === -1) {
    this.items.push(item);
    console.log(this.items);
}

edited Apr 01 '20 at 16:01

radbyx

9,352
21
84
127

answered Apr 19 '16 at 13:14

Jagdish Idhate

7,513
9
35
51

@jagsSparrow Can you help explaning how `indexOf` help to find unique also? – Anshul Riyal Sep 19 '19 at 07:31
1

@AnshulRiyal you can look https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates – Jagdish Idhate Sep 25 '19 at 10:20
1

The original mistake is that it checks for `> -1`, but `indexOf` returns -1 (which isn't greater than -1). – sirbrialliance Nov 08 '21 at 22:10
!this.items.includes(item) is simpler – Jeffery Tang Dec 04 '22 at 02:43

score 90 · Answer 2 · edited Jun 26 '20 at 20:00

90

You can use the Set structure from ES6 to make your code faster and more readable:

// Create Set
this.items = new Set();

add(item) {
    this.items.add(item);

    // Set to array
    console.log([...this.items]);
}

edited Jun 26 '20 at 20:00

Community

1
1

answered Jun 11 '18 at 07:57

Sergey Zhigalov

1,019
8
3

@Gags not true, work on all major recent browsers. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#Browser_compatibility – Abdul Rehman Nov 16 '18 at 07:50
3

As a heads up. If like me you use JSON.stringify in your code, adding Sets will cause issues without further updates. – John Duskin Jan 24 '19 at 16:48
2

I LOVE this. Had nearly forgotten about set. I'm going to be using this a lot, particularly nice in TypeScript. – Methodician Aug 27 '19 at 20:55
2

@JohnDuskin can you elaborate? Your comment might somehow suggest that using JSON.stringify in "your code", as in one scope?, with also using Set object, like even somewhere else in such scope/code? Or as more probable you mean using Set object as an argument to JSON.stringify. As in using them in one expression. [An issue described here](https://stackoverflow.com/questions/31190885/json-stringify-a-set) with solutions. – papo Apr 26 '21 at 15:44
3

@papo You're correct, on re-reading my comment it was a vague. You are correct in your interpretation, adding Sets to a JSON.stringify command causes issues (as per the issue you linked to) and the solution is that you need to convert it to an array. This can be more complex however if you are stringifying higher level objects that contain sets, so its something people should be aware of. – John Duskin Apr 27 '21 at 07:59

lachlan.p.jordan · Answer 3 · 2019-04-16T03:44:21.933

22

try .includes()

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

so something like

const array = [1, 3];
if (!array.includes(2))
    array.push(2);

note the browser compatibility at the bottom of the page, however.

edited Apr 16 '19 at 03:44

answered Apr 16 '19 at 03:15

lachlan.p.jordan

447
5
11

2

I think this is definitely more elegant than `.indexOf`. I never knew this existed before. – DarthCadeus Apr 16 '19 at 04:01

score 10 · Answer 4 · edited Apr 15 '20 at 21:27

10

Using Set

this.items = new Set();
this.items.add(1);
this.items.add(2);
this.items.add(1);
this.items.add(2);

console.log(Array.from(this.items)); // [1, 2]

edited Apr 15 '20 at 21:27

GMaiolo

4,207
1
21
37

answered Apr 15 '20 at 14:38

Trilok Singh

1,227
12
10

score 9 · Answer 5 · edited Mar 18 '21 at 10:54

9

In case if you are looking for one liner

For primitives

(this.items.indexOf(item) === -1) && this.items.push(item);

For objects

this.items.findIndex((item: ItemType) => item.var === checkValue) === -1 && this.items.push(item);

edited Mar 18 '21 at 10:54

talha2k

24,937
4
62
81

answered Jun 24 '20 at 09:45

firoj_mujawar

301
4
14

2

you though missing the brackets '(' for the expression – ajin Sep 24 '20 at 13:55

score 8 · Answer 6 · edited Feb 04 '20 at 23:12

8

If you use Lodash, take a look at _.union function:

let items = [];
items = _.union([item], items)

edited Feb 04 '20 at 23:12

xinthose

3,213
3
40
59

answered Aug 16 '18 at 11:45

KitKit

8,549
12
56
82

score 7 · Answer 7 · answered Apr 19 '16 at 13:14

7

Your logic is saying, "if this item exists already, then add it." It should be the opposite of that.

Change it to...

if (this.items.indexOf(item) == -1) {
    this.items.push(item);
}

answered Apr 19 '16 at 13:14

ManoDestra

6,325
6
26
50

score 7 · Answer 8 · answered Apr 19 '16 at 14:30

7

I guess ES6 has set data structure, which you can use for unique entries

answered Apr 19 '16 at 14:30

Vivek Kumar

4,822
8
51
85

2

`Set()` yes, but I needed an array. – Tomek Buszewski Apr 19 '16 at 14:59
1

Set is also an array, store sequential data but only unique one not duplicate. – Vivek Kumar Apr 19 '16 at 16:52

score 3 · Answer 9 · edited Nov 04 '19 at 10:56

3

You have to use === -1, if it equals to -1 i.e. item is not available in your array:

  this.items = [];

  add(item) {
    if(this.items.indexOf(item) === -1) {
      this.items.push(item);
      console.log(this.items);
    }
  }

edited Nov 04 '19 at 10:56

Krishan Kant Sharma

363
3
12

answered Apr 19 '16 at 13:14

fdfey

587
2
11

score 2 · Answer 10 · answered Jun 23 '22 at 07:56

2

This can be achieved with single line of code.

this.items = this.items.includes(item) ? this.items : [...this.items, item];

answered Jun 23 '22 at 07:56

Jitendra Tyagi

173
1
6

score 2 · Answer 11 · answered Jul 31 '22 at 16:31

2

Simple as possible!

  let items = [];
  const addItem = (item) => {
    items = [...new Set([...items, item])]
  };

answered Jul 31 '22 at 16:31

Maged Mohamed

752
8
7

score 1 · Answer 12 · answered Nov 29 '18 at 19:57

1

var helper = {};
for(var i = 0; i < data.length; i++){
  helper[data[i]] = 1; // Fill object
}
var result = Object.keys(helper); // Unique items

answered Nov 29 '18 at 19:57

Martin Morawiec

21
1

score 1 · Answer 13 · answered Jan 09 '20 at 08:03

Push always unique value in array

ab = [
     {"id":"1","val":"value1"},
     {"id":"2","val":"value2"},
     {"id":"3","val":"value3"}
   ];



var clickId = [];
var list = JSON.parse(ab);
$.each(list, function(index, value){
    if(clickId.indexOf(value.id) < 0){
        clickId.push(value.id);
    }
});

score 0 · Answer 14 · answered Apr 19 '16 at 13:21

so not sure if this answers your question but the indexOf the items you are adding keep returning -1. Not to familiar with js but it appears the items do that because they are not in the array yet. I made a jsfiddle of a little modified code for you.

this.items = [];

add(1);
add(2);
add(3);

document.write("added items to array");
document.write("<br>");
function  add(item) {
        //document.write(this.items.indexOf(item));
    if(this.items.indexOf(item) <= -1) {

      this.items.push(item);
      //document.write("Hello World!");
    }
}

document.write("array is : " + this.items);

https://jsfiddle.net/jmpalmisano/Lnommkbw/2/

Bitfinicon · Answer 15 · 2022-03-23T15:51:20.517

Simple use new Set() with concat. The most performant mostly and updated:

console.log([...new Set(["hey", "we", "have", "array"].concat(["hey", "we", "add", "these", "too", "but without second hey, we, have :)"]))])

If you want to add elements in a case insensitive way, please do this for arrays;i.e:

["hey", "we", "HaVe", "ArrAy"].filter(r => r !== '').map(r => r.toUpperCase())

This will check whether empty element:

.filter(r => r !== '')

Will check case insensitive:

.map(r => r.toUpperCase()

Array.push() and unique items

15 Answers15

Linked