Bootcamp: .Reduce()

As an impressionable first time "bootcamper", nearly 2 and a half months into my deep-dive of JavaScript, it's easy to become immediately attracted to shiny objects. Learning hundreds of concepts in such a short period can be overwhelming, but I think it's important to stop and admire what you've come to appreciate as far as those concepts go. I think the reduce method is my shiny object, thus far.

For me iterating through data was completely foreign. This was not something on my radar. The idea of looping through an array of letters, numbers, words, and "stuff", was not something I was prepared for. Oh, and making it return something after? What? I was ignorant, to put it simply. After learning imperative style for-looping, over and over again, it became clear to me how simple code like:

let array = [2, 4, 6, 8];

const sum = (array) => {
  let result = 0; 
  for (let i = 0; i < array.length; i++) {
    result += array[i];
  }  
  return result;
};

console.log(sum(array)); -> 20

... can quickly get out of hand, especially when we introduce complex code, math, or conditions into the equation.

...

In comes the Reduce method. It seems like the Reduce method has no limits. It can do what Map, Filter, and many other JavaScript array functions do, AND it just looks better doing it. Take my for-loop example from above for example, let's photoshop it using Reduce:

let array = [2, 4, 6, 8];

const sum = (array) => array.reduce((total, item) => total += item, 0);

console.log(sum(array)); -> 20

Wow. So much cleaner. That's clean. A single line of code that does what you want it do, as opposed to telling it what to do. As a noob I just FEEL more confident, and maybe, a little less capable of screwing this function up, although I would not put it past me.

...

Next I will use a coding example that was introduced to me in bootcamp. While I understand the "think outside of the box" type of programming that this toy-problem is forcing upon me, I could not help but be a little annoyed knowing a similar result could be attained with ONLY using the Reduce method. For example, return an array of all of the people who's favorite stuff includes "stuff1", using Reduce AND forEach:

const people = [
    {
      person: 'person1',
      favStuff: ['stuff1', 'stuff2', 'stuff3'],
    },
    {
      person: 'person2',
      favStuff: ['stuff4', 'stuff1', 'stuff5'],
    },
    {
      person: 'person3',
      favStuff: ['stuff6', 'stuff7', 'stuff8'],
    },
    {
      person: 'person4',
      favStuff: ['stuff9', 'stuff1', 'stuff10'],
    }
];


const stuff = (people) => {
  var newArr = people.reduce(function(arr, curr) {
    curr.favStuff.forEach(function(stuff) {
      if (stuff === 'stuff1') {
        arr.push(curr.person);
      }
    });
    return arr;
  }, []);
  return newArr;
};

console.log(stuff(people)); -> ['person1', 'person2', 'person4']

Now, I'm not trying to toot my own horn here, this took me a good 25-30 minutes to figure out, mostly because I had tunnel vision. I kept wanting to solve this, only using Reduce, nothing else. I had to convince my brain to solve the problem in this manner... and invite forEach to my party even though it wasn't welcome.

As I continue through my coding journey, I hope to pick up more tools along the way and hopefully bond with them. I need to search for the positive, and focus less on the many struggles that the coding maze presents to me. Also, before I forget, and my brain explodes from holding it in (and imposter syndrome), here is the "stuff" function using only Reduce:

const stuff = (people) => {
 let result = people.reduce(function(arr, curr) {
  if (curr.favStuff.includes('stuff1')) {
    arr.push(curr.person);
  }
   return acc;
  }, []);
  return result;
}

console.log(stuff(people)); -> ['person1', 'person2', 'person4']