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

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"

  }

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"

  }

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"

  }

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"

  }

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;
}

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.

Comments

[FJones]

May I recommend the following instead:

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

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"

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(/* ... */) || {}

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 } =  /* ... */;

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;

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

function superbowlWin(arr) {
    return arr.find(({ result }) => result === "W")?.year;
}

[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.