javascript create array number range

JavaScript Range – How to Create an Array of Numbers with .from() in JS ES6

The .from() method is a static method of the Array object in JavaScript ES6. It creates a new, shallow-copied Array instance from an array-like or iterable object like map and set .

This method returns an array from any object with a length property. You can use it to create an Array of numbers within a specified range.

In this article, you will learn what the .from() static method is all about, how it works, and how you can create a range of numbers in JavaScript.

In case you are in a rush, here is a method to help you get the range:

You can continue reading this short article to understand how it works.

How the .from() Method Works in JavaScript

The Array.from() method returns an array from any array-like or iterable object. The method takes in one compulsory parameter and two other optional parameters:

arraylike - An Array-like or iterable object to convert to an array.
mapFunc - This is an optional parameter. The Map function is called on each element.
thisArg - This value is used when executing mapFunc as this . It is also optional.

To see how this works, let’s create an array from a string using the Array.from() method:

In the example above, the Array.from() method returned an array of the string. You can also use the method to return an array from any object with a length property that specifies the number of elements in the object.

You can also introduce the map function that gets called for each element. For example, if you want to manipulate each array item by maybe multiplying each with a specific number:

Note: .from() is a static method, which is why it uses the Array class name. You can only use it as Array.from() and not myArray.from() , where myArray is an array. It will return undefined.

How to Create a Sequence of Numbers with the .from() Method

The Array.from() method makes it possible for you to create a sequence of numbers using the map function:

The above method creates an array of 7 elements which are by default initialized with undefined . But using the map function, the index value is now used instead of its actual value of undefined.

If you use its actual value, you will get an array of 7 elements (based on the length) with the value of undefined:

How to Create a Range of Numbers with the .from Method

You now know how to create an array with a sequence of numbers. But when you create a range, you want these numbers to start from a specified value and end at a specified value. For example, numbers within the range of 4 and 8 would be 4, 5, 6, 7, 8.

You can also specify if you want an array of odd or even numbers within a specified range. All these can be achieved with the Array.from() method.

In the above code, the length of the array-like object is defined by subtracting the last number from the first number in the range and dividing by the step plus one. This will give the exact number of elements in the array.

In the map function, the start number is added to the index of each element (remember, the value is always undefined) and multiplied by the step value. This map function runs for each element and helps calculate the value of each element.

Let’s try the method with a few examples:

Wrapping Up

In this article, you have learned how to create an array of numbers with the Array.from() method. You have also learned how the Array.from() method works.

Keep in mind that there are other options to create a range of numbers in JavaScript – we just focused on .from() in this tutorial.

Have fun coding!

Frontend Developer & Technical Writer

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

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] ).

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 the Array() function regardless of the step size.

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

Need Some Vanilla JS Help?

Search fiverr for freelance Vanilla JS developers.

Follow me for updates

On Twitter or RSS .

When I'm not coding...

Me and Tina are on a motorcycle adventure around Australia. Come along for the ride!

Create array of numbers in range JavaScript [SOLVED]

Introduction.

Unlike other programming languages like Python, JavaScript doesn’t have a built-in function that can create array of numbers within a range. Say, we want to have a series or sequence of numbers from 2 to 23, it will be counter-intuitive to write each number.

In JavaScript, we have a couple of ways to create array of numbers in range. In this article, we will discuss the different approaches to solving the problem.

Method-1: Use Array.from() method to create array of numbers in range

Array.from is another array factory method introduced in ES6. It expects an iterable or array-like object as its first argument and returns a new array that contains the elements of that object. With an iterable argument, Array.from(iterable) works like the spread operator [...iterable] does. It is also a simple way to make a copy of an array:

Array.from() also accepts an optional second argument. If you pass a function as the second argument, then as the new array is being built, each element from the source object will be passed to the function you specify, and the return value of the function will be stored in the array instead of the original value.

To create an array of numbers within a specific range in JavaScript, you can use the Array.from() method. Here's an example of how this can be done:

In the example above, we used the Array.from() method to create an array with a length of 10. This creates an array with 10 empty elements, which we then use the map() method to transform into an array of numbers from 1 to 10. The map() method takes a callback function as an argument, which is called for each element in the array.

In this case, we used an arrow function that takes two arguments: _ , which is a placeholder for the element, and i , which is the index of the element. We use the i argument to create the numbers, starting from 1 and incrementing by 1 for each element in the array.

It's important to note that the Array.from() method is only supported in modern browsers, so if you need to support older browsers, you may need to use a different approach.

Method-2: Use Array() method to create array of numbers in range

