Funcional Javascript

Functional programming has gained popularity in the JavaScript community lately, here's an introduction to functional programming in JavaScript.

Watch User Created Playlist (28)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Build a Functional Pipeline with Ramda.js

Redux: Avoiding Object Mutations with Object.assign() and ...spread

Redux: Pure and Impure Functions

Introducing Reduce: Transforming Arrays Functionally

Transforming Immutable Data with Reduce

P

Exploring Sequences and Range() in Immutable.js

P

"Private" Variables with Closures and Factory Functions

P

Manage Application State with Immutable.js

Create a Shallow Copy of an Array with Slice

P

Use Concat to Add Values to an Array

The Array forEach method

The Array map method

The Array filter method

Chaining the Array map and filter methods

Create an Array concatAll method

Array.prototype.reduce in JavaScript by example

Refactoring: Array.prototype by example [filter, some, forEach]

Immutable.js: Introduction - Easing the Pains of Mutability

Advanced Flattening

Introducing the Observable

Using the map method with Observable

Simple drag and drop with Observables

RxJS - map vs flatMap

Reactive Programming - What is RxJS?

Iterating Over an Immutable.js Map()

P

Introducing Reduce: Reducing an Array into an Object

Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

What is JavaScript Function Currying?

js tutorial about Build a Functional Pipeline with Ramda.js

Build a Functional Pipeline with Ramda.js

5:37 js

We'll learn how to take advantage of Ramda's automatic function currying and data-last argument order to combine a series of pure functions into a left-to-right composition, or pipeline, with Ramda's pipe function.

js tutorial about Redux: Avoiding Object Mutations with Object.assign() and ...spread

Redux: Avoiding Object Mutations with Object.assign() and ...spread

2:38 js

Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects.

js tutorial about Redux: Pure and Impure Functions

Redux: Pure and Impure Functions

1:19 js

Some functions are more predictable than others. You will learn the difference between the pure and impure functions. Understanding this difference is essential for writing Redux applications.

js tutorial about Introducing Reduce: Transforming Arrays Functionally

Introducing Reduce: Transforming Arrays Functionally

3:56 js

Learn how to use the reduce function on javascript arrays to transform a list of values into something else. In this introduction we'll be taking a list of numbers and reducing them into a sum.

js tutorial about Transforming Immutable Data with Reduce

Transforming Immutable Data with Reduce

8:25 js PRO

Immutable.js iterables offer the reduce() method, a powerful and often misunderstood functional operator on which map(), filter(), groupBy(), etc. are built. The concept is simple: reduce transforms your iterable into something else, that's all. The name is misleading as you may or may not actually "reduce" anything. Let's replicate the groupBy() and filter() methods with reduce to illustrate how it works.

js tutorial about Exploring Sequences and Range() in Immutable.js

Exploring Sequences and Range() in Immutable.js

6:59 js PRO

Understanding Immutable.js's Map() and List() structures will likely take you as far as you want to go with immutable programming. They have only small semantic differences between each other and the remaining structures in the Immutable.js family. Sequence, however, has one major difference: it's lazy--which opens a new realm of functional possibilities. Let's write a simple sequence to start.

js tutorial about "Private" Variables with Closures and Factory Functions

"Private" Variables with Closures and Factory Functions

3:01 js PRO

By making use of closures and lexical scope, we can achieve "private" properties by returning objects with methods from a factory function. By defining our desired "private" variables within our factory function and accessing these variables from within our returned object's methods we create a closure and maintain unique, separate references to our "private" variables.

js tutorial about Manage Application State with Immutable.js

Manage Application State with Immutable.js

2:36 js

Learn how Immutable.js data structures are different from native iterable Javascript data types and why they provide an excellent foundation on which to build your application's state.

js tutorial about Create a Shallow Copy of an Array with Slice

Create a Shallow Copy of an Array with Slice

9:15 js PRO

Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a 'shallow' copy is and how it can trip people up. We go on to look at examples that show to how to copy only the first item, the last item and even how to copy a sub-section of an array excluding the first and last. We end the lesson with a practical example that shows how slice fits into a workflow that contains other array methods such as map & reduce.

js tutorial about Use Concat to Add Values to an Array

Use Concat to Add Values to an Array

4:38 js

Concat creates a shallow copy of an existing array that includes any arguments you pass to it. In this lesson, we look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as forEach

js tutorial about The Array forEach method

The Array forEach method

4:03 js

Most JavaScript developers are familiar with the for loop. One of the most common uses of the for loop is to iterate through the items in an array. In this lesson, we will learn how to replace the for loop with the Array's forEach method - and shorten your code in the process.

js tutorial about The Array map method

The Array map method

3:02 js

One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's map method to easily perform this operation with less code than a loop would require.

js tutorial about The Array filter method

