Create Array from 1 to 100 in JavaScript

Use for Loop

To create the array from 1 to 100 in JavaScript:

• Use a for loop that will iterate over a variable whose value starts from 1 and ends at 100 while the variable’s value is incremented by 1 in each iteration.
• Inside the for loop, use the push() method to insert a value to an array.
• Use the log() method to display the array on the console.

Using loops is useful when we are supposed to perform the same function repeatedly. For example, we used a for loop because we wanted to insert a value into an array often; this value can be the same or different, and we are inserting a different value in each iteration.

The for loop contained three expressions: the first expression is var i = 1, the second is i <= 100, and the third is i++. The first expression, var i = 1, set the value of variable i to 1 before starting the loop, and this expression got executed once.

The second expression, i <= 100, demonstrated the condition to validate the first expression and executed the loop. This condition explained that the loop would be executed if the value of i is less than or equal to 100. Otherwise, it would throw the pointer out of the for loop.

The third expression, i++, is used to increment the value of i. Finally, inside the for loop, we used the push() method, which can add a new item to an end of the array, changes the array’s length and returns the new size/length of the array.

Finally, we used the console.log() method to display the array values on the console. In JavaScript, we have to be careful about the following points while using a for loop:

1. The first expression is optional, and we can omit it. In that case, we can initialize the variable’s value before writing the loop.

   Note that we can initialize multiple variables in the first expression; this case would be helpful if we have to create two arrays, one from 1 to 100 and the second from 101 to 200 using one for loop.

2. The second expression is optional, and we can omit that. Remember, if we don’t want to have the second expression, we must write a break inside the for loop; otherwise, it would be a never-ending loop and crash the browser.

3. The third expression can also be omitted, and we can increment the variable’s value inside the for loop.

You may have noticed that using the for loop requires more lines of code and care. What if we can have some shorter ways of achieving the same results? Let’s explore them below.

Use Array.from() with Array.keys()

If we are using ES6 (ECMAScript6), then we can use this approach to create the array from 1 to 100 in JavaScript:

• Use the Array() constructor to instantiate the Array class or we can say to create an Array object.
• Pass an integer ranging from 0 to 2^(32 - 1) (inclusive) to the Array() constructor. It will create a new array with a length property set to the number we passed in Array().
• Use the .keys() method to get an Array Iterator Object with the array’s keys.
• Use the .from() method to get an array from an iterable object that we get using the .keys() method in the previous step.
• Use the .slice() method to specify the start position.

This code seems challenging to understand but believe me, it’s straightforward. So let’s break it down into chunks to understand clearly.

We used the Array() constructor to create an Array object and passed it 101 (why is it 101, we will see that in a while). In this way, it created an object of Array where its length property is set to 101. So now, the length of the array is 101, but array elements are empty slots.

Next, we chained the Array(100+1) with the keys() method to get an Array Iterator Object with all the array keys. For learning purposes, we can print the keys as follows.

Note that the keys started from 0 to length-1. Taking you back to where we talked about why it is 101? Because we want to have 100 as the last element, we passed 101, which made length-1 as 100 (101-1).

After that, we passed this iterable object (returned by Array(100+1).keys()) to the Array.from() method, which produced an array from the given iterable object.

At this point, we had an array starting from 0 to 100, but we wanted to get an array starting from 1. For that, we used the slice() method and specified the starting position as 1; by default, it was 0.

We now have an array from 1 to 100.

Use Array.from() with Array Constructor

To create the array from 1 to 100 in JavaScript:

• Use the Array() constructor to instantiate the Array class. Pass the 100 as an argument to the constructor; it will create a new array with a length property set to the 100 we passed in Array().
• Write an arrow function to increment an index by 1.
• Map the arrow function to the object by passing the object and arrow function (created in the first and second steps) to the Array.from() method to get an array starting from 1 to 100.

Here, we used the Array() constructor to create an Array object where the object’s length property is set to 100. Then, we created an arrow function as (_, index) => index + 1 where the left part of the => denotes the input and the right part of the => applies the transformation to this input.

Note that the underscore (_) is a valid identifier in JavaScript and is used to identify the object. Next, we passed the Array object and arrow function (_, index) => index + 1 to the Array.from() method to create an array from 1 to 100.

Use Array.from() with length Property

To create the array from 1 to 100 in JavaScript:

• Create an object with its length property set to 100.
• Write an arrow function to increment an index by 1.
• Map the arrow function to the object by passing the object and arrow function (created in the first and second steps) to the Array.from() method to create an array starting from 1 to 100.

This code is similar to the last code example except for one difference; we created a JavaScript object as {length: 100} where the object’s length property is set to 100.

Next, we used an arrow function, which is already explained while using Array.from() with Array Constructor. Finally, we passed the {length: 100} object and arrow function (_, index) => index + 1 to the Array.from() method to create an array from 1 to 100.

Use Array.from() with fill() Method

To create the array from 1 to 100 in JavaScript:

• Use the Array() constructor to create an Array object of size 100.
• Use the fill() method to fill all array elements’ slots with the values received from the arrow function.
• Use Array.from() to get an array from the specified iterable object.

In previous examples, we have already learned about the Array.from(), Array() constructor, arrow function, and _ identifier.

Here, we used the fill() method, which took the value from the arrow function and filled the array’s current slot. Note that the fill() method overwrites the original array.

We can use the fill() method with the map() method as follows:

The map() created the new array by executing the function (here, it is the arrow function) for every array element. Remember that the map() is called a function only once for every element in the array.

Further, it did not execute a function for empty elements and did not modify the original array.

Use ... Operator

To create the array from 1 to 100 in JavaScript:

• Use spread operator (...) with Array(100).keys() to have all the keys of an array of size 100.
• Use the map() function to create a new array by running the specified function for every array element.

We have already learned about Array() constructor, .keys(), map(), and arrow function. Here, we used ES6’s feature named spread operator (...) to accept an iterable and expand its elements into individuals.

Then, we enclosed it into square brackets as [ ...Array(100).keys() ] to make an array of those individual elements that are from 0-99. To have an array from 1-100, we created an arrow function called by the map() method only once for every element in the array.