JavaScript

Convert Array of Starings to Array of Numbers in JavaScript

While handling the data in bulk, there can be a possibility of some garbage data in the form of unwanted characters or numbers. For instance, sorting the data based on data types. Also, in the case of decoding encoded data. In such situations, converting an array of strings into an array of numbers in JavaScript is of great aid in reducing the code complexity and utilizing the resources appropriately.

This blog will demonstrate the approaches to transform a string’s array into a number’s array using JavaScript.

How to Convert/Transform Array of Strings to Array of Numbers Using JavaScript?

To transform a string’s array into a number’s array using JavaScript, implement the below-stated approaches:

  • map()” method.
  • forEach()” and “push()” methods.
  • reduce()” and “concat()” methods.

Let’s demonstrate the stated methods one by one!

Approach 1: Convert/Transform Array of Strings to Array of Numbers Using JavaScript via map() Method

The “map()” method executes a function once for each array item without any change in the default array. This method can be applied to simply map the string values in the associated array into an array of numbers.

Syntax

array.map(func(currValue, index, array), value)

In the above-given syntax:

  • func” refers to the function that needs to be called for each item in an array.
  • The function parameters refer to the current value’s index in the specified array.
  • value” indicates the value that must be passed to the function.

Example
Let’s overview the following example:

<script type="text/javascript">
let strArray = ['10', '20', '30'];
console.log("The given array of strings is:", strArray)
let numArray = strArray.map(Number)
console.log("The array of numbers become:", numArray);
</script>
  • Declare an array of strings having the stated values and display it.
  • After that, apply the “map()” method having “Number” as its parameter, which will transform the associated array of strings into numbers.
  • Finally, display the array of strings converted into numbers.

Output

In this output, it can be seen that the string’s array is converted into numbers.

Approach 2: Convert/Transform Array of Strings to Array of Numbers in JavaScript Using forEach() and push() Methods

The “forEach()” method applies a function for each element in an array. The “push()” method is used to add an item in an array at the start. These methods combined can be implemented to iterate along the given string’s array, convert them into numbers and push them into an empty array.

Syntax

array.forEach(function(current, index, array), this)

Here:

  • function: It is the function that needs to be called for each element in an array.
  • current: This parameter signifies the current array value.
  • index: It points to the current element’s index.
  • array: It refers to the current array.
  • this: It corresponds to the value being passed to the function.
array.push(it1, it2)

In this syntax:

  • it1, and “it2” point to the items that need to be added to the array.

Example
Let’s go through the below-stated example:

<script type="text/javascript">
let strArray = ['20', '40', '60'];
console.log("The given array of strings is:", strArray)
let numArray = [];
strArray.forEach(string => {
 numArray.push(Number(string));
});
console.log("The array of numbers become:", numArray);
</script>

In the above lines of code:

  • Initialize the array consisting of the stated string values and display it.
  • Also, create an empty array named “numArr”.
  • In the next step, apply the “forEach()” method to iterate along the values of the associated array.
  • After that, the iterated values in the previous step will be converted into numbers via “Number”.
  • Now, the “push()” method will append the converted numbers into the allocated empty array, as discussed before.
  • Lastly, display the array appended with the numbers.

Output

The above output indicates that the desired requirement is fulfilled.

Approach 3: Convert/Transform Array of Strings to Array of Numbers in JavaScript Using reduce() and concat() Methods

The “reduce()” method calls a function for the elements in an array to give a reduced value, in return. The “concat()” method concatenates/merges multiple arrays or string values. The combination of these methods can iterate along the string’s array, concatenate the values so that they are converted into numbers, and then append them into a separate array.

Syntax

array.reduce(func(total, Value, Index, array), value)

In this particular syntax:

  • func” refers to the function that needs to be called for each array element.
  • The function arguments correspond to the current value’s index in the specified array.
  • value” corresponds to the value passed to the function.
array1.concat(string)

In the given syntax:

  • string” represents the string value that needs to be concatenated.

Example
The following example explains the stated concept:

<script type="text/javascript">
let strArray = ["15", "25", "35", "45"];
console.log("The given array of strings is:", strArray)
let numArray = strArray.reduce( (first, last ) => first.concat(+last), [])
console.log("The array of numbers become:", numArray);
</script>

In the above lines of code:

  • Declare the specified string’s array and display it.
  • In the next step, apply the “reduce()” and “concat()” methods as a combination.
  • This will resultantly iterate along the associated array and concatenate the array items such that they are transformed into numbers.
  • Now, the converted numbers in the previous step will be appended into a null array represented by “[ ]”.
  • Finally, display the array of appended numbers on the console.

Output

In this particular output, it can be seen that the allocated null array is filled with the numbers.

Conclusion

The “map()” method, the “forEach()” and “push()” methods, or the “reduce()” and “concat()” methods can be used to transform a string’s array to a number’s array in JavaScript. The map() method simply maps the associated array values into numbers. Whereas the other two approaches iterate along the given string’s array, convert them into numbers, and append the converted values into an allocated null array. This tutorial explained to transform a string into a number’s array in JavaScript.

About the author

Umar Hassan

I am a Front-End Web Developer. Being a technical author, I try to learn new things and adapt with them every day. I am passionate to write about evolving software tools and technologies and make it understandable for the end-user.