javascript set array value

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Array.prototype.values()

Baseline widely available.

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016 .

• See full compatibility
• Report feedback

The values() method of Array instances returns a new array iterator object that iterates the value of each item in the array.

Return value

A new iterable iterator object .

Description

Array.prototype.values() is the default implementation of Array.prototype[@@iterator]() .

When used on sparse arrays , the values() method iterates empty slots as if they have the value undefined .

The values() method is generic . It only expects the this value to have a length property and integer-keyed properties.

Iteration using for...of loop

Because values() returns an iterable iterator, you can use a for...of loop to iterate it.

Iteration using next()

Because the return value is also an iterator, you can directly call its next() method.

Reusing the iterable

Warning: The array iterator object should be a one-time use object. Do not reuse it.

The iterable returned from values() is not reusable. When next().done = true or currentIndex > length , the for...of loop ends , and further iterating it has no effect.

If you use a break statement to end the iteration early, the iterator can resume from the current position when continuing to iterate it.

Mutations during iteration

There are no values stored in the array iterator object returned from values() ; instead, it stores the address of the array used in its creation, and reads the currently visited index on each iteration. Therefore, its iteration output depends on the value stored in that index at the time of stepping. If the values in the array changed, the array iterator object's values change too.

Iterating sparse arrays

values() will visit empty slots as if they are undefined .

Calling values() on non-array objects

The values() method reads the length property of this and then accesses each property whose key is a nonnegative integer less than length .

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Polyfill of Array.prototype.values in core-js
• Indexed collections guide
• Array.prototype.entries()
• Array.prototype.keys()
• Array.prototype[@@iterator]()
• TypedArray.prototype.values()
• Iteration protocols

JS Tutorial

Js versions, js functions, js html dom, js browser bom, js web apis, js vs jquery, js graphics, js examples, js references, javascript sets.

A JavaScript Set is a collection of unique values.

Each value can only occur once in a Set.

The values can be of any type, primitive values or objects.

How to Create a Set

You can create a JavaScript Set by:

• Passing an array to new Set()
• Create an empty set and use add() to add values

The new Set() Method

Pass an array to the new Set() constructor:

Create a Set and add values:

Create a Set and add variables:

The add() Method

If you add equal elements, only the first will be saved:

Advertisement

Listing the Elements

You can list all Set elements (values) with a for..of loop:

Sets are Objects

typeof returns object:

instanceof Set returns true:

Complete Set Reference

For a complete Set reference, go to our:

Complete JavaScript Set Reference .

The reference contains descriptions and examples of all Set properties and methods.

Browser Support

Set is an ES6 feature (JavaScript 2015).

ES6 is fully supported in all modern browsers since June 2017:

Set is not supported in Internet Explorer.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Object.keys, values, entries

Let’s step away from the individual data structures and talk about the iterations over them.

In the previous chapter we saw methods map.keys() , map.values() , map.entries() .

These methods are generic, there is a common agreement to use them for data structures. If we ever create a data structure of our own, we should implement them too.

They are supported for:

Plain objects also support similar methods, but the syntax is a bit different.

For plain objects, the following methods are available:

• Object.keys(obj) – returns an array of keys.
• Object.values(obj) – returns an array of values.
• Object.entries(obj) – returns an array of [key, value] pairs.

Please note the distinctions (compared to map for example):

The first difference is that we have to call Object.keys(obj) , and not obj.keys() .

Why so? The main reason is flexibility. Remember, objects are a base of all complex structures in JavaScript. So we may have an object of our own like data that implements its own data.values() method. And we still can call Object.values(data) on it.

The second difference is that Object.* methods return “real” array objects, not just an iterable. That’s mainly for historical reasons.

For instance:

• Object.keys(user) = ["name", "age"]
• Object.values(user) = ["John", 30]
• Object.entries(user) = [ ["name","John"], ["age",30] ]

Here’s an example of using Object.values to loop over property values:

Just like a for..in loop, these methods ignore properties that use Symbol(...) as keys.

Usually that’s convenient. But if we want symbolic keys too, then there’s a separate method Object.getOwnPropertySymbols that returns an array of only symbolic keys. Also, there exist a method Reflect.ownKeys(obj) that returns all keys.

Transforming objects

Objects lack many methods that exist for arrays, e.g. map , filter and others.

