{"componentChunkName":"component---src-templates-post-js","path":"/blog/2020/10/05/array-findindex/","result":{"data":{"post":{"html":"

Searching for items in an array has been the point of discussion for many years and debate on what is the best and optimum way for searching for objects has had many solutions, some effective and some not.

\n

However, with the all new findIndex method on Array.prototype you have the flexibility to search for objects using your own comparison callback method.

\n\n

The what

\n

The findIndex method returns the index of the first element in an array if the callback method passed to it returns true, otherwise it returns -1.

\n {\r\n return num > 0 && Math.sqrt(num) % 1 === 0;\r\n}\r\n\r\nconsole.log([1, 3, 8, 9, 12].findIndex(isPerfectSquare)); // 1\r\nconsole.log([1, 6, 7, 10, 14].findIndex(isPerfectSquare)); // -1`, `69284524062846080000`)\"\n >\n \n Copy\n \n \n
const isPerfectSquare = (num) => {\r\n  return num > 0 && Math.sqrt(num) % 1 === 0;\r\n}\r\n\r\nconsole.log([1, 3, 8, 9, 12].findIndex(isPerfectSquare)); // 1\r\nconsole.log([1, 6, 7, 10, 14].findIndex(isPerfectSquare)); // -1
\n

There are two facts you should know:

\n\n

Syntax

\n\n \n Copy\n \n \n
array.findIndex(function(currentValue, index, arr), thisValue);
\n

Parameters

\n
    \n
  • function: This is your callback function which checks for a condition to match the element you’re after.
    • \n
  • currentValue: This holds the current element’s value.
    • \n
  • index: This is an optional parameter which holds the current index.
    • \n
  • arr: This is also an optional parameter which holds the array that the current element belongs to.
    • \n
  • thisValue: Yet another optional parameter, if a value is passed, it will be used as this value inside the function, otherwise undefined will be passed.
    • \n
\n

Return value

\n

It will return the index of the found item or -1 if the callback function is not satisfied.

\n

How it works under the hood?

\n

When the findIndex is called with one or two arguments, the following steps are executed:

\n
    \n
  1. Let O be ? ToObject(this value)
    2. \n
  2. Let len be ? LengthOfArrayLike(O)
    3. \n
  3. If IsCallback(predicate) is false, throw a TypeError exception
    4. \n
  4. Let k be 0
    5. \n
  5. Repeat, while k < len
    6. \n
\n
    \n
  • Let Pk be ! ToString(k)
    • \n
  • Let kValue be ? Get(O, Pk)
    • \n
  • Let testResult be ! ToBoolean(? Call(predicate, thisArg, « kValue, k, O »))
    • \n
  • If testResult is true, return k
    • \n
  • Set k to k + 1
    • \n
\n
    \n
  1. Return -1
    2. \n
","timeToRead":1,"frontmatter":{"unformattedDate":"2020-10-05T00:00:00.000Z","date":"October 05, 2020","title":"Find an item in an array with the new 'findIndex' method 🔎","subtitle":null,"id":null,"author":"Yaser Adel Mehraban","gravatar":null,"canonical_url":null,"tags":["showdev","webdev","javascript","findindex"],"thumbnail":null,"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB90lEQVR42i2OS2vbQBRG9au76H/ortDu2k1pN4VCY0gTnMQ08cjWjO04jiRbsh6WZEmjeehtPRLRcSgcDt/l8l2utHaZFpVaVOxw7dCTx/7jsvPo0iZImzBvj1kbpG10duOQKmAnB2cSCjKD9TvaLpzk8cCMuLBwIdY2qS1SG7i0aWMlpRtnbpJ7tDLj/Ji/kHrwWS1N/XSVNCo+Xc7WV/PnsaL9vLy7uJVHE2U8e/pzj36LfDv9cYMuZ5u5at3BzUG8UA4uqSTgpxCfUHza8t7JXve0mSz1yUK7ltcL4wierbGiPqx3U7fQWO+VQ1ANdtrtWK9FohykKK6hm0KLL91cDSsnewmq17AeonoQ9qtBdA5Zb/HWpK2wwTqddpuwkMA+QRZXDAbtFLo5coqFmz96+TY+7UlrknaXNDppdN5t3zo663a8FfkpLCWgx0ubr/YU2tnMpNMtftCxYueKW8AzJTyUMKggbhDpFqSbHVpgNSoV5UKS93z+AFZXvxYWv1naI6BeAFW2OfJKKPDffKaAx3pJmi/f+nfv+2nQojCXoJONxuDTx8+ymQADzx0+sxmwGPIq5JdnvBIFFTpW0K9WuP5+3X342ilhKztcut/4020y0bBsEiDYU+Bw2cCyHsrbSNaEY2BRIC4KTDJ3CQyobLG/WvQPPnkMF8vEHrMAAAAASUVORK5CYII="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/0a7f38c1d4bc3ece7787ff19bd4d0a70/a2195/socialpreview.png","srcSet":"/static/0a7f38c1d4bc3ece7787ff19bd4d0a70/cadb4/socialpreview.png 750w,\n/static/0a7f38c1d4bc3ece7787ff19bd4d0a70/a2195/socialpreview.png 800w","sizes":"(min-width: 800px) 800px, 100vw"},"sources":[{"srcSet":"/static/0a7f38c1d4bc3ece7787ff19bd4d0a70/11ba1/socialpreview.webp 750w,\n/static/0a7f38c1d4bc3ece7787ff19bd4d0a70/5f042/socialpreview.webp 800w","type":"image/webp","sizes":"(min-width: 800px) 800px, 100vw"}]},"width":800,"height":400}}},"img":null,"socialPreview":{"publicURL":"/static/0a7f38c1d4bc3ece7787ff19bd4d0a70/socialpreview.png"}}}},"pageContext":{"title":"Find an item in an array with the new 'findIndex' method 🔎","postPath":"/blog/2020/10/05/array-findindex","nextPost":"/blog/2020/10/09/powertoys","previousPost":"/blog/2020/09/06/image-capture-api"}},"staticQueryHashes":[],"slicesMap":{}}