JavaScript Array Methods: .find()

[MUSIC] 0:00 Hey everyone, what's up? 0:09 I'm Dustin, a developer here at Treehouse. 0:10 I have a quick guide for you today on a JavaScript array method known as find. 0:12 This method essentially lets you find an item in your array. 0:16 It's really easy to use, and I'll go over its official definition, and 0:19 show some examples of how to use it. 0:23 Be sure to check out the description or teacher's notes of this video for 0:25 related resources on this method. 0:28 Let's get into it. 0:30 First, let's check out the documentation for this method. 0:31 I'll head over to the official MDN documentation, 0:35 which I'll also link below in case you'd like to check it out for yourself. 0:38 We see that, according to MDN, find() returns the first element 0:42 in a provided array that satisfies the provided testing function. 0:46 If no values satisfy the testing function, 'undefined' is returned. 0:50 Let's write some code so that we can see this in action. 0:55 I'll open up an empty project folder from my desktop and create an app.js file. 0:58 I'll run this file with node. 1:04 But if you are unfamiliar with node, or don't have it installed, 1:05 you can also run this code in your browser's console. 1:09 Let's set up an array. 1:12 I'll name it numbers, and give it a few values. 1:13 We'll do 10, 20, 30, 40, and 50. 1:16 I want to find the first value in this array that is larger than 25. 1:21 Since this method will return something, we can store this in a new variable. 1:25 I'll write const greaterThan25, and 1:30 I'll set that equal to our numbers.find(). 1:33 Just like other JavaScript iteration methods, 1:37 we have our element parameter that holds the current element being processed. 1:40 I'll name this num, and then we'll write an arrow function and 1:44 then num > 25. 1:49 The first time this array method processes our array, 1:51 num holds the value of the first array item, which in this case is 10. 1:54 It tests if 10 is greater than 25. 1:59 It's not, so nothing happens. 2:02 And then the process starts over, but at the next array's index. 2:04 So the second time the array is being processed, num holds the value of 20. 2:08 This process repeats until the first time our logic is truthy, 2:13 or as the definition explains, 2:16 until the first time num satisfies the provided testing function, 2:18 which is a number that's greater than 25. 2:22 This process continues until we get to the third item in our array, which is 30. 2:25 The process stops here. 2:30 Because if you remember the definition for this method, 2:31 find returns only the first element that satisfies the testing function. 2:34 30 is greater than 25, so the process stops. 2:38 And this array element is returned to us, and 2:42 it's stored into our new variable greater than 25. 2:44 We can see this by logging this variable out to the console. 2:47 So I'll hit Save, and in my terminal, I'll write node app.js. 2:50 And you'll see we get 30 logged into the console, sweet! 2:56 A lot of times you'll wanna find out the array index of the item that 3:00 you just found with the find method. 3:04 This can be done using the index parameter that we have access to with JavaScript 3:06 iteration methods, or we can just use the indexOf array method. 3:11 Let's see how we can do that. 3:15 Let's clear out the console.log() method, and 3:17 replace it with our numbers array.indexOf. 3:20 And since we have the array item returned to us in our greaterThan25 variable, 3:24 we can use this variable inside of our indexOf method, 3:29 to return the index of the item in our array we used in the find method. 3:33 So, we'll write numbers.indexOf( greaterThan25). 3:37 I'll hit Save, and run our file in the terminal again. 3:43 And you can see we get back the number 2, 3:46 which is the index of 30 in our numbers array. 3:48 Pretty neat! 3:51 That about covers it for this quick guide on using the find method. 3:53 This is a method I use a lot in my projects, and 3:56 I'm sure you will too once you've practiced and feel comfortable using it. 3:59 Again, check out the description or teacher's notes of this video for 4:02 related resources on this method. 4:06 Until next time, have fun and happy coding. 4:07

You need to sign up for Treehouse in order to set up Workspace

Sign up