We can create a sequence of elements using the Array constructor. For example, you could create an array with a length of 10 using the new Array() constructor, and then use a for loop to populate the array with numbers from 2 to 11. Here's an example of how this could be done:

As you can see, creating an array of numbers within a specific range in JavaScript is a straightforward process that can be done using the Array.from() method along with the map() method, or using the new Array() constructor and a for loop. Either approach can be effective for creating an array of numbers within a specific range in JavaScript.

Array() constructor - JavaScript | MDN (mozilla.org) Array.from() - JavaScript | MDN (mozilla.org)

Olorunfemi Akinlua

He is boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains. You can connect with him on LinkedIn .

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

For any other feedbacks or questions you can send mail to [email protected]

Thank You for your support!!

Initialize a JavaScript array with a given numeric range

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.

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.

Initialize array with a numeric range

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.

Initialize array with a reversed numeric range

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 .

Instead, we can modify the mapping function of the previous snippet to produce the desired result, iterating over the given range in reverse. In order to do so, we will need to swap start for end and negate the step value.

Generalized range() function, matching Python's signature

Having two functions that serve slightly different purposes is not uncommon, but we can generalize the solution to infer the correct behavior based on the supplied arguments . For reverse ranges, we would simply supply a negative step value.

Another quality of life improvement would be to match Python's range() signatures. This would allow us to supply either (end) , (start, end) , or (start, end, step) as arguments. Notice the change in order of the first two arguments . In order to do so, we will have to ditch the default values for the arguments and use a conditional statement to check the number of supplied arguments .

More like this

JavaScript Array Initialization

Discover the inner workings of JavaScript arrays and learn about the different ways to initialize them.

The many ways to initialize a JavaScript Array

Initialize a JavaScript array with a sequence of generated values

Ever wanted to initialize an array with a sequence of generated values? Here's a few ways to do it.

How can I initialize 2D array in JavaScript?

Learn how to initialize a 2D array in JavaScript in a handful of different ways.

Start typing a keyphrase to see matching snippets.

Link to this heading Context

Sometimes, you want to render a sequence of numbers. For example, the pagination widget at the bottom of Google search results:

The bottom of Google search results, which shows the numbers 1 through 10 representing the pages of results

Perhaps even more commonly, you want to render something a handful of times. Maybe you want to generate 5 particles, or a bunch of background lines for a graph.

In React, this matter is complicated a bit, because we need an array we can map over. Essentially, I want to be able to do something like this:

I'm not able to use a for loop, since we need to render expressions within JSX.

This range utility gives me a concise, functional way to solve for these kinds of problems.

Link to this heading Usage

This utility can be used in several ways.

You can pass a single number, to generate a range from 0 through that number:

You can pass two numbers, to generate a range from start to finish:

Finally, you can pass a third "step" argument, if you want to change the gap between numbers:

You'll notice that the array produced is inclusive of the starting number, but exclusive of the ending number. range(10, 20) includes 10, but does not include 20. This is done intentionally, to match the behaviour of JavaScript methods like slice .

Link to this heading Explanation

Iterating from a start value to an end value, with a given step, is exactly the problem that for loops were designed to solve. Our range function is really just a thin wrapper around this common "vanilla" pattern!

One possibly surprising bit is this:

This check exists so that we can call range with a single value, like range(4) . Instead of being used as the start value, we're copying this value to end , and setting start to 0. This is a quality-of-life thing, to make it a small bit easier to use.

Create an Array containing 1 to N numbers in JavaScript

Last updated: Mar 1, 2024 Reading time · 4 min

# Create an Array containing 1 to N numbers using Array.from()

To create an array containing numbers from 1 to N:

Pass the desired length and a function to the Array.from() method.
The Array.from() method will return a new array containing the specified numbers.

The parameters we passed to the Array.from() method are:

How many elements the array should contain.
A function that gets called for each element in the array.

A call to Array.from(3) returns an array with 3 elements with the value of undefined .

We used the index of the array element in the function. Javascript indexes are zero-based, so we had to add 1 to get the desired result.

If you have to do this often, define a reusable function.

The function takes the desired size of the array and the start value as arguments and generates an array of values from start to N.

# Creating an array from 0 to N with the use of keys()

If you want to create an array from 0 to N, you can also use the Array() constructor.

create array from 0 to n using keys method

We used the Array() constructor to create an array of 8 empty elements.

The next step is to use the Array.keys() method to get an iterable of the keys (indexes) in the array.

The last step is to use the Array.from() method to convert the iterable to an array.

# Create an Array containing 1 to N numbers using the spread syntax (...)

An alternative to using the Array.from() method is to use the spread syntax (...).

create array containing 1 to n numbers using spread syntax

