Higher-order functions - Part 1 of Functional Programming in JavaScript

Fun Fun Function · 783K views · 2015 · 10:49

Open on YouTube

Functional programmingWeb developmentProgramming language designtutorial

Why Stack Overflow recommends it

Stack Overflow users link it when explaining callbacks, filter, map, reduce and functional style in JavaScript, since it makes higher-order functions easy to grasp.

Recommended by 9 people across 8 different months, 2015 to 2020.

What it is

Part 1 of MPJ's Fun Fun Function series on functional programming in JavaScript. He explains what higher-order functions are, argues for learning functional programming, and walks through code using filter, map-style callbacks and functions passed as values.

What people said

Recommends Julien · 2015-10 · Stack Overflow · on “Meteor remove duplicate property in an array of objects”

You can use Array.prototype.reduce : drivers.reduce(function(result, driver){ var category = result.find(function(search){ return search.category === driver.category; }); if(category){ category.drivers.push(driver); } else { result.push({ category:driver.category, drivers: [driver] }); } return result },[]); I've learned that from this tutorial series [this video] , the guy is brilliant and very funny. This will give you an array looking like: [ { "category": "Video", "drivers": [ { "title": "Nvidia Video Driver", // ... }, { "title": "Intel Video Driver", // ... } ] }, { "category": "Audio", "drivers": [ { "title": "Realtek Audio", // ... } ] }, { "category": "chipset", "drivers": [ { "title": "

Recommends MrHaze · 2016-02 · Stack Overflow · on “Is there any program library support filtering JSON like mongodb query syntax?”

Have a look at libraries like lodash [LINK] , or underscore [LINK] . A function like filter [LINK] would be a good example. Something like this can be used: var items = [{ "id": 1, "size": 3 }, { "id": 2, "size": 4 }, { "id": 3, "size": 1 }]; var result = items.filter(function(item) { return item.size == 1; }); console.log(result); Good video describing the use of the filter() function [this video]

Recommends Efemorav · 2017-08 · Stack Overflow · on “How to add custom rules to a calculator?”

There are severals ways of doing this, this is my suggestion: You can filter the pants array based on the result of random shirt var random_shirt = [random logic]; /* This will iterate over your pants array, returning a filtered array with containing the items that returned true item: the actual item index: index of the actual item array: original array */ filtered_pants = pants.filter(function(item, index, array) { if (item == random_shirt) { // This item won't be in the filtered array return false; } if ([another custom rule]) { return false; } /* After passing all the rules return true to include this item in the filtered array */ return true; }); // Now shuffle over the filtered array va

Recommends BanelingRush · 2017-09 · Stack Overflow · on “Function within function 3 times over in Javascript”

What you want to look at is promises in Javascript. But before you dive into something that specific I would recommend you get a basic understanding of functional programming in Javascript. A few links to help you out in this case are given below - Functional Programming in JS [this video] Promises in JS [LINK]

Recommends Matthew Barbara · 2017-09 · Stack Overflow · on “Calling a method inside another method JavaScript”

First and foremost: Whilst it is still possible to mimic OOP in JavaScript, you should avoid this approach and instead opt for Functional Programming [this video] . To answer your question: When you are invoking success() , as it happens on every function in JS, the context changes and this will be referring to wherever you invoke the code. To solve this issue you can either use bind(this) or change success to a method instead of a function. Here is how it can be done: successs: function(position){ let pos = position.coords; console.log('Your actual position is :'); console.log(`Latitude : ${pos.latitude}`); console.log(`Longitude: ${pos.longitude}`); console.log(`More or less ${position.coords.a

Recommends Robbie Milejczak · 2017-11 · Stack Overflow · on “Identify how the function has been called in closure javascript”

yeah, currying is an awesome concept it can be leveraged for a lot of efficiency in a codebase by letting you reuse a single multi purpose function for specific purposes. It's great for readability and also it's just a cool and novel programming concept. Check out this vid series for some similar concepts [this video] I think functional programming in javascript is a lot of fun

Recommends Matthew Moran · 2018-02 · Stack Overflow · on “Sequencing of functions and passing the results along to the next function”

I'm not sure what async.sequence does as that code was not provided. To answer your questions, you are dealing with few concepts. The first one is Callbacks A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. Taken from MDN [LINK] This video [this video] might help in explaining. The second one is Currying Currying is a technique where you can pass all of the arguments a function is expecting and get the result, or pass a subset of those arguments and get a function back that’s waiting for the rest of the arguments. Check out this [LINK] tutorial for a more detailed explanation.

Recommends 112Legion · 2020-02 · Stack Overflow · on “Laravel : How to filtered a Collection by Multiple Filters”

@djoo I guess you are not familiar with functional programming I suggest to watch this video in order to understand the magic. [this video]

Recommends emseidov · 2020-08 · Stack Overflow · on “About Arrow Functions in JavaScript”

It seems like you're trying to make sense of the higher-order functions in JS with fairly complex example. First, what does the map method do? It iterates over an array and calls the provided callback function right?! [1, 2, 3].map(n => n + 1); // [2, 3, 4] // Which is equalent to this: [1, 2, 3].map(function(n) { return n + 1 }) // or this... function increment(n) { return n + 1 }; [1, 2, 3].map(n => increment(n)); Or for a better explanation, I would just suggest watching this video to get a clearer understanding of array methods and higher-order functions in JS: JavaScript Higher Order Functions & Arrays [this video] ! And after it would be much easier for you to reason about your concrete exa

Cites damtypo · 2016-08 · Stack Overflow · on “Why is it useful to have an anonymous function stored as a variable, and pass it to higher order functions?”

I am working on my understanding of functional programming and have a question. In this example* an anonymous function is assigned to the variable isDog, then isDog is passed to filter. Then we can filter all the dogs in the animals array into a new array. (I know I can shorten this code, but that is not the point of the post :) ) var animals = [{name: "Spot", species: "dog"}, {name: "Rex", species: "dog"}, {name: "Whiskers", species: "cat"}, {name: "Floppy", species: "Rabbit"}] var isDog = function(animal) {return animal.species === 'dog' } var dogs = animals.filter(isDog) I understand that functions can be passed as arguments and maybe that is made explicit by assigning functions to variab