A Guide to Convert Strings to Arrays and Vice Versa in JavaScript

Introduction:

This article will show you some pieces of information on how to convert array items to string value and string to javascript array. But first let’s learn about strings and arrays.

What is a String?

A string is a sequence of characters that can be used to represent text. A string is created by enclosing the text in either single or double quotes, see the following three strings:

“Hello world!”, “Nerd Level Tech“ and mixed types of data type “Nerd Level 1 2 3”

"Hello world!"
“Nerd Level Tech“
"Nerd Level 1 2 3"

What is an Array?

An array is a data structure that stores a collection of data items in one place.

Arrays are very useful when you have to store a lot of related information. They can store an infinite number of items in their memory and provide fast access to any item in the list.

An array is made up of two pillars: the index and the values.

const myArray = ["Nerd", "Level", "Tech"]
const myMixArray = [ 'Nerd', 'Level', 'Tech', 123, 'xyz' ]

How to Convert Strings into Arrays in JavaScript

We will check different methods and ways of converting the strings to arrays.

• The string.split() method splits a string into an array using the specified delimiter, which can be a regular expression, any string or even space. The split() method splits on the specified separator or character and returns an array of strings from the result.

let myString = "Nerd, Level, Tech";
const mySplitString = myString.split(" ") //Notice the space in between the value in split method
console.log(mySplitString)
// Output
// [ 'Nerd,', 'Level,', 'Tech' ]

• The Array.from() method creates a copy of the original object and lets you change it without affecting the original string.

const  myArrayFrom = Array.from(myString)
console.log(myArrayFrom)
// Output
// [
  'N', 'e', 'r', 'd', ',',
  ' ', 'L', 'e', 'v', 'e',
  'l', ',', ' ', 'T', 'e',
  'c', 'h'
]

• Object.assign() is a built-in method that copies the values of all enumerable own properties from one or more source objects to a target object. It returns the target object, the target in that case is the array:

const myObjectAssign = Object.assign([], myString)
console.log(myObjectAssign)
// Output
// [
  'N', 'e', 'r', 'd', ',',
  ' ', 'L', 'e', 'v', 'e',
  'l', ',', ' ', 'T', 'e',
  'c', 'h'
]

How to Convert Arrays into Strings in JavaScript

• The join() method is used to concatenate all the elements in an array into a string and return it. This method can use a condition character, delimiter, or separator between each element in the array to build all the array elements into one single string such as in the following example.

// If no separator defined then joined with commas and no spaces
console.log(joinNerdsArray.join());      
// Output
// Nerd,Level,Tech

// If the separator is comma and space, then separating the words with commas and space after.
console.log(joinNerdsArray.join(", "));
// Output
// Nerd, Level, Tech

// If the separator is space, plus sign, space then adding plus sign and space in between words.
console.log(joinNerdsArray.join(" + "));
// output
// Nerd + Level + Tech

// If separator is an empty string, then return the value in one line with no delimiters.
console.log(joinNerdsArray.join(""));
// output
// NerdLevelTech

• Here we use the toString() method. You only need to call this method after the object you wanted to be converted into a string.

console.log(joinNerdsArray.toString())
// Output
// Nerd,Level,Tech

Conclusion (Conversion of Arrays and Strings)

In conclusion, arrays are a special type of object in JavaScript. The conversion can happen between arrays and strings in both ways as per the above methods.