We used the spread syntax (...) to unpack the elements of the iterable into a new array.

We used the Array.keys() method, so the elements start at 0 .

To get an array starting at 1 , we had to use slice() to omit the first element from the result.

Alternatively, you can chain a call to the Array.map() method.

The function we passed to the Array.map() method gets called with each element of the array.

On each iteration, we increment the index by 1 and return the result.

If you want to start the array at 0 , use the Array.keys() method directly.

# Create an Array containing 1 to N numbers using a for loop

This is a three-step process:

Create an empty array that will hold the numbers.
Use a for loop to iterate N times, starting at 1 .
On each iteration, push the current index into the array.

We used a for loop to iterate N times, pushing the value of the i variable into the array.

# Create an Array containing 1 to N numbers using lodash

If you use the lodash library, you can also use the lodash.range() method to create an array from 1 to N.

If you need to install lodash , run the following command.

The lodash.range() method takes 3 arguments:

The start of the range. Defaults to 0 .
The end of the range.
An optional step value to increment by.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

Create an Array with N elements, same Value in JavaScript
Create an Object from Two Arrays in JavaScript

Borislav Hadzhiev

Web Developer

Generating a Range of Numbers in JavaScript

Have you ever wanted to generate a range of numbers in JavaScript from 0 to a specified bound?

Let's say you wanted an array containing numbers from 0 to 3. In other languages, you may be able to do something similar to the following:

Unfortunately, JavaScript does not natively support a similar construct. However, we can use can use a library like Lodash or write our own implementation. In this post, I will go over implementing it ourselves.

Keys and Spread

Let's dissect this.

Array(4) creates a new array with 4 empty slots. Calling keys() on the new array will return an array iterator that will yield the key at each index. In an array, the key will be the index position.

Afterwards, we "consume" the iterator using the spread operator .

There are a few caveats to this method that you need to be aware of. First, this method will always start at 0 so you cannot specifiy the lower bound without more manipulation. Similarly, the number you pass into Array() is inclusive; meaning that it is also included in the range.

A Cool Trick

What if you could just do this?

Well, you can! Here's how:

Here, we are modifying the iterator property on the Number prototype. We are assigning our own generator to the iterable property that will yield an iterator that counts from 0 to the specified number.

Check out the resources in the previous section because we are incorporating all those concepts in this example.

I have to mention that modifying a primitive's prototype is not recommended. I would probably not use this in production but it is a pretty awesome trick to show at parties.

Do not ask what kind of parties I attend. 🙂

Closing Thoughts

I am certain that there are more ways of generating a range of numbers out there. In my opinion, this is one of the beauties of programming. There are many ways of approaching a problem and you are able to craft your own awesome solution!

Ace your Coding Interview

DSA Problems
Binary Tree
Binary Search Tree
Dynamic Programming
Divide and Conquer
Linked List
Backtracking

Create an array sequence from 1 to N in a single line in JavaScript

This post will discuss how to create an array sequence from 1 to N in JavaScript.

There are several ways to create an array sequence of integers from 1 (inclusive) to N (inclusive), where the value N is dynamic.

1. Using Array.from() function

Download Run Code

Or use Array Constructor

2. Using Spread operator

3. using underscore library.

Download Code

The _.range method is overloaded to generate a range from start (inclusive) to stop (exclusive), incremented (or decremented) by step .

That’s all about creating an array sequence from 1 to N in a single line in JavaScript.

Initialize an array with range 0 to N in JavaScript

Remove a range of elements from an array in JavaScript

Rate this post

Average rating 4.84 /5. Vote count: 45

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Tell us how we can improve this post?

Thanks for reading.

To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.

Like us? Refer us to your friends and support our growth. Happy coding :)

Software Engineer | Content Writer | 12+ years experience

How to create an array of numbers in javascript

Mar 10, 2024
Typescript Javascript

Typescript ,

This tutorial covers multiple ways we can create an array with a sequence of numbers.

# Using Array literal syntax

Array variables are defined by assigning numbers using literal syntax.

Literal Syntax contains elements, separated by a comma in Square Brackets [] .

Easy, simple way to create numbers with fixed values
Not suitable for a large number of elements or need processed values

# Use Array constructor

Array constructors are used to creating an array variable with fixed set values, and inline assignment.

Suitable for a finite number of elements and easy to declare, It improves readability
Literal syntax is more suitable than constructor, but not suitable for a larger array of elements.

# Use Array.of function

Another way to create an array with numbers using the Array.of() function.

It works with limited numbers, not support for process of numbers
Not recommended for a larger array of elements.

# Using for loop

Using for loop with index assigned with initial number and increment by 1 until end of the number, and add an index to an array.

Here is an example to create an array of sequence numbers from 1 to 50.

The developer has full control over what number to insert
Native way of writing using for loop and more code required

# using the ES6 spread operator

es6 provides spread operator syntax to include an array with keys as an array of numbers.

The generated sequence of numbers using the spread operator and keys method in es6

# Use Arrays.from() function

Also, you can use Arrays.from() function in place of the spread operator

The above two examples generate numbers from zero.

if you want to generate from 1, Here is a code. It uses an arrow function with increment values by 1.

# Using Array fill function

Sometimes, the fill() function is used to prefill an array with the given value.

Array size given to Array() constructor

Used to fill with values using custom processing numbers
Can be used for larger data sets.

# lodash range function

if the application uses the lodash library, It provides a range function that iterates with a range of min and max values. Syntax:

start : It is a starting number or initial number, Stop : is the maximum value that needs to increment too. Step : needs value which increments by how much value, Default is 1.

useful for projects already using this library, Code changes are not required, just a calling method.
Separate library needs installation

# Underscore times function

times function is used to iterate the loop a given number of times and each iteration calls the callback function.

number : It iterates multiple times with the given call-back function. callbackfunction : This function called for each iteration

Suitable for applications, already using the library, only usage of method is required in code
Separate library installation required, need to import it.

# Conclusion

Learn multiple ways to create an array of sequence numbers for a given min and max values in javascript.

#Typescript
#Javascript

Skip to main content
Skip to search
Skip to select language
Sign up for free
English (US)

Array.from()

Baseline widely available.

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015 .

See full compatibility
Report feedback

The Array.from() static method creates a new, shallow-copied Array instance from an iterable or array-like object.

An iterable or array-like object to convert to an array.

A function to call on every element of the array. If provided, every value to be added to the array is first passed through this function, and mapFn 's return value is added to the array instead. The function is called with the following arguments:

The current element being processed in the array.

The index of the current element being processed in the array.

Value to use as this when executing mapFn .

Return value

A new Array instance.

Description

Array.from() lets you create Array s from:

iterable objects (objects such as Map and Set ); or, if the object is not iterable,
array-like objects (objects with a length property and indexed elements).

To convert an ordinary object that's not iterable or array-like to an array (by enumerating its property keys, values, or both), use Object.keys() , Object.values() , or Object.entries() . To convert an async iterable to an array, use Array.fromAsync() .

Array.from() never creates a sparse array. If the arrayLike object is missing some index properties, they become undefined in the new array.

Array.from() has an optional parameter mapFn , which allows you to execute a function on each element of the array being created, similar to map() . More clearly, Array.from(obj, mapFn, thisArg) has the same result as Array.from(obj).map(mapFn, thisArg) , except that it does not create an intermediate array, and mapFn only receives two arguments ( element , index ) without the whole array, because the array is still under construction.

Note: This behavior is more important for typed arrays , since the intermediate array would necessarily have values truncated to fit into the appropriate type. Array.from() is implemented to have the same signature as TypedArray.from() .

The Array.from() method is a generic factory method. For example, if a subclass of Array inherits the from() method, the inherited from() method will return new instances of the subclass instead of Array instances. In fact, the this value can be any constructor function that accepts a single argument representing the length of the new array. When an iterable is passed as arrayLike , the constructor is called with no arguments; when an array-like object is passed, the constructor is called with the normalized length of the array-like object. The final length will be set again when iteration finishes. If the this value is not a constructor function, the plain Array constructor is used instead.

Array from a String

Array from a set, array from a map, array from a nodelist, array from an array-like object (arguments), using arrow functions and array.from(), sequence generator (range), calling from() on non-array constructors.

The from() method can be called on any constructor function that accepts a single argument representing the length of the new array.

When the this value is not a constructor, a plain Array object is returned.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Polyfill of Array.from in core-js
Indexed collections guide
Array.fromAsync()
Array.prototype.map()
TypedArray.from()

JS Tutorial

Js versions, js functions, js html dom, js browser bom, js web apis, js vs jquery, js graphics, js examples, js references, javascript arrays.

An array is a special variable, which can hold more than one value:

Why Use Arrays?

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The solution is an array!

An array can hold many values under a single name, and you can access the values by referring to an index number.

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array.

It is a common practice to declare arrays with the const keyword.

Learn more about const with arrays in the chapter: JS Array Const .

Spaces and line breaks are not important. A declaration can span multiple lines:

You can also create an array, and then provide the elements:

Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:

The two examples above do exactly the same.

There is no need to use new Array() .

For simplicity, readability and execution speed, use the array literal method.

Accessing Array Elements

You access an array element by referring to the index number :

