Few ways to convert Array to String in Javascript

There are few ways you can convert an array to a string: with or without a separator, with custom logic, or as a string literal.

Some of them are:

1. Using array.toString().

2. Using array.join().

3. Using loops.

4. Using array.reduce().

5. Using JSON.stringify().

1. Using array.toString()

This method joins each element in the array with a comma:

const myArray = ['a', 'b', 'c']
console.log(myArray.toString()) // 'a,b,c'

2. Using array.join()

Unlike the array.toString() method, you can use the array.join() method to convert the array into a string with or without commas. It accepts one argument:

myArray.join(separator?)

You can use the separator argument to specify a string to separate each element. This argument is optional. If you don't specify the separator argument, it will join the elements with a comma.

const myArray = ['a', 'b', 'c']
console.log(myArray.join()) // 'a,b,c'
console.log(myArray.join('')) // 'abc'
console.log(myArray.join(' ')) // 'a b c'
console.log(myArray.join('_')) // 'a_b_c'

3. Using loops

The array.toString() and array.join() methods work well, but aren't suitable for custom logic. Let's say that you need to only add a separator after a certain value in the array. In this case the first two methods won't work. Instead, you can use a loop to define custom logic:

const myArray = ['a', 'b', 'c', 'c', 'b', 'a', 'd']
let myString = ''for (let i = 0; i < myArray.length; i++) {
  const separator = ';'
  const element = myArray[i];  if (element === 'b') {
    myString += (element + separator)
  } else {
    myString += element
  }
}
console.log(myString) // 'ab;ccb;ad'

Here, we are looping through the elements in the array using a for loop. We check to see if the element is equal to 'b'. If it is, we append that element with a separator. Otherwise we append the element without the separator.

4. Using array.reduce()

You can also use the array.reduce() method for joining with custom logic. The previous example with a for loop can be rewritten like this:

const myArray = ['a', 'b', 'c', 'c', 'b', 'a', 'd']
const myString = myArray.reduce((stringAccumulator, currentElement) => {
  const separator = ';'  if (currentElement === 'b') {
    return stringAccumulator += (currentElement + separator)
  }  return stringAccumulator += currentElement
}, '')
console.log(myString) // 'ab;ccb;ad'

Here, we specify an empty string as the second argument to the array.reduce() function. This serves as the initial value for the stringAccumulator. The array.reduce() function loops through the elements in the array. For each element it returns the new value of the stringAccumulator. In our case, if the element is equal to 'b', we append the element to the stringAccumulator with the separator. Otherwise we append the element without the separator. Once it loops through all the elements, it returns the final value of the stringAccumulator.

5. Using JSON.stringify()

If you want to preserve the array structure and convert it to a string as-is, you can use the JSON.stringify() method:

const myArray = ['a', 'b', 'c']
console.log(JSON.stringify(myArray)) // "['a', 'b', 'c']"