DEV Community

Joshua Shane Doud Jr.
Joshua Shane Doud Jr.

Posted on • Edited on

My journey using .find() to return keys and values in an array!

#javascript #beginners

Below you will find my final product, but after that I will take you through my failed attempts from which I was able to learn from to get to this final product. After this I will take you even further and "clean up" my final code block.

const record = [
    { year: "2015", result: "W"},
    { year: "2014", result: "N/A"},
    { year: "2013", result: "L"},
    //...
  ]

  function superbowlWin(array) {
    let win = array.find(isWin)
    if (win) {
      return win.year
    }
    return win
  }

  function isWin(score){
      return score.result === "W"

  }
Enter fullscreen mode Exit fullscreen mode

With the above code block in mind and our variable "record" I was tasked with creating a function that would loop through the objects in the array and return the year value when the result value (===) "W" or a win. I started out with this:

 function superbowlWin(array) {
   return array.find(isWin).year

  function isWin(score){
      return score.result === "W"

  }
Enter fullscreen mode Exit fullscreen mode

Now this was ok and it gives me the first year that produced a winning result; however, it did not give me a way to find out if there were no winning results within my array. Attempting to change the code to do so I ended up with a couple of failing functions like this:

function superbowlWin(array) {
   return array.find(isWin).year;
       else return undefined


  function isWin(score){
      return score.result === "W"

  }
Enter fullscreen mode Exit fullscreen mode

Now this and others did not work. I then realized that instead of trying to return the functions return directly I can place the function inside a variable and then use that variable to write an if....else statement to compare the results to what I would be looking for. This meant that I could take the result of the .find() function and compare it to being true or false. If true it would return the variable.year (win). This returns 2015 which is a winning year. Now the else statment returns the variable (win) if the function turns out to be false. This returns undefined due to the .find() functions default. Please see below:

const record = [
    { year: "2015", result: "W"},
    { year: "2014", result: "N/A"},
    { year: "2013", result: "L"},
    //...
  ]

  function superbowlWin(array) {
    let win = array.find(isWin)
    if (win) {
      return win.year
    }
    return win
  }

  function isWin(score){
      return score.result === "W"

  }
Enter fullscreen mode Exit fullscreen mode

If we want to take this a step further we can clean the code block and turn it into an anonymous function within our main function and write it as an arrow function:

function superbowlWin(array){
        let win = array.find(array => array.result === "W")
        if (win){
            return win.year;
        } else return win;
}
Enter fullscreen mode Exit fullscreen mode

And there you have it our final function which uses the .find() function to take in a callback function (arrow function) to loop through the array and return the winning year! Although you probably read this in a minute or two let me tell you the journey was a lot longer. Have a great day and look for more little bits of my code learning journey.

Top comments (2)

Collapse
 
fjones profile image
FJones • • Edited

May I recommend the following instead:

function superbowlWin(arr) {
    const { year } = arr.find(({ result }) => result === "W") || {};
    return year;
}
Enter fullscreen mode Exit fullscreen mode

This will still return undefined if no win is found, and save you both the conditional and the dereferencing on win.year.

Let's break this down:

({ result }) => result === "W"
Enter fullscreen mode Exit fullscreen mode

This is just the arrow function with parameter destructuring. Rather than using the whole match object, we only pick what we need: the result property, and compare that to the "W" literal just as you did.

Note: This only works if every item of the arr is an object!

arr.find(/* ... */) || {}
Enter fullscreen mode Exit fullscreen mode

We make use of short-circuiting here, which means that if arr.find returns undefined (or any falsy value, but that can only be undefined in this case as arr only contains objects), we instead proceed with the right-hand side of the || operator. In this case, the empty object literal {}.

const { year } =  /* ... */;
Enter fullscreen mode Exit fullscreen mode

We use destructuring again, this time to take our result from the short-circuit (remember: either the win, or the empty object!), and pick the year property from it, automatically assigning it to a new year variable.

If we have found an entry, this will be the year of the win. If we haven't, it will be undefined (because {}.year is undefined). So we can just return that in the next line:

return year;
Enter fullscreen mode Exit fullscreen mode

Bonus Answer:
Using optional chaining, we could also write the following:

function superbowlWin(arr) {
    return arr.find(({ result }) => result === "W")?.year;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jdoud1993 profile image
Joshua Shane Doud Jr. •

Thank you! I haven't gotten to the destructuring part of my program yet but this an awesome glimpse into what is yet to come.

Read next

zororaka profile image

🚀 When to Use VPS, Vercel, and Cloudflare Worker: A Detailed Comparison

Raka Widhi Antoro -

neetigyachahar profile image

What's new in Next.js 15

Neetigya Chahar -

jamir_hossain_8800f85fdd5 profile image

PHP OOP Part-2: Constructor and Destructor

Jamir Hossain -

fitehal profile image

Oh My Zsh: A Simple Guide for Developers

Abhishek Deshpande -