Best of Modern JavaScript — Find 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 appeared first on The Web Dev.