Physical Address

Sagipora Sopore Baramulla 193201  Jammu & Kashmir

featured image

Convert Array to String in JavaScript – 4 Easy Methods

Convert array to string javascript in 4 simple methods. These 4 methods are…

Hello and welcome to Codipher. Today in this article we will learn how to convert array to string in JavaScript. We will understand 4 easy methods to convert array to string in JavaScript. Also, we will use the real-world usage of these methods. So without wasting further time. Let’s get started with the first method.

convert array to string javascript
convert array to string in javascript

How to convert array to string in JavaScript

1. Using The toString() Method

Using the toString() method on any array (i.e Array.toString() ) will return the string representation of the array elements.

Syntax

Array.toString()

This method does not accept any parameter. This method returns a string with all the array values and these are separated by commas.

Also Read: JavaScript Higher Order Functions Explained

  • have an empty string representation such that they will be converted to an empty string.
  • Also the toString() method does not change the original array.

2. Using The Array.join() Method

The array.join() method combines all the elements of an array into a string and returns that string. The elements of the resultant string will be separated by a specified separator.

Syntax

Array.join(separator)

This method accepts a single parameter. That parameter is a ‘separator’. The default value of this separator is comma.

What is a Separator

The separator is a string that separates each pair of adjacent elements of the array in the resultant string.

This method returns a string with all the array values, separated by the specified separator.

Also Read: Latest JavaScript Features Every Web Developer Should Know

Example

let fruits = ['apple', 'mango', 'banana', 'orange']

console.log(fruits.join(" ")) //output- apple mango banana orange

console.log(fruits.join(";")) //output- apple;mango;banana;orange

console.log(fruits.join()) //output- apple,mango,banana,orange

This method will not change the original array.

3. Coercing The Array To A String

We can take advantage of the type coercion in JavaScript. We know that the + operator adds two numbers or concatenates two strings. But what happens, if we join an array with something other than the + operator.

Since JavaScript is a loosely typed language so it isn’t going to crash our program. Instead, it does know how to concatenate strings, it will convert everything into a string.

Example

let fruits = ['apple', 'mango', 'banana', 'orange']

console.log(fruits + "") //output- apple,mango,banana,orange

console.log(fruits + []) //output- apple,mango,banana,orange

4. Using The JSON.stringify() Method

What if we have a nested array. Such that array of arrays. The past 3 methods won’t work as expected on nested arrays, here you will need to use JSON.stringify() method.

The JSON.stringify() method converts a JavaScript object or any value to a string.

Also Read: Speed Up Your Website With These Simple CSS Tips

Example

let fruits = ['apple', 'mango', 'banana', 'orange']

let nestedFruits = ['apple', ['mango'], 'banana', 'orange']

console.log(JSON.stringify(fruits)) //output- ["apple, "mango", "banana", "orange"]

console.log(JSON.stringify(nestedFruits)) //output- ["apple, ["mango"], "banana", "orange"]

How to empty an array in javascript

There are 3 ways through which we can empty an array in javascript. Let’s see these 3 ways.

1. Setting length property to 0 (zero)

When setting array.length to 0, all the elements of the array will get removed.

let arr = [1, 2, 3, 4, 5]

arr.length = 0

console.log(arr) //output- []

NOTE- This method mutates the original reference. It means if you will assign one array reference to another with assignment operator (=). Applying this method on one array will clean the other one two.

2. Assignment to a new empty array

This is the fastest way. This will set arr to a new empty array. This is perfect if you don’t have any references from other places to the original arr.

If you do, those references won’t be updated and those places will continue to use the old array.

let arr = [1, 2, 3, 4, 5]

arr = []

console.log(arr) //output- []

3. Using splice() method

You can use the splice() method to remove all the elements from an array.

let arr = [1, 2, 3, 4, 5]

arr.splice(0, arr.length)

console.log(arr) //output- []

In the splice() method the first argument is the index of an array to start removing an item from.

The second argument is the number of elements that you want to remove from the index element.

Javascript methods you should know

1. toString

The toString method returns a string representing the source code of the function.

function sum(a, b) {
  return a + b
}

console.log(sum.toString())
//expected output: "function sum(a, b) {
//                     return a + b
//                  }

console.log(Math.abs.toString())
//expected output: "function abs() { [native code] }"

2. Push

Push method adds one or more elements to the end of an array.

const animals = ['pigs', 'goats', 'sheep']

const count = animals.push('cows')
console.log(count)
//expected output: 4
console.log(animals)
//expected output: Array ['pigs', 'goats', 'sheep', 'cows']

animals.push('chickens', 'cats', 'dogs')
console.log(animals)
//expected output: Array ['pigs', 'goats', 'sheep', 'cows', 'chickens', 'cats', 'dogs']

3. Pop

The pop method changes the length of the array. It removes the last element and returns that element.

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']
console.log(plants.pop())
//expected output: 'tomato'

console.log(plants)
//expected output: Array ['broccoli', 'cauliflower', 'cabbage', 'kale']

plants.pop()
console.log(plants)
//expected output: ['broccoli', 'cauliflower', 'cabbage']

4. Reverse

The reverse method reverses an array in place. The first array element becomes the last, and the last becomes the first.

const array1 = ['one', 'two', 'three']
console.log('array1:', array1)
//expected output: 'array1:" Array ["one", "two", "three"]

const reversed = array1.reverse()
console.log('reversed:', reversed)
//expected output: "reversed:" Array ["three", "two", "one"]

//careful reverse is destructive -- it changes the original array
console.log('array1:', array1)
//expected output: "array1:" Array ["three", "two", "one"]

5. indexOf

The indexOf method returns the index within the calling string object of the first occurrence of the specified value.

const str = 'Brawe new world'
console.log('Index of first w from start is ' + str.indexOf('w)) //logs- 8
console.log('Index of "new" from start is ' + str.indexOf('new')) //logs- 6

Also learn, How To Use JavaScript Date() Object, Fast and Easy

6. Search

The search method executes a search for a match between a regular expression and the string object.

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?'
//any character that is not a word character or whitespace
const regex = /[^\w\s]/g

console.log(paragraph.search(regex))
/expected output: 43

console.log(paragraph[paragraph.search(regex)])
//expected output: "."

7. Replace

The replace method returns a new string with some or all matches of a pattern replaced by a replacement.

let str = 'Twas the night before Xmas...'
let newstr = str.replace(/xmas/i, 'Christmas')
console.log(newstr) //Twas the night before Christmas

8. Join

Join method creates and returns a new string by concatenating all of the elements in an array, separated by commas or a specified separator string.

const elements = ['fire', 'air', 'water']

console.log(elements.join())
//expected output: "fire,air,water

console.log(elements.join(''))
//expected output l: "fireairwater"

console.log(elements.join('-'))
//expected output: "fire-air-water

That’s it for this post guys. These are the 4 simplest ways through which you can convert array to string in javascript. I hope you liked this article and learned something new from this article. Make sure to leave a comment below.

Also Read: Latest JavaScript Features Every Web Developer Should Know

For a detailed guide on above listed 4 methods please refer to the below pages:

Want more content like this Click Here

Newsletter Updates

Enter your email address below to subscribe to our newsletter

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Programming & Tech Digest
Programming and Tech innovations delivered straight to your inbox for free.