Skip to main content

How to Split a Number into an Array of Digits in JavaScript

A common data manipulation task is to take a number (e.g., 1234) and split it into an array of its individual digits ([1, 2, 3, 4]). This is useful for various algorithms, calculations, or for displaying digits in separate UI elements.

This guide will demonstrate the modern and most concise method for this task using Array.from(). We will also cover the equally popular alternative using a split() and map() chain.

The Core Task: Converting a Number to an Iterable​

The main challenge is that a Number in JavaScript is not an "iterable" data type. You cannot loop over its digits directly. To solve this, you must first convert the number into a String, which is iterable.

Example of problem:

// Problem: How to get an array [1, 2, 3] from this number?
let myNumber = 123;
note

Both of the following solutions start by converting the number to a string.

The Array.from() static method is a powerful and flexible tool for creating a new array from an array-like or iterable object. It can also accept an optional map function as a second argument, allowing you to perform the entire conversion in a single, clean step.

function numberToDigits(num) {
  // 1. Convert the number to a string.
  let numString = String(num);
  
  // 2. Use Array.from() with the Number constructor as the mapping function.
  return Array.from(numString, Number);
}

// Example Usage:
let number = 12345;
let digits = numberToDigits(number);

console.log(digits);

Output:

[1, 2, 3, 4, 5]
note

This is the recommended best practice for its conciseness and readability.

An Alternative Method: String.split() and map()​

A very common and equally effective approach is to chain the split() and map() methods.

function numberToDigits(num) {
  return String(num)
    .split('')
    .map(Number);
}

// Example Usage:
let number = 12345;
let digits = numberToDigits(number);

console.log(digits);

Output:

[1, 2, 3, 4, 5]
note

This method is popular and easy to understand for developers who are very familiar with array method chaining.

How the Array.from() Method Works​

Let's break down the one-liner Array.from(String(number), Number).

  1. String(number): This is the first step in both methods. It converts the number 12345 into the string "12345".
  2. Array.from(iterable, mapFn):
    • The first argument is the iterable we want to convert to an array. In this case, it's the string "12345". Array.from will iterate over each character of the string.
    • The second argument, mapFn, is an optional mapping function that is called on each element before it is added to the new array. We pass the Number constructor directly as this function.
  3. The Number Constructor as a mapFn: Passing Number is a concise shorthand. For each character iterated by Array.from (e.g., '1', '2', etc.), it is effectively calling Number('1'), Number('2'), and so on. The return value of each call is what gets placed in the final array.

This is equivalent to the more verbose:

Array.from(String(12345), digitString => Number(digitString));

Conclusion​

Splitting a number into an array of its digits is a simple task that requires a two-step process: converting the number to a string, and then converting that string into an array of numbers.

  • The Array.from(String(num), Number) method is the recommended best practice. It is the most modern, concise, and readable solution.
  • The String(num).split('').map(Number) method is a very popular and equally valid alternative that uses a more explicit chain of operations.

Both methods are highly efficient and will serve you well. Choosing between them is often a matter of code style and personal preference.

Table of Contents