Clarification on a .reduce() method in my code

 const els = {
    scoreInEl: null, //number <input>
    maxInEl: null, //number <input>
    percentInEl: null, //number <input>
    percentEl: null, //Output
    gradeEl: null, //Output
    scoreUp: null, //Output
    scoreDown: null, //Output
    percentOut: null //Output
  };
    
  Object.keys(els).reduce((o, k) => (o[k] = document.querySelector("#" + k), o), els); //point of interest

So I have this code here that deals with the .reduce() method and I would like further information about my specific case.

I understand the the Object.keys takes each and every name of the element, such as scoreUp

So if you look at MDN documentation on this it says that you take the last element and the first element and that would be o and k.

Does the o[k] make the scoreUp: null; equal something, and what does it make it equal.

I don’t think I understand anything in the query selector, or what the any of the o or k mean in: document.querySelector("#" + k), o,), els) but I do understand that the # means a css id and that the els is the object itself, and in this case would be the initial value.

Doing a console.log(Object.keys...) returns a bunch of confusing information, but from what I can tell its similar to doing something like console.log(document.getElementById()

What I really want from this is an answer to my questions, or a better source than the MDN to explain it