HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptTip

Initialize a JavaScript array with a given numeric range

Submitted by: @import:30-seconds-of-code··
0
Viewed 0 times
javascriptnumericarraywithrangeinitializegiven

Problem

Array initialization could be considered a fundamental JavaScript skill. Unfortunately, JavaScript lacks some of the built-in functionality that other languages have, such as Python's range() function. Let's dive into building a JavaScript equivalent.
> [!NOTE]
>
> All methods presented here will produce an array containing start (inclusive) but not end (exclusive) for consistency with Python's range() method. To include the end value, you will have to alter the length formula and the mapping function accordingly.
We can use Array.from() for the purpose of creating a new array. We need to know the length of the array beforehand, which can be calculated from the range of numbers we want to include.

Solution

const range = (end, start = 0, step = 1) =>
  Array.from(
    { length: Math.ceil((end - start) / step) },
    (_, i) => i * step + start
  );

range(5); // [0, 1, 2, 3, 4]
range(7, 3); // [3, 4, 5, 6]
range(9, 0, 2); // [0, 2, 4, 6, 8]


>
> All methods presented here will produce an array containing start (inclusive) but not end (exclusive) for consistency with Python's range() method. To include the end value, you will have to alter the length formula and the mapping function accordingly.
We can use Array.from() for the purpose of creating a new array. We need to know the length of the array beforehand, which can be calculated from the range of numbers we want to include.
The general formula for the length of the array is (end - start) / step.
All three values are supplied as function arguments. To make sure that the length is an integer, we will use Math.ceil() to round up the result.
If you want a reversed range, you might be tempted to use Array.prototype.reverse() on the result of the previous snippet. However, this is relatively inefficient, as it requires iterating over the entire array twice.

Code Snippets

const range = (end, start = 0, step = 1) =>
  Array.from(
    { length: Math.ceil((end - start) / step) },
    (_, i) => i * step + start
  );

range(5); // [0, 1, 2, 3, 4]
range(7, 3); // [3, 4, 5, 6]
range(9, 0, 2); // [0, 2, 4, 6, 8]
const rangeReverse = (end, start = 0, step = 1) =>
  Array.from(
    { length: Math.ceil((end - start) / step) },
    (_, i) => i * -step + end
  );

rangeReverse(5); // [5, 4, 3, 2, 1]
rangeReverse(7, 3); // [7, 6, 5, 4]
rangeReverse(9, 0, 2); // [9, 7, 5, 3, 1]
const range = (start, end, step) => {
  if (end === undefined) [end, start] = [start, 0];
  if (step === undefined) step = start < end ? 1 : -1;

  return Array.from(
    { length:  Math.ceil((end - start) / step) },
    (_, i) => i * step + start
  );
};

// Positive step value
range(5); // [0, 1, 2, 3, 4]
range(3, 7); // [3, 4, 5, 6]
range(0, 9, 2); // [0, 2, 4, 6, 8]

// Negative step value
range(5, 0, -1); // [5, 4, 3, 2, 1]
range(7, 3); // [7, 6, 5, 4]
range(9, 0, -2); // [9, 7, 5, 3, 1]

Context

From 30-seconds-of-code: initialize-array-with-range

Revisions (0)

No revisions yet.