The Array filter method

4:42 js

One very common operation in programming is to iterate through an Array's contents, apply a test function to each item, and create a new array containing only those items the passed the test. For example, let's say you wanted to loop through an array of stocks and select only those with the price larger than a certain value. In this lesson we will demonstrate how to use the Array's filter method to easily perform this operation with less code than a loop would require.

js tutorial about Chaining the Array map and filter methods

Chaining the Array map and filter methods

3:05 js

Both map and filter do not modify the array. Instead they return a new array of the results. Because both map and filter return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using forEach. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

js tutorial about Create an Array concatAll method

Create an Array concatAll method

4:17 js

In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we have an Array of stock exchanges, each of which is represented by an array of all the stocks listed on that exchange. If we were looking for a stock that matched a certain criteria, we would first need to loop through all of the exchanges, and then all of the stocks within.

In these situations, most developers would nest two loops. However in this lesson we will write a new Array function "concatAll" which will automatically flatten nested arrays buy one dimension. This will remove the need to ever use a nested loop to flatten a nested array.

js tutorial about Array.prototype.reduce in JavaScript by example

Array.prototype.reduce in JavaScript by example

4:49 js

Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might use Array.prototype.reduce to:

  • Sum an array of numbers
  • Reduce an array of objects to a sum of a given property
  • Group an array of objects by key or a set of given criteria
  • Count the number of objects in an array by key or a given set of criteria
js tutorial about Refactoring: Array.prototype by example [filter, some, forEach]

Refactoring: Array.prototype by example [filter, some, forEach]

5:42 js

Refactoring is a great opportunity to learn and we have an existing Javascript function that is lengthy, hard to understand, and overcomplicated. We'll take a look at putting some of Javascript's built in Array.prototype methods to use to help us clean this up and learn by example through refactoring.

By taking a few minutes to refactor this existing code, we can get a glimpse at how we can harness the power of the Array and lean on some built in Array functions available to us in Javascript's core without any added utility libraries.

In this lesson we touch on just a few of the Array methods:

js tutorial about Immutable.js: Introduction - Easing the Pains of Mutability

Immutable.js: Introduction - Easing the Pains of Mutability

3:22 js

By utilizing immutable data structures, we can write code that is easier to reason about, avoid mutation-related bugs, reduce complexity, and even gain some performance benefits along the way.

Before diving too far into Facebook's Immutable.js library, let's take a moment to examine some of the pains and obstacles that mutable data structures present.

We'll take a brief glimpse at putting the Immutable "List" data structure to work by example. We will convert our usage of Javascript's native Array to use Immutable.List in order to address a mutation-related "bug" caused by multiple objects "sharing" a mutable structure (array) by reference.

js tutorial about Advanced Flattening

Advanced Flattening

11:58 js

In this lesson we solidify our understanding of how to flatten collections. This is perhaps the most important skill when learning to program without loops. We will try our hand at flattening not just a two dimensional collection, but a three-dimensional collection. Later on it will become clear how these skills relate to asynchronous programming.

js tutorial about Introducing the Observable

Introducing the Observable

11:59 js

In this lesson we will get introduced to the Observable type. An Observable is a collection that arrives over time. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.

js tutorial about Using the map method with Observable

Using the map method with Observable

3:45 js

Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

js tutorial about Simple drag and drop with Observables

Simple drag and drop with Observables

12:35 js

Armed with the map and concatAll functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.

rx tutorial about RxJS - map vs flatMap

RxJS - map vs flatMap

2:35 rx

What is the difference between map and flatMap? How do you take an Observable of Observables and output a single stream? This lesson is a quick look at map and flatMap and how they relate.

rx tutorial about Reactive Programming - What is RxJS?

Reactive Programming - What is RxJS?

4:31 rx

This lesson introduces Reactive Programming using RxJS in simple terms, with a concrete example and no scary terminology.

js tutorial about Iterating Over an Immutable.js Map()

Iterating Over an Immutable.js Map()

6:31 js PRO

Immutable.js provides several methods to iterate over an Immutable.Map(). These also apply to the other immutable structures found within the Immutable.js family, such as Set and List. The primary methods are map and forEach, but we will also cover filter and groupBy.

js tutorial about Introducing Reduce: Reducing an Array into an Object

Introducing Reduce: Reducing an Array into an Object

3:59 js

We'll look at using array.reduce to transform an array of strings into an object that counts the occurrence of each string in the array.

js tutorial about Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

3:54 js

Learn how to avoid mutating arrays using concat(), slice(), and the ES6 array spread operator.

js tutorial about What is JavaScript Function Currying?

What is JavaScript Function Currying?

5:34 js

Currying is a core concept of functional programming and a useful tool for any developer's toolbelt. In this lesson, John walks through the definition of currying and its practical usage.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?