How to Convert String Array to Integer Array? [5 Easy Methods]

In JavaScript, there are many ways to convert a string array into an integer array. In this article, I will guide you through five different methods in a simple, step-by-step manner.

The first two methods I mentioned in this article are easy to implement and ideal for new developers.

1. Using `map()` Method

const stringArray = ["1", "2", "3"];
const intArray = stringArray.map(Number);
console.log(intArray); // Output: [1, 2, 3]

The simplest approach you can use with just one of the codes is the map method.

Use the map method on the array variable to apply the Number constructor to each element in stringArray.

The Number constructor will then convert each string into its corresponding number.

2. Using `forEach()` Loop

const stringArray = ["1", "2", "3"];
const intArray = [];
stringArray.forEach(num => intArray.push(parseInt(num, 10)));
console.log(intArray); // Output: [1, 2, 3]

We can also use the parseInt function to convert a string array to an integer array.

First, create an empty array and assign it to a variable of your choice.

const stringArray = ["1", "2", "3"];
const intArray = []; //create empty variable

To make this function work properly you need also to use forEach method.

Now, use the `forEach` method to convert the items, which will allow us to apply the `parseInt` function to each element of the array.

const stringArray = ["1", "2", "3"];
const intArray = [];
stringArray.forEach() //use the `forEach` method

Push each item into the new array, ensuring you first pass it through the `parseInt` function to convert the string to an integer.

const stringArray = ["1", "2", "3"];
const intArray = [];
stringArray.forEach(num => intArray.push(parseInt(num, 10))) //Push items into the new array, passing them through `parseInt` first.

Now this code will convert a string array to a number array.

3. Using a `for` Loop

const stringArray = ["1", "2", "3"];
const intArray = [];
for (let i = 0; i < stringArray.length; i++) {
    intArray[i] = parseInt(stringArray[i], 10);
}
console.log(intArray); // Output: [1, 2, 3]

This method functions similarly to the second method, the main difference is that it uses a for loop instead of the forEach method.

Create a standard for loop that iterates through the array using its length property to determine how many times to run.

const stringArray = ["1", "2", "3"];
const intArray = [];

for (let i = 0; i < stringArray.length; i++) { //Create `for` loop
   
}

Inside the loop, use the parseInt function to convert each string element to a number.

const stringArray = ["1", "2", "3"];
const intArray = [];
for (let i = 0; i < stringArray.length; i++) {
    intArray[i] = parseInt(stringArray[i], 10); //converting string array to interer
}

Now it is ready for use!

const stringArray = ["1", "2", "3"];
const intArray = [];
for (let i = 0; i < stringArray.length; i++) {
    intArray[i] = parseInt(stringArray[i], 10);
}
console.log(intArray); // Output: [1, 2, 3]

4. Using reduce() Method

const stringArray = ["1", "2", "3"];
const intArray = stringArray.reduce((acc, num) => {
    acc.push(parseInt(num, 10));
    return acc;
}, []);

console.log(intArray); // Output: [1, 2, 3]

Many people prefer using reduce() method.

The reduce() method is applied to the stringArray variable, which processes each element of the array and accumulates a result.

const stringArray = ["1", "2", "3"];
const intArray = stringArray.reduce();

The first parameter is a callback function that takes two arguments: acc (the accumulator) and num (the current element).

const stringArray = ["1", "2", "3"];
const intArray = stringArray.reduce((acc, num) => );

Inside the callback function of the reduce you need to add push method and parseInt function.

parseInt(num, 10) converts the current string num to an integer using base 10.

acc.push(...) adds the converted integer to the accumulator array acc.

return acc returns the updated accumulator for the next iteration.

Here is the final output:

const stringArray = ["1", "2", "3"];
const intArray = stringArray.reduce((acc, num) => {
    acc.push(parseInt(num, 10));
    return acc;
}, []);

console.log("Converted:",intArray)
// Output: "Converted: [1, 2, 3]"

5. Using the `Array.from()` Method

const stringArray = ["1", "2", "3"];
const intArray = Array.from(stringArray, num => parseInt(num, 10));
console.log(intArray); // Output: [1, 2, 3]

Using the Array.from() method we can easily convert a string array into a number array.

The Array.from() method helps us to create a new array from an array-like or iterable object.

This method takes two arguments:

• First is the source array (stringArray)
• Second is a mapping function that transforms each element.

The mapping function is num => parseInt(num, 10) is used to convert each string num to an integer using parseInt() with base 10.

Now the code is ready to use.

const stringArray = ["1", "2", "3"];
const intArray = Array.from(stringArray, num => parseInt(num, 10));
console.log(intArray); // Output: [1, 2, 3]

Conclusion

These are the five different methods I frequently use in my projects, and I hope this article is helpful to you as well!

Please share in the comments which method is your favorite, and if you have any additional methods, I'd love to hear about them!

Related Posts:

• How to Disable HTML Code without Deleting [3 Methods]
• How to Check If a Number is Even in JavaScript? [3 Methods]
• How to use Localstorage in Next.js 12 & 13 Above? 3 Method
• How to Make Horizontal Scroll using Next.JS and Framer-Motion?