by Tiago Lopes Ferreira
Array.prototype.includes() and the new exponential operator:
Gone are the days where we used
.indexOf() to know if an element existed in an array.
The key word is “exist.”
.indexOf() is fine if we want to know at which index a given element appears.
But if our goal is to know if a given element exists in an array, then
.indexOf() is not the best option. And the reason is simple: When querying the existence of something we expect a boolean value, not a number.
Array.prototype.includes() does exactly that. It determines if a given element exists in an array, returning
true if it does,
Into The Specification
Array.prototype.includes ( searchElement [ , fromIndex ] )
searchElement— the element to search for.
fromIndex(optional) — the index from which to start to search.
Diving into the specification feels like searching for power.
The specification says:
Let’s go step-by-step and try to understand the specification with examples.
- The difference here is the position of the element 4. Because our first example places 4 in the last position, includes will search the whole array. By specification
.includes()returns immediately after finding the
searchElement. This makes our second operation much faster.
- The big difference with the SameValueZero algorithm versus the Strict Equality Comparison (used by
.indexOf()) is that it allows detecting the NaN elements.
- It returns the boolean
truewhen the element is found and
falseotherwise. No more indexes as result ?
- As opposite to
.includes()does not skip missing array elements. Instead, it treats them as undefined values.
Are you starting to feel the power?
We haven’t even touched
Let’s check the specification:
The optional second argument
0(i.e. the whole array is searched). If it is greater than or equal to the length of the array, false is returned, i.e. the array will not be searched. If it is negative, it is used as the offset from the end of the array to compute
fromIndex. If the computed index is less than
0, the whole array will be searched.
- If no
fromIndexis provided them the default value of
0is taken and the whole array is searched.
.includes()immediately returns false when the value of
fromIndexis bigger than array’s length.
fromIndexis negative, then it’s value is calculated as
array.length — fromIndex. This is particularly useful when searching on the last elements. For example,
fromIndex = -5is the same as searching on the last 5 elements.
- To avoid
.includes()from breaking when the
fromIndexcalculated value is lower than 0, the whole array is searched. I would rather break ?
OK — one last new feature…
The Exponential Operator (**)
We’ve been waiting for the day we can play with exponential numbers like we play with addition, subtraction, multiplication, division.
Well, that day is here.
** behaves exactly the same way as
Math.pow(). It returns the result of raising the first operand to the power of the second (e.g.
x ** y).
You now have the power of ES7! Use it well!
Thanks to ?
- 2ality.com by Axel Rauschmayer
- ECMAScript® 2016 Language Specification
- To all He-Man fans
- freeCodeCamp for publishing ❤️
Be sure to check out my articles on ES6:
Let’s explore ES6 Generators
Generators, aka, an implementation of iterables.medium.freecodecamp.orgOh Yes! Async / Await