If we’d like to apply them, then we can use Object.entries followed by Object.fromEntries :

• Use Object.entries(obj) to get an array of key/value pairs from obj .
• Use array methods on that array, e.g. map , to transform these key/value pairs.
• Use Object.fromEntries(array) on the resulting array to turn it back into an object.

For example, we have an object with prices, and would like to double them:

It may look difficult at first sight, but becomes easy to understand after you use it once or twice. We can make powerful chains of transforms this way.

Sum the properties

There is a salaries object with arbitrary number of salaries.

Write the function sumSalaries(salaries) that returns the sum of all salaries using Object.values and the for..of loop.

If salaries is empty, then the result must be 0 .

Open a sandbox with tests.

Or, optionally, we could also get the sum using Object.values and reduce :

Open the solution with tests in a sandbox.

Count properties

Write a function count(obj) that returns the number of properties in the object:

Try to make the code as short as possible.

P.S. Ignore symbolic properties, count only “regular” ones.

• If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
• If you can't understand something in the article – please elaborate.
• To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more than 10 lines – use a sandbox ( plnkr , jsbin , codepen …)

Lesson navigation

• © 2007—2024  Ilya Kantor
• about the project
• terms of usage
• privacy policy

DEV Community

Posted on May 8, 2018

How to create an array of unique values in JavaScript using Sets

Sorry for the verbose title - sometimes things can be explained better with a code example.

Imagine you have a JavaScript array that contains many elements, some of which are duplicated:

Your goal is to remove the duplicates and leave only one entry per value:

You might write a for-loop, or use a map or filter to get this result. There are a million different ways to tackle a problem in computer programming (which is what makes it so fun!). ES6 introduces a bunch of new features, including Sets, which we can also use to solve this problem in one line of code.

Note: the element type could be strings, or a mixture of numbers and strings, but I'm using integers here because they are quicker to type!

What's a Set?

A Set is a new data structure introduced in ES6. Quoting directly from MDN :

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

The rule for unique values is one we can use to our advantage here.

Let's create a Set, add some values to it and query the size. (You can follow along in the developer tools console of a modern browser):

Notice how the final 1 wasn't added and the size of the Set remained at 3 instead of 4. In an array, it would have been added and the length would be 4.

There are two ways to add values to a Set. Firstly by using the add method as above. Secondly by passing an array to the constructor ( new Set() ):

Duplicated values are also removed if they are included in the initial array:

You can probably see where this is going. All that’s left to do is to convert this Set into an array and we’ve achieved our original goal. There are two ways to do this: both using ES6 methods.

Array.from()

The Array.from method creates a new array from an array-like structure:

Spread operator ...

Those three dots are ubiquitous in ES6. They crop up everywhere and have several uses (and they're a right pain to google). When we use them as the spread operator they can be used to create an array:

Which of these two methods should you use? The spread syntax looks cool, but Array.from is more explicit in its purpose and easier to read. They both accomplish the same thing here so the choice is yours!

Something that would have took many lines of code and variables can now be executed in a one-liner in ES6. What a time to be alive.

Top comments (14)

Templates let you quickly answer FAQs or store snippets for re-use.

• Location San Francisco
• Education MIT
• Work Software Engineer/Co-founder at Moesif
• Joined Feb 6, 2018

Good highlight this feature.

However, it maybe worth pointing out that with Set, you can't control the equality operator.

It uses '===', which only work only off same actual object or same value for a primitive.

Which limits the usage somewhat compares to other methods such as map or filter.

• Joined May 20, 2018

If you find yourself needing to push unique items to an existing array that was declared with const (i.e., you cannot use new Set() ), then here are two patterns you can use:

Method 1 is about 30% faster in my Chrome: jsbench.me/jzlhpp4thr/1

• Joined Aug 31, 2017

I will implement this right away in a project I am working on. Although I like the Array.from() better, since it's easier to read. I like easy-to-read code :) Thank you for sharing!

• Location Uttarakhand, India
• Education Graduated - B.COM
• Work Web Developer
• Joined Apr 13, 2018

I used to filter and map over an array to remove duplicates. Thanks for sharing this method, Mam.

• Email [email protected]
• Location Inner Earth
• Education School of Life
• Joined Sep 30, 2017

@claireparker I have been hanging around in this neighborhood for little over a year now and appreciated a lot of quality content from many different sources but this is the first time I am Googling something and it leads to finding the answer here on this website.

You have a new follower.

• Joined Aug 11, 2017

Is there any difference in performance between Array.from and using the spread operator?

• Joined Aug 18, 2018

"They both accomplish the same thing here so the choice is yours!"

So i dont know if there is some missunderstanding here but as far as i see it they dont work the same as in my case using the spread operator returns

[Set(7)] 0: Set(7) {"anthropological", "security", "surveillance", "technology", "biology", …}

while using Array.from returns

(7) ["anthropological", "security", "surveillance", "technology", "biology", "extra-algorithmic experience", "randomness"]

• Location Brazil
• Work Student at Prefeitura Municipal de Belo Horizonte
• Joined Oct 9, 2019

"They both accomplish the same thing here so the choice is yours!" Well, actually she refers to the spread operator ('...') and Array.from . In both cases you still have to use new Set .

• Location Northwest Ohio
• Joined Jun 23, 2017

Great article and explanations! Thank you for your awesome insight and clear examples!

• Work Technical Lead At A SaaS startup
• Joined Aug 8, 2017

What if the elements are deep objects themselves rather than just basic elements like integers and alphabets.

• Joined Aug 20, 2017

We will read about it in your post, right? :)

