Vanilla JS - Create an array with a range of numbers in a JavaScript
This tutorial includes some quick examples of how to generate a range of numbers (e.g. [0, 1, 2, ..., N]
) in an array in JavaScript.
The below examples include creating an array with ten numbers from zero to nine ([0, 1, 2, ..., 9]
), an array with the range one to ten ([1, 2, 3, ..., 10]
), an array with the range five to twenty ([5, 6, 7, ..., 20]
), and an array with the range zero to one hundred with a step size of ten ([0, 10, 20, ..., 100]
).
Here they are in action: (See on StackBlitz at https://stackblitz.com/edit/vanilla-js-create-array-with-range-of-numbers)
JavaScript Create Range Example Code
The code snippets use the following Vanilla JS tools to create a range of numbers in an array:
- the
Array()
function creates a new javascript array with a specified number of empty slots (e.g.Array(10)
creates the array[empty x 10]
). - the
Array.keys()
method returns a new iterator object with the key/index of each slot in an array (e.g.0, 1, 2, ..., N
). - the ES6 Spread Operator (
...
) expands/converts the keys iterator object into a list of elements that can be passed to a literal Array constructor ([elem1, elem2, ..., elemN]
). - the
Array.map()
function is used to create a new array with a modified range of numbers. - the
Math.floor()
function rounds a number down to the nearest integer, it's used in the last example to ensure a whole number is passed to theArray()
function regardless of the step size.
(function() {
// 0 to 9
const range = [...Array(10).keys()];
document.getElementById('rangeOne').innerHTML = JSON.stringify(range);
})();
(function() {
// 1 to 10
const start = 1;
const end = 10;
const range = [...Array(end - start + 1).keys()].map(x => x + start);
document.getElementById('rangeTwo').innerHTML = JSON.stringify(range);
})();
(function() {
// 5 to 20
const start = 5;
const end = 20;
const range = [...Array(end - start + 1).keys()].map(x => x + start);
document.getElementById('rangeThree').innerHTML = JSON.stringify(range);
})();
(function() {
// 0 to 100 step 10
const start = 0;
const end = 100;
const step = 10;
const arrayLength = Math.floor(((end - start) / step)) + 1;
const range = [...Array(arrayLength).keys()].map(x => (x * step) + start);
document.getElementById('rangeFour').innerHTML = JSON.stringify(range);
})();
More info on JavaScript functions used
For more info on the Vanilla JS functions and operator used in the example see the below links:
- Array function - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array
- Array keys function - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys
- ES6 spread operator - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
- Array map function - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
- Math floor function - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some Vanilla JS Help?
Search fiverr to find help quickly from experienced Vanilla JS developers.