Bits: Generate Sequential Array

JavaScript + Arrays | Made FlatIcons + Excalidraw

As we write more code we slip into certain ways of doing things. Here and there we find some code which makes us wonder. What would happen if I start collecting them? Well, the time will tell…

Problem Statement — 1

For the given size create an array, rank and has 1 as its value. The following is the most straightforward implementation of this problem.

const rank = [];
const size = 10;

for (let i = 0; i < size; i++) {
  rank[i] = 1;
}

The for has came as immediate solution but there another way.

One More Solution

If we twist the words the requirement it can be written as “construct an array of size N and fill with a static value v”.

The problem statement gives us the methods we need to leverage. Hence we need to know two methods in Array — JavaScript.

Array() constructor

The Array() constructor is used to create Array objects.

Array.prototype.fill

The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

const rank = Array(10).fill(1);
console.log(rank); // [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

👍 Concise and readable. Let us move to the next one.

Problem Statement — 2

For the given size create an array, data with index as its value. The following is the most straightforward implementation of this problem.

const data = [];
const size = 10;

for (let i = 0; i < size; i++) {
  data[i] = i;
}

There must be other ways which we should explore.

Further Solutions

The requirement can be re-written as “construct an array of size N and fill with index i”.

Let us use fill to do this. But it needs a little bit of help.

const rank = Array(10).fill().map((_, i) => i);
console.log(rank); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

🤔 What else though?

Since it is filling the index of array as value the key comes to mind.

Array.prototype.keys()

The keys() method returns a new Array Iterator object that contains the keys for each index in the array.

const data = [...new Array(10).keys()];
console.log(data); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

This is well enough but what if there was a requirement to manipulate the value, let us say adding 1 to the index and then set the value.

const data = [...new Array(10).keys()].map(i => i + 1);
console.log(data); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

🤔 What else though?

Array.from()

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

const data = Array.from({ length: 10 }, (v, i) => i);
console.log(data); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Here the signature of from() method is `Array.from(arrayLike, (element, index) => { /* … */ }) where we give an array like object which tells the length of the array and then a function (say map function) to fill the value at each index.

If you are still confused (as I was) check here for detailed explanation.

This can be easily modified to increment the value by 1 or to do any other operation on the index.

There can be more combinations and I am sure the more we will search the more we will find. That is a beauty of programming — it is a rabbit hole.

But Why

Have you heard of Graphs?

If you have, then have you heard of Disjoint Sets?

If you have, then have you heard of Union & Find?

If you have, then have you heard of Quick Union & Quick Find?

The Ghost of Programmer Urges You

If you have then you would recollect that the initialisation done in the implementation of Disjoint sets requires two arrays which share the same features as we stated and solved in this short post.

References

1. MDN — Array
2. MDN — Array fill()
3. MDN — Array from()
4. MDN — Sequence generator