• Joined May 24, 2017

Great tip. Thanks

• Location India
• Education Computer science
• Joined Apr 5, 2018

I have posted a similar thing

How to remove Duplicate elements from the Array

Sai gowtham.

• Location Canada
• Education Life
• Work Scalable Web Apps, Mentorship.
• Joined Mar 15, 2022

// ES5: Object.keys([1,1,2,2,3,4].reduce((prev,val)=>(prev[val]=1,prev),{})) // ['1', '2', '3', '4']

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Building a Better RAG: A Practical Guide to Two-Step Retrieval with LangChain

ahgsql - Apr 22

Lighthouse Performance Tips & Tricks for Your Website

Ciprian Popescu - Apr 22

Official Nuxt Certification Arrives! Early Bird pre-orders are open.

Ana Marija Majkic - Apr 23

Upload and Delete file from Amazon S3 Bucket in Go using Presigned URLs

sha254 - Apr 22

We're a place where coders share, stay up-to-date and grow their careers.

• Web Development

How to Add Array Values to an Existing JavaScript Set?

• Daniyal Hamid
• 27 Sep, 2021

You can add elements of an array to an existing Set object in the following ways:

• Using a Loop ;
• Using the Set constructor .

Using a Loop

If you have an existing Set that you want to add array elements to, then you can simply loop over the array and add each element to the Set (using the Set.prototype.add() method), for example, like so:

You can of course, use any other loop to iterate over the array as you want. Consider for example, as an alternative, using the for...of loop to do the same:

Using the Set Constructor

Passing an iterable (such as an array) to a Set constructor adds all its elements to the new Set . If you merge the existing Set and array together, then you can simply pass the result to the Set constructor, for example, like so:

This works because you can use iterable objects (such as Set , array, etc.) with the spread syntax.

This post was published 27 Sep, 2021 by Daniyal Hamid . Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post .

How to Initialize a Set with Values in JavaScript

Last updated: Mar 3, 2024 Reading time · 4 min

# Initialize a Set with Values in JavaScript

Pass an iterable to the Set() constructor to initialize a Set with values.

When an iterable is passed to the Set constructor, all elements of the iterable get added to the new Set .

The most commonly used iterables to initialize a Set are array, string and another Set .

We passed an array to the Set() constructor and all of the elements of the array got added to the Set , except for the duplicates.

You can convert an array to a Set by passing the array directly to the Set constructor.

If you need to use multiple arrays when initializing a Set , use the spread syntax (...).

We used the spread syntax to unpack the values of 2 arrays and used the array elements to initialize a Set with values.

You can also manually add values to the Set upon initialization.

The order in which the elements are unpacked is preserved in the Set object.

You can also iterate over an array and manually add each item to a new Set .

We used the Array.forEach() method to iterate over the array and used the Set.add() method to add each element of the array to the Set object.

# Initialize a Set with values from an array of objects

You can use the Array.map() method to initialize a Set with values from an array of objects.

The function we passed to the Array.map() method gets called with each element in the array.

