Wherefore art thou: reduce fonction in solution 3

Hello,
I modified a little bit the FCC solution 3 in order to understand what’s done the reduce() function done exactly. I added the w & x variables:

function whatIsInAName(collection, source) {
  var srcKeys = Object.keys(source);

  // filter the collection
  return collection.filter(function(obj) {
    let w = srcKeys
      .map(function(key) {
        return obj.hasOwnProperty(key) && obj[key] === source[key];
      });
console.log(w)
      let x = w.reduce(function(a, b) {
        return a && b;
      });
console.log(x)
      return x
  });
}


whatIsInAName(
  [
    { first: "Romeo", last: "Montague" },
    { first: "Mercutio", last: null },
    { first: "Tybalt", last: "Capulet" }
  ], 
    { last: "Capulet" }
  );

console.log(w) display an array with “false” or “true”.
console.log(x) display a string with “false” or “true”.
My question is about reduce. I think a and b are the same, if W is [false] as 0&0=0 reduce () return false in string. If W is [true] as 1&1=1 reduce () return true in string.

Is that it ?

To be honest, the large number of single letter variables is making it very difficult for me to understand what you are trying to do.

2 Likes

Hello,
I added variables to see what’s the code done step by step.
Apparently what’s the reduce methode see in input is an array [true] or [false] and his output is “true” or “false”.
The code works with the variables, so it’s not a problem.

I can’t understand using map() and reduce() here.
For me, map() have to transform an array and reduce() have to reduce an array to one value.
I hadn’t problem to understand the solutions 1 & 2, but in this case I can’t undersatnd how it’s work.
For exemple, at the begining I thougth reduce() transformed an array to a string, so I tried to replace reduce() by :

let x = w.toString()

But that’s doesn’t works, so for end I think I understand nothing at all :stuck_out_tongue_closed_eyes:

Can you help me to understand step by step ?

Maybe someone else will have the time today to wade into the cryptic variables and try to decode the secret meaning, but I won’t have the time.

Ok so bad, happy day. :wink:

Reduce takes an array and give back a single value, what value that is depends from the callback

toString, if you use it on an array, gives a comma separated list of the elements, it can’t almost never be used in place of reduce

can you explain to me what the code done step by step. I really blocked. I missing something here.

What have you lost? Try to see a piece at a time

You may need to study the reduce method on its own, it’s not an easy thing to get

this is I try to do . Undestand step by step.
First I don’t undersatnd the map callback.
console.log(w) → [ ‘last’ ]
thus:
[ ‘last’ ].map(function(key) {
return obj.hasOwnProperty(key) && obj[key] === source[key];
});

What I see is It transform [ ‘last’ ] to [‘true’] or [‘false’] depending on obj.hasOwnProperty(key) && obj[key] === source[key] is true or false.
This for me the tranformation that map() done .
Is it correct ?

no, it creates an array of booleans, not strings

Ok it’s a new array.
For the fisrt ‘obj’ of ‘collection’, the map() return [ false ].
At this time what done reduce() ?. ‘a’ is the accumulator and ‘b’ the current value.
There isn’t initiale value, so ‘a’ take array[0] and as there is only one value in array ‘b’ = ‘a’.
So reduce return false & false = a string false.
is it correct ?

if the array has length 1, and there is no starting value, then it just returns that value
so

[false] .reduce(...) === false

That’s why I don’t understand the calback:

function(a, b) {
        return a && b;

:thinking:

There are 2 main things you must understand, in order to see how the given code works. First how reduce works. a represents the “accumulator”, the value reduce will spit in the end. a takes the value of whatever is returned on each callback(return a && b). The second thing you want to understand is what expression && expression stands for. In JS its called short circuit. It looks the first expression and if it evaluates as true, it will return the second expression, else, it returns the first expression. In the current situation, reduce will be called on an array of true and false booleans and will return one value, true or false, true, if all values were true(meaning the object we test has all source keys and their respective values), or false, if there is at least one false value(meaning the object misses a key name, or doesnt have the matching value to one)(the array of true/false values, is result of calling the map method on the source keys). Whatever value reduce will return, is what will tell filter whether it should leave the element, or filter it out.

Yes I understand now,
I too much focused on in the case with only one key in the array “source”:

image

I better understand reduce() now. In the case of there are several keys, reduce is what we need. Yes.

I feel better to have undertsood but I begin to think I’m not very good. :upside_down_face:

1 Like

Thanks for your help :wink:

What a mistake ! I’m not very proud :triumph:

Im glad i was able to help.
This is perfect example of how short variable names can be misleading. If the code is aimed for personal use, and you are able to track your own flow of logic, its fine, and lets you write fast, but when its aimed at audience, its nice to be more explicit on what a variable stands for. function(a,b) you can easily assume a and b represent similar things, and to an extent they do, in the current context, but behind the scenes, b also represents the current element, of an array, while a is the result of the previous callback.
Same goes for how you used “w” and “x” to refer to things. Random letters that carry no context. It served you well to look what map and reduce returned, but people found it hard to interpret your code and see what stands for what :stuck_out_tongue:

Ok well understood :wink: