Best of Modern JavaScript — Array Fill, Concat, and Spread
Tags: javascript, webdev
Published: 2020-07-30 00:36:17

---
title: Best of Modern JavaScript — Array Fill, Concat, and Spread
published: true
date: 2020-07-25 19:37:00 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aarray-fill-concat-and-spread/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258aarray-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 only`undefined` , 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](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aarray-fill-concat-and-spread/) appeared first on [The Web Dev](https://thewebdev.info).