On each iteration, we return the name property of the current object.

The map() method returns a new array containing the values returned from the callback function.

# Initializing a Set with Values using a String

You can also initialize a Set with a string.

The string gets split on each character and the characters are used to initialize the Set .

The l character is contained twice in the string, however, it is only contained a single time in the Set .

Note that the character has to be in the same case to be considered a duplicate.

The uppercase and lowercase t characters were added to the Set upon initialization.

# Initializing a Set with values using another Set

You can use the spread syntax (...) to unpack the values of an iterable in order to initialize a Set with values.

# Manually adding values to a Set object

An alternative approach is to create an empty Set and manually add values to it.

The Set.prototype.add() method inserts the specified value into the Set object if the value isn't already present in the Set .

This approach is useful when you need to iterate over a collection of items and conditionally add values to the Set or process the data in other ways before adding the values to the Set .

The for...of statement is used to loop over iterable objects like arrays, strings, Map , Set and NodeList objects and generators .

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Iterate over the Elements of a Set using JavaScript
• How to merge Sets using JavaScript
• How to Remove an Element from a Set using JavaScript
• How to sort a Set in JavaScript

Borislav Hadzhiev

Web Developer

Copyright © 2024 Borislav Hadzhiev

JavaScript Array Length – How to Find the Length of an Array in JS

JavaScript arrays are fundamental data structures that allow you to store and manipulate collections of elements efficiently.

While working with arrays, you'll often need to know their length. The length of an array tells us how many elements are present in the array. You can use this to check if an array is empty and, if not, iterate through the elements in it.

How to Find the Length of an Array

Using the <.length> property.

Javascript has a <.length> property that returns the size of an array as a number(integer).

Here's an example of how to use it:

In the above code, a variable with the name numbers stores an array of numbers, while the variable numberSize stores the number of elements present in the array by using the method .length . The number size is then printed using console.log – hence the output 4.

Let's now check to see what the data type of the length property is:

In the above code we see that the output is number .

Here's an example of how to access an array element with the length property in a for loop:

Without Using the .length() method

In this method, we will iterate through the elements and count each of the elements present in the array.

Here's how it works:

In the above code, there's a function named arrayLength that accepts the array as input. We created a variable called count that is assigned 0. The count variable will store the count of the number of elements in the array.

To count the elements in the array, we used a for-of loop to check each element in the array.

The code iterates over each element in the array until undefined is encountered. That is, we iterate over each element in the array until we reach the end of the array where there are no more elements to check. Finally we return count as the output.

We pass in the variable <numbers> as the input to the function in order to obtain the length of the array as the returned value.

The most common and straightforward method is to use the length property of the array. But you can also use a longer method by looping through the array. These methods allow you to work with arrays of different sizes and types.

If you have any questions, you can reach out to me on Twitter 💙.

Read more posts .

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter
• How to iterate over Set elements in JavaScript ?
• How to get the union of two sets in JavaScript ?
• How are elements ordered in a Set in JavaScript ?
• How to sort a set in JavaScript ?

How to Convert Array to Set in JavaScript?

• How to map, reduce and filter a Set element using JavaScript ?
• Difference between Set.clear() and Set.delete() Methods in JavaScript
• Set vs Map in JavaScript
• How to perform intersection of two sets in JavaScript ?
• Get the Difference between Two Sets using JavaScript

The goal is to transform a JavaScript Array into a Set using JavaScript’s built-in features. This process involves taking all the elements from the array and putting them into a Set, which is a data structure that only contains unique values. By doing this conversion, we can efficiently manage and operate on the array’s elements without worrying about duplicates

Below are the approaches to Converting Array to a Set in JavaScript:

Table of Content

• Using spread Operator
• Using the Set Constructor

Approach 1: Using spread Operator

• Take the JavaScript array into a variable.
• Use the new keyword to create a new set and pass the JavaScript array as its first and only argument.
• This will automatically create the set of the provided array.

Example 1: In this example, the array is converted into a set using the spread operator defined above. 

Example 2: In this example, the array is converted into a set using a bit approach than above. 

Approach 2: Using the Set Constructor

• Create a Set from the Array
• Convert Set back to an Array
• Output the result

Example: In this example we are using the set constructor .

Please Login to comment...

Similar reads.

• JavaScript-Questions
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?