Note: Array indexes start with 0.

[0] is the first element. [1] is the second element.

Changing an Array Element

This statement changes the value of the first element in cars :

Converting an Array to a String

The JavaScript method toString() converts an array to a string of (comma separated) array values.

Access the Full Array

With JavaScript, the full array can be accessed by referring to the array name:

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.

But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its "elements". In this example, person[0] returns John:

Objects use names to access its "members". In this example, person.firstName returns John:

Array Elements Can Be Objects

JavaScript variables can be objects. Arrays are special kinds of objects.

Because of this, you can have variables of different types in the same Array.

You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array:

Array Properties and Methods

The real strength of JavaScript arrays are the built-in array properties and methods:

Array methods are covered in the next chapters.

The length Property

The length property of an array returns the length of an array (the number of array elements).

The length property is always one more than the highest array index.

Accessing the First Array Element

Accessing the last array element, looping array elements.

One way to loop through an array, is using a for loop:

You can also use the Array.forEach() function:

Adding Array Elements

The easiest way to add a new element to an array is using the push() method:

New element can also be added to an array using the length property:

Adding elements with high indexes can create undefined "holes" in an array:

Associative Arrays

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes .

WARNING !! If you use named indexes, JavaScript will redefine the array to an object.

After that, some array methods and properties will produce incorrect results .

Example:

The difference between arrays and objects.

In JavaScript, arrays use numbered indexes .

In JavaScript, objects use named indexes .

Arrays are a special kind of objects, with numbered indexes.

When to Use Arrays. When to use Objects.

JavaScript does not support associative arrays.
You should use objects when you want the element names to be strings (text) .
You should use arrays when you want the element names to be numbers .

JavaScript new Array()

JavaScript has a built-in array constructor new Array() .

But you can safely use [] instead.

These two different statements both create a new empty array named points:

These two different statements both create a new array containing 6 numbers:

The new keyword can produce some unexpected results:

A Common Error

is not the same as:

How to Recognize an Array

A common question is: How do I know if a variable is an array?

The problem is that the JavaScript operator typeof returns " object ":

The typeof operator returns object because a JavaScript array is an object.

Solution 1:

To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray() :

Solution 2:

The instanceof operator returns true if an object is created by a given constructor:

Complete Array Reference

For a complete Array reference, go to our:

Complete JavaScript Array Reference .

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Get the value " Volvo " from the cars array.

Start the Exercise

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

How to Fill an Array With Range in JavaScript

JavaScript Howtos
How to Fill an Array With Range in …

Fill an Array With Range Using the Array.fill() Function in JavaScript

Fill an array with range using the array.from() function in javascript, fill an array with range using the es6 spread operator in javascript, fill an array with range using the array.map() function in javascript, more ways to fill an array with range in javascript.

How to Fill an Array With Range in JavaScript

This article will discuss the various methods provided by the Array class that we can use to fill an array with a range in JavaScript.

The Array.fill() method fills an existing array with a particular value.

This method takes three parameters: value , which we will fill into the array, and start and end , which describe where we want to add the data inside the array. start and end are optional parameters.

As we can see, all the elements inside the array are successfully replaced and filled with the value 6. If we don’t want to replace all the elements with that value, we can specify the start and end indexes.

Introduced in the ES6 version of JavaScript, the Array.from method creates a shallow-copied instance of an array from an array-like, iterable object.

target : The object to convert to an array.
mapFunction : Calls on every array element. This is an optional parameter.
thisValue : The value to use as this when executing the mapFunction . This is also an optional parameter.

To fill the array, we use Array.from() with Array.keys() . The Array.keys() method extracts all the array’s keys and returns an iterator, then the Array.from() function takes this iterator as a parameter.

In the end, all the indexes are copied as elements of the new array.

Instead of the Array.from() function, we can also use a spread operator, represented by three dots ... .

We will pass Array.keys() , which will return an iterator and spread the elements present inside this iterator using the spread operator ... , placed before Array.keys() .

After that, we have to enclose all of this inside the square brackets [] to represent an array.

The spread operator will generate the same output as the Array.from function.

The Array.map() function will create a new array by running a provided function as a parameter on every element of the calling array. This can take any function as a parameter, such as an arrow, callback, or inline.

In the example above, the map function takes the arrow function as a parameter to extract the item and index . This arrow function will be called on every element of the array.

In the end, the index value of all the array elements will be extracted and stored inside the new array.

The methods we have discussed to fill an array with a range in JavaScript are widely used by many developers. Apart from these, there are other methods we can use.

The Array.prototype.apply() , which is a pre-built method in JavaScript.
The range() method of Underscore.js library.

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.