Introduction


While working with arrays, having to remove duplicate values is a common case. I introduce here 3 ways to do this.




Classic way


The idea here is to create an array, loop through the initial array and only insert in the new one the values that are not already here.



function uniqueArray1(arr) {
  const uniqueArray = [ ];
  for (let i=0; i < arr.length; i++) {
    if (uniqueArray.indexOf(arr[i]) === -1) {
      uniqueArray.push(arr[i]);
    }
  }
  return uniqueArray;
}




filter() way


We can also choose to use filter() method. The main advantage will be its concise syntax.


As a reminder, filter() is a method that creates and return a new array with all elements of the initial array that match a given callback. A simple use case of this method would be:



const animals = [‘cat’, ‘dog’, ‘fish’];
const filteredAnimals = animals.filter(animal => animal !== ‘dog’);
console.log(animals); // [‘cat’, ‘dog’, ‘fish’]
console.log(filteredAnimals); // [‘cat’, ‘fish’];


The callback can be called with 3 parameters: current value, current index, and initial array.



arr.filter(callback); // callback(currentValue, currentIndex, currentArray)


We can now define a function using filter() to remove duplicate values:



function uniqueArray2(arr) {
   return arr.filter((currentValue, currentIndex, currentArray) =>
    currentArray.indexOf(currentValue) === currentIndex);
}




Set way (ES2015)



The Set Object has been introduced in ES2015.


It helps us to store a set of elements, which are iterable in their insertion order. An interesting property of Set Object lies in the fact that a value can only be present once in a Set.


This way of removing duplicate values is even more concise than the previous one.



function uniqueArray3(arr) {
  return [...new Set(arr)];
}


We can also write it as follow:



function uniqueArray3(arr) {
 return Array.from(new Set(arr));
}



Conclusion


We have reviewed 3 ways of removing duplicate values of an array in JavaScript, a classic one and two more concise. The last one is only available in ES2015, so be careful with your app browsers requirements before using it.


I will analyze the performance of these 3 methods in a future post.



--------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------- Version française ---------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------



Introduction


En travaillant avec des tableaux, il arrive parfois d’avoir des valeurs en double, et de ne souhaiter conserver que les valeurs uniques. Je vous présente ici 3 façons d’y parvenir.




La méthode classique


Le principe est ici de créer un tableau et de n’y insérer que les éléments qui n’y sont pas déjà.




function uniqueArray1(arr) {
  const uniqueArray = [ ];
  for (let i=0; i < arr.length; i++) {
    if (uniqueArray.indexOf(arr[i]) === -1) {
      uniqueArray.push(arr[i]);
    }
  }
  return uniqueArray;
}




Avec la méthode filter() 


Nous pouvons également utiliser la méthode filter(), qui présente l’avantage d’être plus concise.


Pour rappel, filter() est une méthode qui crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition que nous définissons. Un cas d’application simple de cette fonction est par exemple :




const animals = [‘cat’, ‘dog’, ‘fish’];
const filteredAnimals = animals.filter(animal => animal !== ‘dog’);
console.log(animals); // [‘cat’, ‘dog’, ‘fish’]
console.log(filteredAnimals); // [‘cat’, ‘fish’];


La callback utilisée est appelée avec les 3 éléments suivants : la valeur courante, l’index courant, et le tableau lui-même.



arr.filter(callback); // callback(currentValue, currentIndex, currentArray)


Nous pouvons donc définir une fonction utilisant filter pour dédoublonner le tableau :




function uniqueArray2(arr) {
   return arr.filter((currentValue, currentIndex, currentArray) =>
    currentArray.indexOf(currentValue) === currentIndex);
}




Avec l’objet Set (ES2015)


L’objet Set a été introduit en JavaScript ES2015.


Il permet de stocker un ensemble d’éléments, itérables dans leur ordre d'insertion. Une propriété intéressante de l’objet Set réside dans le fait qu’une valeur donnée ne peut apparaître qu'une seule fois par Set, ce qui va nous permettre de dédoublonner notre tableau.


L’intérêt de cette méthode est d’être encore plus concise que la précédente.




function uniqueArray3(arr) {
  return [...new Set(arr)];
}


Nous pouvons également l’écrire de la façon suivante :




function uniqueArray3(arr) {
 return Array.from(new Set(arr));
}




Conclusion


Nous avons vu 3 méthodes pour dédoublonner les valeurs d’un tableau en JavaScript, une classique et deux autres plus concises. La dernière n’est disponible qu’en ES2015, il faudra donc vérifier les versions requises des navigateurs devant être compatibles avec votre application avant de l’utiliser.


J'analyserai les performances de chacune de ces 3 méthodes dans un prochain article.

"