Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to convert a number into an array in JavaScript?
In JavaScript, there are many built-in methods that can convert a number into an array. The simplest one is to the split() method. We can also use the map(), reduce(), or form() methods to perform the task. Some of the most popular methods for converting a number into an array are discussed in this article, along with examples of when and how to apply each technique.
Now, the question will be, why there can be a need to convert a number into an array? Then the reason could be splitting a phone number into its individual digits or breaking own a date into its component parts (Parsing a date), or it can be useful while performing mathematical operations on individual digits.
Method 1: By split() Method
Now, we will look at the split() method. It is a useful tool for breaking up strings into smaller substrings and converting them into numbers. Then, it can even transform numbers into arrays by converting them to strings and splitting them into individual digits. Let's see by implementing the split() function as shown in the example.
Example
In this example, we have used the function toString() to convert the integer to a string. The string was then separated into an array of individual characters using the split() function. The end output will be an array of strings, each representing one of the original number's digits.
<html>
<body>
<p id="print"></p>
<script>
let number = 12345;
let numberArray = number.toString().split("");
document.getElementById("print").innerHTML = numberArray;
</script>
</body>
</html>
Method 2: Using the map() Method
By using the map() method, a new array can be created that contains the output of performing a given function on each element in the calling array. By utilising the map() method to create a digit array, it can also be used to turn a number into an array. Here is an illustration of how to transform an integer into an array using the map() method −
Example
In this example, we first use the function toString() { [native code] }() method to transform the integer into a string. The string is then converted into an array using the Array.from() function. Finally, we turn the array of strings into an array of integers by using the map() method
<html>
<body>
<p id="print"></p>
<script>
let number = 12345;
let numberArray = Array.from(number.toString(), Number).map(Number);
document.getElementById("print").innerHTML =numberArray;
</script>
</body>
</html>
Method 3: Using a For Loop
This method is the simplest one, it uses a for loop to iterate over the number and convert it into an array of digits.
Example
In this example, we first convert the number to a string using the toString() method. Then we use a for loop to iterate over the number and use the parseInt method to convert the individual digits and push it into the array.
<html>
<body>
<p id="print"></p>
<script>
let number = 12345;
let numberArray = [];
for (let i = 0; i < number.toString().length; i++) {
numberArray.push(parseInt(number.toString()[i]));
}
document.getElementById("print").innerHTML = numberArray;
</script>
</body>
</html>
Method 4: Using the reduce() Method
The reduce() method is an array method that can be used to reduce the array to a single value. In this example, we'll use reduce() method to convert the number into an array of digits
Example
In this example, we first convert the number to a string using the `toString()` method. Then we use the `split()` method to split the string into an array of individual characters. Finally, we use the `reduce()` method to iterate over the array of characters, parse each character as integer and add it to the final array, which is the accumulator in this example.
<html>
<body>
<p id="print"></p>
<script>
let number = 12345;
let numberArray = number.toString().split('').reduce((acc, curr) => {
return [...acc, parseInt(curr)];
}, []);
document.getElementById("print").innerHTML=numberArray ;
</script>
</body>
</html>
Method 5: Using the Array.from() Method
Now, we will learn another way to convert or change a number into an array. So, here we will Array.from method(). What Array.from does is it generates a new array from an iterable or array-like object. We can use the Array.from() method to transform a string representation of a number into an array of individual digits in this case.
Example
Now, let’s see the code for the above method.
<html>
<body>
<p>Original number: 12345</p>
<p id="result"></p>
<script>
const num = 12345;
const arr = Array.from(num.toString(), Number);
document.getElementById("result").innerHTML = arr.join(", ");
</script>
</body>
</html>
Conclusion
In JavaScript, there are multiple methods for converting a number into an array, each with pros and cons. The Split()' method is the simplest, whereas the map()', 'for', and reduce()' methods are more capable and adaptable but call for more expertise. You can select the approach that best meets your needs based on the particular requirements of your project.
5K+ Views
To Continue Learning Please Login