Lessons from open-source: How to create an array containing 0..N using Array.from?
Tags: javascript, node, nextjs, opensource
Published: 2024-03-19 21:45:54

This lesson is picked from [Next.js source code](https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/detect-typo.ts#L14C21-L14C63). In this article you will learn how to create an array containing 0 to n using Array.from.

![snippet from next source](https://media.licdn.com/dms/image/D4E12AQFJnDK2o5cE1Q/article-inline_image-shrink_1500_2232/0/1710884144270?e=1716422400&v=beta&t=OJtLNrrMWMgEe21Mwj7wr-BZKJcTOmIqCpXmaql8nX8)

Array.from
----------

> _The_ Array.from() static method creates a new, shallow-copied Array instance from an [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) or [array-like](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#working_with_array-like_objects) object. — [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

In the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from), I could not find any example using an object with length property

Array.from({ length: n + 1 }, (\_, i) => i)

> [_Practice the exercises based on documentation_](https://tthroo.com/) _to become an expert in Next.js_

### Stackoverflow results:

I searched on the internet and found this [stack overflow answer](https://stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n).

![stackoverflow results](https://media.licdn.com/dms/image/D4E12AQEXI29QvgcwLg/article-inline_image-shrink_1000_1488/0/1710884144103?e=1716422400&v=beta&t=6OhQ1d8G3oRfhPqlfIDXyF_s37LYQegjuNgTqLVQAs0)

The third way is a modified version to create an array that contains 1..n. The only difference is i+1.

### Github results:

Github search results made me realise the importance of data structures and algorithms.

I have seen this code snippet used in repositories containing “Algorithm” name.

![Github search result](https://media.licdn.com/dms/image/D4E12AQEQ3xIGBq3sgw/article-inline_image-shrink_1500_2232/0/1710884144022?e=1716422400&v=beta&t=eeayInDgTtOuMHLHpN-XOgfCGp-yGyGelSXbLAywcpg)

![Github search result](https://media.licdn.com/dms/image/D4E12AQFkLIh5ifJuFg/article-inline_image-shrink_1500_2232/0/1710884145335?e=1716422400&v=beta&t=hC2VQeRG-wvSLWnmvGCMY3kiR-o9sB-0n3Ig7Sg4oTU)

![Github search result](https://media.licdn.com/dms/image/D4E12AQGla2tb0C3QXg/article-inline_image-shrink_1500_2232/0/1710884145566?e=1716422400&v=beta&t=oBlSYTwkfEwaKP85iitmV-QVSMpVumdIvVNkRBrG8Kk)

Conclusion:
-----------

There is a strong correlation between quality code and utilising the right data structures and algorithms. I have seen [Depth First Search implementation](https://github.com/vercel/next.js/blob/198e2d79d22db938dac82b45b823ba96a1cf3396/packages/next/src/client/components/app-router.tsx#L101) in next.js source code and some exceptional usage of data structures to [handle cache using weakmap](https://dev.to/ramunarasinga/lessons-from-opensource-weakmap-in-javascript-6g1). Yea, do not use for loop to create an array containing 0..n. Use Array.from. Take your coding skills to next level.