Can you solve this tricky JavaScript Array problem?

[philhagerman]

You know what I appreciate most about this type of YouTube vid. It’s real. If you ask any developer how long this would take to solve they all tell you, easy five minutes max. You know that’s not true. It never is. But it adds to the anxiety for newer devs when they hear that. Seeing an individual with your reputation in our industry doing this for real shows that even simple sounding operations take time to think through, work it out, and eventually solve. I love these un-edited real time dev snippets. I personally am now going to play around some more with map and reduce in JS. This just looks fun.

[dableb]

this might be the best Youtube channel I've ever found for learning how to crack these problems. It's so valuable as a junior to hear things broken down this way. You're mentoring so many and we're very grateful

[mrlenoir]

No idea how successful these videos are in terms of viewership but I find them immensely enjoyable!

[michaelrobinson]

My solution's pretty much the same as yours, with a couple of changes:

1. In the processing section, you can just use array.map() rather than reduce, so you get better readability and performance. Of course, this is also an improvement since you weren't entirely sure how you were going to solve it originally

2. When merging the data, you can just do Object.assign(existingPerson, currentPerson) in the if statement 😊

I also see a solution using Object.fromEntries 🔥

[silo]

That was a fun video, thanks! Just one remark: I think your solution doesn't exactly produce the desired output. You create an array of objects, whereas the task asks to create an array of arrays, with the headings inside the first element. Theres also an edge case where a missing value ("parent" for Susan and Ben) should be displayed as an empty string.

However, I really enjoy this kind of content and thanks again for your great work!

[domemvs]

I can’t express how much I enjoy this kind of content. My all time favorites still are the drone videos. Please give us more 🙏🏼😄

[CodingWithLewis]

Daily uploads Wes? Christmas must be early 🎄

[jessicadesjardins]

Great video, I find working through this problem in my head while watching you do it is a great way to learn. One suggestion from a viewer with terrible eyes, if I may, would be to dark mode your browser window as well 😬😎

[perpetualgrimace]

Worth watching just for `console.table`, that would have made my life much easier on multiple occasions. The double reducer though 🤯

[AmAnKumAr-tgfy]

please upload this kind of video every week or month it very helpful.

[declanodriscoll]

7:49 rather than doing the .entries you can do a for in loop and then heading would be the index and headings[heading] is the value

[ofeenee]

In the merge function, @15:50, you could’ve just used:

‘
if (existingPerson) currentPerson = Object.assign(currentPerson, existingPerson)
return […acc, currentPerson]
’

Or, you can replace Object.assign() with:

‘
if (existingPerson) currentPerson = {…existingPerson, …currentPerson }
‘

However, given the nature of JS, and the fact that Object.assign() returns the reference to the actual target object (the first argument passed in) and not a newly constructed object, you can just ignore the returned value and just do this:

‘
if (existingPerson) Object.assign(currentPerson, existingPerson)
return […acc, currentPerson]
‘

[TheCodingOdyssey]

I just love using the reduce method. Its so powerful.

[rajesht]

Well done Mr. Wes Bos. Thanks for posting this video.

[ericzorn]

This solution is nearly identical to what I would’ve chosen as well. However, I would want to check error handling in the event of a nullish value or if one of the objects in the array doesn’t follow the same schema (aka, why typescript is amazing)

[HagbardCelineOnRust]

Hi Wes. I like your naturalness, when it worked at like 08:10. Feeling the same every time :-)

[dcm-code]

@Wes Bos, could you pls zoom in a little bit, I can't really what's going on on your screen!!! Thanks!

[ernstmayer]

Straight forward approach respecting the assumption. Not as flexible but getting the job done.

const desiredColumns = ['name', 'id', 'age', 'height', 'parent']
const output = [desiredColumns]
const merged = [...arr1, ...arr2, ...arr3]
const persons = {}
let currentColumns
for (const line of merged) {
if (line[0] === 'name') {
currentColumns = line
continue
}
let name
for (const [index, element] of line.entries()) {
if (index === 0) {
persons[element] = persons[element] || {}
name = element
continue
}
= element
}
}

for (const key of Object.keys(persons)) {
const filtered = desiredColumns.map(c => {
if (c === 'name') return key
return persons[key][c] || ''
})
output.push(filtered)
}

[benjaminfortune]

This was certainly interesting; I had forgotten that object de-structuring was a thing in JS. Was wondering how you were going to deal with the set of properties for the final conversion into an array of arrays again. In hindsight, it's probably easy enough to do at the very end with the list of people objects.

function objectifier(arry, person_dict, prop_set) {
const props = arry[0]
const id_idx = props.indexOf('id')
props.forEach(prop => prop_set.add(prop))
=> {
const id = val_list[id_idx]
const person = person_dict[id] ?? {}
val_list.forEach((val, i) => person[props[i]] = val)
person_dict[id] = person
})
}

function arrayifier(person_dict, prop_set) {
const props = [...prop_set]
const people = Object.values(person_dict)
const fin_arry = people.map((person) => {
return props.map(prop => person[prop] ?? "")
})
return [props, ...fin_arry]
}

const person_dict = {}
const prop_set = new Set()
objectifier(arr1, person_dict, prop_set)
objectifier(arr2, person_dict, prop_set)
objectifier(arr3, person_dict, prop_set)
console.table(arrayifier(person_dict, prop_set))

[charana]

Hey, Small clarification I need, the desired out put is needed in a 2D array, where you have done an array of Objects, which is the correct output format needed ?