Create JavaScript array of random elements with given length

Updated: March 10, 2023 By: Khue Post a comment

This succinct, example-based article will walk you through a couple of different approaches to generating a JavaScript array of random elements with a given length. Without any further tedious talking, let’s roll up our sleeves and begin.

Using a for loop

In the following example, we will create an array of random numbers with a desired length. The process will look like this:

  1. Create an empty array to store the random elements.
  2. Use a loop to iterate from 0 to the desired length of the array.
  3. Inside the loop, use the Math.random() method to generate a random number between 0 and 1. Optionally, you can multiply or add some value to the random number to change its range or offset.
  4. Use the array.push() method to append the random number to the end of the array.
  5. Print the array (you can return it if you like).

The code:

// Create an empty array
let array = [];

// the desired length of the array
let length = 10

// Loop from 0 to 9
for (let i = 0; i < length; i++) {
  // Generate a random number between 1 and 100
  let randomNumber = Math.floor(Math.random() * 100) + 1;

  // Append it to the array
  array.push(randomNumber);
}

// Return or print the array
console.log(array);

Output:

[13, 79, 51, 29, 45, 12, 95, 71, 53, 68]

Due to the randomness, the result will not be the same when you re-execute the code.

Using Array.from() method

You can use the Array.from() method to create an array from an iterable object, such as a string or a generator function. You can pass a second argument to this method, which is a mapping function that applies to each element of the array.

In the example below, we will create an array whose elements are random characters from a to z with a length of 12:

// Define a string that contains all letters
let string = 'abcdefghijklmnopqrstuvwxyz';

// Use Array.from() to create an array of 10 random letters
let array = Array.from({length: 12}, () => {
  
  // Generate a random index between 0 and 25
  let randomIndex = Math.floor(Math.random() * 26);
  
  // Get the letter at that index and return it as the element value
  return string.charAt(randomIndex);
});

// Return or print the array
console.log(array);

Output:

['y', 's', 'y', 'c', 'v', 'p', 'u', 'j', 'c', 'l', 'n', 'd']

You can get a different result from mine. It’s totally fine.

See also: Generating Random Strings in JavaScript

Using the Array.fill() method

You can use the Array.fill() method to fill an array with a static value or a function that returns a value. This method takes 3 arguments: the value or function to fill with, the start index (optional), and the end index (optional).

In the example below, we’ll use this method to create an array of length N and fill it with random dates:

// This function returns a random date between two dates
const randomDate = (start, end) => {
  // Get timestamps for start and end dates
  let startTimestamp = start.getTime();
  let endTimestamp = end.getTime();

  // Generate a random timestamp between them
  let randomTimestamp =
    startTimestamp + Math.random() * (endTimestamp - startTimestamp);

  // Create and return a new date object with that timestamp
  const date = new Date(randomTimestamp);

  // Return date in format: "mm/dd/yyyy hh:mm:ss"
  return date.toLocaleString();
};

// Define start and end dates
let startDate = new Date(2000, 0, 1);
let endDate = new Date(2025, 11, 31);

// Delare N - number of elements in your array
let N = 5;

// Create an array of N elements and fill it with random dates
let array = Array(N)
  .fill()
  .map(() => randomDate(startDate, endDate));

// Return or print your array
console.log(array);

Output:

[
 '2/5/2017, 4:05:45 PM', 
 '2/7/2019, 10:55:43 AM', 
 '3/19/2013, 4:15:25 AM', 
 '2/2/2016, 6:14:11 PM', 
 '12/8/2013, 1:07:37 AM'
]

See also: Ways to Shuffle an Array in JavaScript

Final Words

You’ve learned a few methods to generate random arrays in JavaScript. This will be very helpful when testing, prototyping, and trying new ideas.

If you find errors or anachronisms in the code examples, please let us know by leaving comments. We will review and update them as soon as possible.