{"id":12523,"date":"2020-05-06T14:31:30","date_gmt":"2020-05-06T21:31:30","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=12523"},"modified":"2023-12-01T02:44:19","modified_gmt":"2023-12-01T10:44:19","slug":"javascript-find","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-find\/","title":{"rendered":"JavaScript Find: A Step-By-Step Guide"},"content":{"rendered":"\n

The JavaScript find()<\/code> function returns the first element in a list that meets a given requirement. The function is useful for finding specific values in an array.<\/em><\/p>\n\n\n\n

When working with JavaScript, you may want to retrieve a specific value from an array. That\u2019s where the JavaScript find()<\/code> function comes in. This function searches through an array and returns the first element that meets a certain criterion. <\/p>\n\n\n\n

In this tutorial, we will discuss the basics of arrays in JavaScript. Then we\u2019ll explore how you can use the JavaScript find()<\/code> function to get the value of the first item that meets a certain condition in an array.
<\/p>\n\n\n\n

JavaScript Array Refresher<\/h2>\n\n\n\n

Arrays are ordered lists of items that are used to store data. Arrays can contain zero or more items and are useful if you want to store multiple common values in a single variable. For example, you could use an array to store a list of shipments received at a warehouse or a list of books sold at a bookshop.
<\/p>\n\n\n\n

Arrays can contain any data type, including numbers, objects, and strings. In JavaScript, arrays are declared as a list of comma-separated values and are enclosed within square brackets. Here\u2019s an example of an array that stores a list of colors in JavaScript:
<\/p>\n\n\n\n

var colors = ['Red', 'Orange', 'Yellow', 'Green'];<\/pre><\/div>\n\n\n\n
The above variable (colors<\/code>) was assigned an array of colors. Our colors<\/code> array contains four values. Having declared this array, we can retrieve individual items from it.
<\/p>\n\n\n\n
In JavaScript, items in an array are assigned an index value, starting with 0<\/code>. We can use these index values to retrieve an item or set of items. Here are the index values that JavaScript automatically assigns to items in the array we declared above:
<\/p>\n\n\n\n
Red<\/td>Orange<\/td>Yellow<\/td>Green<\/td><\/tr>
0<\/td>1<\/td>2<\/td>3<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Now, if we want to retrieve the value Orange<\/code> from our array, we can do so by referencing its index number. Here\u2019s the code we would use to do this:
<\/p>\n\n\n\n
console.log(colors[1]);<\/pre><\/div>\n\n\n\n
Our code returns: <\/p>\n\n\n\n
Orange <\/pre><\/div>\n\n\n\n
As you can see, our program returned the value at the index position 1<\/code> in our array.
<\/p>\n\n\n\n
JavaScript Find<\/h2>\n\n\n\n
You can use the JavaScript find()<\/code> method to locate a specific value within an array. The program will return the first item that meets the criterion you define. If more than one item meets that criterion, the program will return only the first item.
<\/p>\n\n\n\n
The find()<\/code> method takes in three arguments:
<\/p>\n\n\n\n