Best of Modern JavaScript — Find Item and Holes
Tags: javascript, webdev
Published: 2020-07-31 01:32:23

---
title: Best of Modern JavaScript — Find Item and Holes
published: true
date: 2020-07-25 19:40:33 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8afind-item-and-holes/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258afind-item-and-holes
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**
Since 2015, JavaScript has improved immensely.

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

In this article, we’ll look at some instance methods of `Array` and holes.

### Array.prototype.findIndex

The `findIndex` method lets us return the index of the item that’s found.

It takes a callback that returns the condition that we’re looking for.

The 2nd argument is the value of `this` we use inside the callback.

It returns the index of the first element that meets the given condition.

If none is found, then -1 is returned.

For example, we can write:

```
const index = [2, -1, 6].findIndex(x => x < 0)

```

Then `index` is 1.

And if we write:

```
const index = [2, 1, 6].findIndex(x => x < 0)

```

Then `index` is -1.

The signature is the callback is `predicate(element, index, array)` .

`element` is the array being iterated through.

`index` is the index of the array.

`array` is the array it’s called on.

### Finding `NaN` via `findIndex()`

With `findIndex` , we can find `NaN` because we can use `Object.is` to compare against `NaN` .

For example, we can write:

```
const index = [2, NaN, 6].findIndex(x => Object.is(x, NaN))

```

`Object.is` assumes that `NaN` is the same as itself, so we can use it to check for `NaN` .

This doesn’t work with `indexOf` .

### `Array.prototype.copyWithin()`

The `Array.prototype.copyWithin()` method lets us copy a chunk of an array into another location.

The signature of it is `Array.prototype.copyWithin(target: number,  start: number, end = this.length)` .

`target` is the starting index to copy to.

`start` is the starting index of the chunk to copy from.

And `end` is the ending index of the chunk to copy from.

So if we write:

```
const arr = [1, 2, 3, 4, 5, 6];
arr.copyWithin(2, 0, 2);

```

Then we get:

```
[1, 2, 1, 2, 5, 6]

```

as the new value of `arr` .

### `Array.prototype.fill()`

`Array.prototype.fill()` is a method that lets us fill an array with the given value.

Its signature is:

```
Array.prototype.fill(value, start=0, end=this.length)

```

The `value` is the value to populate.

`start` is the starting index of the array filling.

`end` is the ending index to fill to the array.

For example, we can write:

```
const arr = ['foo', 'bar', 'baz', 'qux'];
arr.fill(7, 1, 3)

```

Then `arr` is `[“foo”, 7, 7, “qux”]` .

### Holes in Arrays

JavaScript allows holes in arrays.

Indexes that have no associated element inside the array is a hole.

For example, we can write:

```
const arr = ['foo', , 'bar']

```

to add an array with a hole in it.

ES6 treats holes in `undefined` or `null` elements.

If we call:

```
const index = [, 'foo'].findIndex(x => x === undefined);

```

The `index` is 0.

And if we write:

```
const entries = ['foo', , 'bar'].entries();

```

Then `entries` is:

```
[
  [
    0,
    "foo"
  ],
  [
    1,
    null
  ],
  [
    2,
    "bar"
  ]
]

```

There’re some inconsistencies in how they’re treated.

With the `in` operator:

```
const arr = ['foo', , 'bar'];
console.log(1 in arr);

```

We get `false` logged with our `arr` .

### Conclusion

Holes in arrays are allowed in JavaScript.

Also, there’re various methods to find items with arrays.

The post [Best of Modern JavaScript — Find Item and Holes](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8afind-item-and-holes/) appeared first on [The Web Dev](https://thewebdev.info).