Best of Modern JavaScript — Array Fill, Concat, and Spread

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at various array operations.

Creating Arrays Filled with Values

We can create an array filled with values with the Array.prototype.fill method.

It replaces all array elements including holes with a fixed value.

For instance, we can write:

const arr = new Array(3).fill('foo');

Then arr is [“foo”, “foo”, “foo”] .

new Array(3) creates an array with 3 holes and fill replaces each hole with 'foo' .

We can fill an array with ascending numbers by calling the keys method with an empty array.

For example, we can write:

const arr = [...new Array(10).keys()]

Then arr is [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] .

We can also fill an array with some computed value.

To do that, we can use the Array.from method.

For instance, we write:

const arr = Array.from(new Array(10), (x, i) => i ** 2)

then we return an array with the first 10 square numbers.

So arr is [0, 1, 4, 9, 16, 25, 36, 49, 64, 81] .

To fill an array with onlyundefined , we can spread an array created with the Array constructor.

For example, we can write:

const arr = [...new Array(10)];

Then arr is:

[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

Configuring Which Objects are Spread by concat()

We can configure which objects are spreadable by the Array.prototype.concat method.

To do this, we can override the Symbol.isConcatSpreadable value.

By default, the Array.prototype.concat method spread an array into the array it’s called on.

For instance, we can use it by writing:

const arr = [3, 4, 5];
const merged = [1, 2].concat(arr, 6);

Then merged is [1, 2, 3, 4, 5, 6] .

We pass in an array or a value into the method and it’ll be spread into the array it’s called on and returned.

To change how concatenation is done, we can define our own Symbol.isConcatSpreadable value to let change this behavior.

We can write:

const arr = [3, 4, 5];
arr[Symbol.isConcatSpreadable] = false;

const merged = [1, 2].concat(arr, 6);

Then merged is:

[
  1,
  2,
  [
    3,
    4,
    5
  ],
  6
]

No Spreading for Non-Arrays

Non-array values won’t be spread into the array that concat is called with.

However, we can change this behavior with the Symbol.isConcatSoreadabke value.

For instance, we can spread an array-like object into the array that we return with concat by writing:

const arrayLike = {
  length: 2,
  0: 'c',
  1: 'd'
};
arrayLike[Symbol.isConcatSpreadable] = true;

const merged = Array.prototype.concat.call(['a', 'b'], arrayLike, 'e', 'f');

We set arrayLike[Symbol.isConcatSpreadable] to true so that we can spread the properties with integer indexes into the array returned by Array.prototype.concat .

Therefore, we get that value of merged is:

[
  "a",
  "b",
  "c",
  "d",
  "e",
  "f"
]

Detecting Arrays

Array.prototype.concat detects an array the same way as Array.isArray .

It doesn’t matter whether Array.prototype is in the prototype chain.

This ensures that various hacks that were used to create Array subclasses still work with the array check.

Conclusion

We can fill and combine arrays to manipulate arrays.

The Symbol.isConcatSpreadable property lets us set if an array is spreadable into another array.

The post Best of Modern JavaScript — Array Fill, Concat, and Spread appeared first on The Web Dev.