Photo by Crissy Jarvis on Unsplash
While working on a JavaScript project, I found myself in need of generating an array containing numbers from 0 to 99. Instead of taking the quickest route, I was reminded of my days as a Teaching Assistant for a programming class. Inspired by that, I decided to share different approaches to crafting a 0 to 99 array in JavaScript.
It might seem trivial, but I believe there's value in exploring various methods. Whether you're a seasoned developer or a beginner from a coding bootcamp, there's always room to discover new ways to empower your code. So, let's embark on a journey to explore different methods to achieve our 0–99 array.
1. For Loop
The for loop, a timeless classic from the early days of coding, remains a fundamental choice. If you began your JavaScript journey in a code camp, this method likely feels like second nature:
const method1= [];
for (let i = 0; i < 100; i++) {
method1.push(i);
}
Here, the loop diligently traverses from 0 to 99, populating the array method1 with each iteration.
2. Array.from
Array.from, a concise one-liner, might raise eyebrows for beginners. Essentially, it encapsulates a for loop, with each value assigned to i, representing the index of the current value in the array.
const method2 = Array.from({ length: 100 }, (_, i) => i);
By defining the array’s length as 100 and leveraging the mapping function, we achieve a streamlined representation of the traditional for loop.
3. Spread Operator with Mapping
This method mirrors Array.from, utilizing the array spread operator along with mapping to emulate a for loop.
const method3 = [...Array(100)].map((_, i) => i);
The array spread operator facilitates a concise representation, while the map function elegantly establishes the index i for each value.
4. Fill and Map Function
A blend of fill and map functions bring another layer to array creation:
const method4 = new Array(100).fill(0).map((_, i) => i);
In this method, fill initializes the array with placeholder values, and the map function refines it to contain the desired sequence of numbers.
5. Spread and Reduce Function
A distinct approach involves using the spread and reduce functions in tandem:
const method5 = [...Array(100)].reduce((acc, _, i) => [...acc, i], []);
Here, the reduce function meticulously accumulates values, effectively constructing the desired array through iterative addition.
6. Using the Key with Spread Operator
A personal favorite, this method is elegantly simple. Just spread the array with its keys:
const method6 = [...Array(100).keys()];
By directly accessing the keys, this approach sidesteps unnecessary iterations and efficiently constructs the array.
7. Recursion
Believe it or not, you can even opt for recursion to accomplish this task. For those who enjoy the challenge of recursive functions:
function range(start, end) {
if (start > end) return [];
return [start, ...range(start + 1, end)];
}
const method7 = range(0, 99);
The range function, in a recursive dance, meticulously builds the array by appending values based on the specified range.
8. The TypedArray with Map
For a different twist, consider using TypedArray with the map function:
const method8 = new Uint8Array(100).map((_, i) => i);
In this variation, a TypedArray steps onto the stage, and the map function refines it to create an array of numbers from 0 to 99.
In conclusion, the realm of JavaScript offers numerous diverse methods to craft a 0–99 array. This article aimed to showcase the versatility of these methods, encouraging developers to explore beyond the conventional and embrace diverse approaches. Happy coding!