Example 1: Get Unique Values from an Array

Let’s say you have an array of objects that contains two properties: name and category. You want to get all unique categories from this array and turn it into an array of strings.

const items = [
  { name: 'apple', category: 'fruit' },
  { name: 'banana', category: 'fruit' },
  { name: 'carrot', category: 'vegetable' },
  { name: 'cherry', category: 'fruit' },
  { name: 'kiwi', category: 'fruit' },
  { name: 'broccoli', category: 'vegetable' },
  {nane: 'orange', category: 'fruit'}
  {name: 'chicken', category: 'meat'}
  {name: 'beef', category: 'meat'}
  {name: 'pork', category: 'meat'}

];
// Get all unique categories
const uniqueCategories = Array.from(new Set(items.map(item => item.category)));
// Output: ['fruit', 'vegetable', 'meat']
console.log(uniqueCategories);

The Array.from() method is used to create a new array from an iterable object. In this case, we’re creating a new array from the Set object that contains unique categories.

The map() method is used to iterate over the items array and extract the category property from each object.

The Set object automatically removes duplicate values, so we end up with a Set containing only unique categories.

Finally, we use Array.from() to convert the Set object back into an array of strings. The uniqueCategories array now contains all unique categories from the items array.

Example 2: Get Unique Values using the Spread Operator

If you prefer using the spread operator instead of the Set object, you can achieve the same result as follows:

const items = [

    { name: 'apple', category: 'fruit' },
    { name: 'banana', category: 'fruit' },
    { name: 'carrot', category: 'vegetable' },
    { name: 'cherry', category: 'fruit' },
    { name: 'kiwi', category: 'fruit' },
    { name: 'broccoli', category: 'vegetable' },
    {nane: 'orange', category: 'fruit'}
    {name: 'chicken', category: 'meat'}
    {name: 'beef', category: 'meat'}
    {name: 'pork', category: 'meat'}
    ];

const uniqueCategories = [...new Set(items.map(item => item.category))];
// Output: ['fruit', 'vegetable', 'meat']
console.log(uniqueCategories);

In this example, we use the spread operator (…) to create a new array from the Set object that contains unique categories.

The rest of the code is the same as in Example 1, where we use the map() method to extract the category property from each object in the items array.

The uniqueCategories array now contains all unique categories from the items array.

Conclusion

Getting unique values in JavaScript is a common task when working with arrays. By using the Set object and the Array.from() method, you can easily extract unique values from an array of objects or strings.

The spread operator (…) can also be used to achieve the same result as the Set object.

The examples provided in this article demonstrate how to achieve this in a simple and efficient way. I hope you found this article helpful and that you can apply this knowledge to your own JavaScript projects.