Reduce Advanced - Part 4 of Functional Programming in JavaScript

💖 Support the show by becoming a Patreon

In this video series, we learn how to do functional programming in JavaScript. In this fourth one, we spend a little bit more time on *reduce*.

Playlist of full series is here:

You want to follow me on Twitter and Quora:

💛 Follow on Twitch
We record the show live Mondays 7 AM PT

💛 Fun Fun Forum

💛 mpj on Twitter

💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:

💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:

💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.

🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.

Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.

📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.

⏯ On Fridays, an edited version of the show is adapted for and published on YouTube.

Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management

[georgepickett]

For me, it makes reduce easier to understand when you use the same arguments every time. I use "result", "item" and "index". "result' is the result you're building up to in your reduce function, "item" is the current item you're iterating over, and "index" is the index.

[ivanvolti]

I like your videos style:) BTW in ES6 you can write even shorter:

const output = fs.readFileSync('data.txt', 'UTF8')
.trim()
.split('\n')
.map((line) => line.split('\t'))
.reduce((customers, [name, order, price, quantity]) => {
customers[name] = customers[name] || [];
customers[name].push({ order, price, quantity });
return customers;
}, {});

[MasterPuppets]

mark johansson waffle iron 80 2
mark johansson blender 200 1
mark johansson knife 10 4
Nikita Smith waffle iron 80 1
Nikita Smith knife 10 2
Nikita Smith pot 20 3

[seemax]

Just in case anyone got stuck as I did:
- " import fs" doesn't work, use require('fs') instead
- For Win run this: node example.js
- Attention: use Tab, not Spacebar between name/item/price/quantity and rows as well.

[vedovelli]

The video is good enough but the closing with a sip of Jura made it simply perfect! You're a man of good taste, Sir!

[twh]

Great videos. 

One note, since you're using Atom, there is a shortcut to writing console.log() ... you can just type log and then hit TAB to auto-complete it. Also cmd + /  to comment out lines.. but you prob know that one.

[BFBvideos]

I'm a pretty big JavaScript fan so by chance I stumbled upon your videos. Next thing I know I'm watching your videos like a TV series, they're really great. Both your old and new ones. Thanks for making programming more enjoyable than it already was.

[scarletovergods]

I'd like to see u take on regular expressions in JS :)

[ellieadam]

You are awesome, but music is too loud.

[thinkcritically]

This is the beauty of Javascript. It can feel a little strange if you're used to more traditional languages, but at times like this it really shines through.

[prateekgogia]

Honestly, I've never been able to understand Reduce function so well.
Thanks a lot for this.

[xrZt]

Drinking Whiskey while recording a coding screencast === true gentleman and a scholar 😎

[iRantu]

This is easily my new favorite front end dev channel. The charisma of this dude is amazing. What a fella.

[caematos]

I need this plant for.... lifestyle. HAHAH LOL

[charleseno]

I just discovered this...amazing stuff...i love the background music(makes it unique).

[RabbitWerksJavaScript]

FOR ANYONE COMING ACROSS COMMON ISSUES

Node doesnt support es6 syntax, for anyone coming across runtime issues, as stated below, you must use the es5 syntax of "const fs = require('fs')" vs the import statement. Additional modules must be installed in order to use es6 syntax such as import without compliation errors.
Notice the word BABEL typed before example.js? Babel is a build tool that compilies your code down to standardized ES5 syntax, which Node can fully interpret.

Also, if anyone is having trouble with the .split('\t) method not returning the desired result, make sure to check that you actually use the tab character for spacing between each item, use regular spaces for multi word items. the split method goes through and looks for the "\t" character, which is different than using 2 spaces. youll find that it doesnt necessarily amount to the same spacing as two spaces would, thats due to how tabs line up against the left margin of the editor. tabs are the same space incrrementally, regardless of content. filling each character space.
(a good example of this is line 2 in between 200 and 1, thats a tab, but it looks like a space, due to the tab alignment)

so long story short, if you just uses regular spaces in between items, it wont split correctly because its TWO SPACES, not a \t tab char.


More details on this can be found at:

Check out Babel for yourself!

[heymauriciosoares]

Man, that's the FP in Javascript series I was waiting for! Thanks for that.

[DimaLevy]

the first four videos helped me SO much. You got my sub and like.


Thank you

[georgiana]

I am a comeback in JavaScript after a few years of Ruby. I'm very happy to see how neat JS has became. I also think it's cute how excited you are about built-in functions that I took for granted in Ruby like map, reduce & friends. It certainly puts things in a new light.

[TribalPVP]

How about in your next video series you talk about concepts like prototype, closures, call, apply and bind in javascript?