Skip to main content

How to Convert a Set to a String in JavaScript

A Set is a collection of unique values, but you often need to convert it into a single string for display, logging, or serialization. For example, you might want to show the elements of a Set as a comma-separated list. The most direct and idiomatic way to achieve this is to first convert the Set to an Array and then use the .join() method.

This guide will teach you the modern, standard method for converting a Set to a string, using the spread syntax (...) and Array.prototype.join().

The Core Problem: Set Has No .join() Method​

The Set object in JavaScript does not have a native .join() method like an Array does. Therefore, you cannot directly join the elements of a Set.

Example of code with error:

const mySet = new Set(['apple', 'banana', 'cherry']);

// ⛔️ TypeError: mySet.join is not a function
const myString = mySet.join(', ');

To solve this, we must first convert the Set into an Array.

The most concise and readable way to convert a Set to an array is with the spread syntax (...). Once it's an array, you can call .join() on it.

The logic:

  1. Use the spread syntax ([...mySet]) to "unpack" the elements of the Set into a new array.
  2. Call the .join(separator) method on this new array.

This clean, one-line solution is the best practice.

const mySet = new Set(['apple', 'banana', 'cherry']);

// Step 1: Convert the Set to an array
const myArray = [...mySet];
console.log(myArray);   // Output: ['apple', 'banana', 'cherry']

// Step 2: Join the array into a string
const myString = myArray.join(', ');
console.log(myString);  // Output: "apple, banana, cherry"

// You can do it all in one line:
const oneLiner = [...mySet].join(', ');
console.log(oneLiner);  // Output: "apple, banana, cherry"
note

An alternative to the spread syntax is Array.from(mySet), which achieves the same result: Array.from(mySet).join(', ').

const mySet = new Set(['apple', 'banana', 'cherry']);

const oneLiner = Array.from(mySet).join(', ');
console.log(oneLiner); // Output: "apple, banana, cherry"

How to Handle Different Separators​

The join() method is very flexible and can accept any string as a separator.

const mySet = new Set(['apple', 'banana', 'cherry']);

// Join with a space
const spaceSeparated = [...mySet].join(' ');
console.log(spaceSeparated); // Output: "apple banana cherry"

// Join with no separator
const noSeparator = [...mySet].join('');
console.log(noSeparator); // Output: "applebananacherry"

// Join with a default comma (no argument)
const commaSeparated = [...mySet].join();
console.log(commaSeparated); // Output: "apple,banana,cherry"

Why This Method is the Best Practice​

While you could achieve the same result with a manual loop (like forEach), the spread + join method is superior.

The manual forEachmMethod is more verbose:

const mySet = new Set(['apple', 'banana', 'cherry']);
let myString = '';
let isFirst = true;

mySet.forEach(value => {
  if (!isFirst) {
    myString += ', '; // Add separator before each element except the first
  }
  myString += value;
  isFirst = false;
});

The [...mySet].join(', ') method is better because it is:

  • More Declarative: It clearly states the intent—to join the elements of the Set.
  • More Concise: It's a single, fluent line of code.
  • Less Error-Prone: It avoids the clumsy manual logic of handling the separator for the first or last element.

Conclusion​

For converting a Set to a string, the modern, two-step process is the definitive best practice.

  1. First, convert the Set to an Array using the spread syntax (...) or Array.from().
  2. Then, call the .join(separator) method on the resulting array.

This approach is clean, readable, and leverages JavaScript's built-in methods for an efficient and elegant solution.

Table of Contents