Functional Javascript

Watch User Created Playlist (28)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Learn to flatten and flatmap arrays with reduce

P

Differences between the Immutable.js Map() and List()

P

Working with Subsets of an Immutable.js Map()

P

Iterating Over an Immutable.js Map()

P

Querying an Immutable.js Map()

P

Modifying an Immutable.js Map()

P

Creating an Immutable Object Graph with Immutable.js Map()

P

Using the map method with Observable

Chaining the Array map and filter methods

The Array map method

Safely inspect nested objects with Reduce

P

Compose functions with reduce

P

Avoid common mistakes when working with reduce

P

Learn how to use the optional reduce arguments

P

Use reduce to filter and map over large datasets

Reduce an array into a single object

Transform an array into a single value using reduce

Transforming Immutable Data with Reduce

P

Array.prototype.reduce in JavaScript by example

Immutable.Record() as data models

P

Lightning Fast Immutable.js Equality Checks with Hash Codes

P

Maintaining Order in Immutable.js Objects

P

Simple Undo/Redo with Immutable.js Data Structures

P

Converting Immutable.js Structures to Javascript and other Immutable Types

P

Exploring Sequences and Range() in Immutable.js

P

Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

P

Manage Application State with Immutable.js

Immutable.js: Introduction - Easing the Pains of Mutability

js tutorial about Learn to flatten and flatmap arrays with reduce

Learn to flatten and flatmap arrays with reduce

8:06 js PRO

Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single array, the dreaded flatmap allows you to convert an array of objects into an array of arrays which then get flattened, and reduceRight allows you to invert the order in which your reducer is applied to your input values.

js tutorial about Differences between the Immutable.js Map() and List()

Differences between the Immutable.js Map() and List()

4:02 js PRO

The Immutable.js Map() is analogous to a Javascript Object or Hash since it is comprised of key-value pairs. The Immutable.js List() is analogous to a Javascript Array and contains many of the same native methods. Let's compare the two and dive into the basics of List().

js tutorial about Working with Subsets of an Immutable.js Map()

Working with Subsets of an Immutable.js Map()

7:43 js PRO

Immutable.js offers methods to break immutable structures into subsets much like Array--for instance it has the all powerful slice()--and unlike Array it offers functional methods like take() and skip(). You get the best of both the imperative and functional worlds.

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 Querying an Immutable.js Map()

Querying an Immutable.js Map()

4:47 js PRO

Learn how to query an Immutable.Map() using get, getIn, has, includes, find, first and last. These are powerful operators that make finding data in an object graph pain free.

js tutorial about Modifying an Immutable.js Map()

Modifying an Immutable.js Map()

5:22 js PRO

We will now look at five methods that modify an Immutable.Map(). I highly encourage you to visit the Immutable.js documentation where I am now. They are set, delete, clear, update and merge. These are used often, so let's get to know them well.

js tutorial about Creating an Immutable Object Graph with Immutable.js Map()

Creating an Immutable Object Graph with Immutable.js Map()

3:15 js PRO

Learn how to create an Immutable.Map() through plain Javascript object construction and also via array tuples.

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 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 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 Safely inspect nested objects with Reduce

Safely inspect nested objects with Reduce

6:29 js PRO

A common problem when dealing with some kinds of data is that not every object has the same nested structure. lukeskywalker.parents.father.isjedi works, but anakinskywalker.parents.father.isjedi throws an exception, because anakin_skywalker.parents.father is undefined. But we can reduce a path to provide safe default values and avoid exceptions when walking the same path on non-homogenous objects - watch to learn how! :)

js tutorial about Compose functions with reduce

Compose functions with reduce

8:19 js PRO

Javascript has first-class functions which means that any function can stored, passed around, and returned just like an Object can. This allows for a lot of flexibility with how you call functions. This allows us to use array reduction to create functional pipelines by composing arrays of functions.

js tutorial about Avoid common mistakes when working with reduce

Avoid common mistakes when working with reduce

4:17 js PRO

In this lesson, we will be looking at two common mistakes programmers make when working with reduce. We will see why we always need to pass in an initial value for our accumulator as well as return the accumulator.

js tutorial about Learn how to use the optional reduce arguments

Learn how to use the optional reduce arguments

4:47 js PRO

Sometimes we need to turn arrays into new values in ways that can't be done purely by passing an accumulator along with no knowledge about its context. Learn how to reduce an array of numbers into its mathematical mean in a single reduce step by using the optional index and array reducer arguments.

js tutorial about Use reduce to filter and map over large datasets

Use reduce to filter and map over large datasets

8:32 js

Learn how two common array functions - map() and filter() - are syntactic sugar for reduce operations. Learn how to use them, how to compose them, and how using reduce can give you a big performance boost over composing filters and maps over a large data set.

js tutorial about Reduce an array into a single object

Reduce an array into a single 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 Transform an array into a single value using reduce

Transform an array into a single value using reduce

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 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 Immutable.Record() as data models

Immutable.Record() as data models

5:33 js PRO

The Immutable.js Record() allows you to model your immutable data much like you would model data with native Javascript classes or objects. It differs from native classes because it cannot be mutated after it's creation and it always has a default value. It's an excellent construct in which to piece together your stores, be them Flux or some other storage implementation. Let's quickly create an Immutable Record().

js tutorial about Lightning Fast Immutable.js Equality Checks with Hash Codes

Lightning Fast Immutable.js Equality Checks with Hash Codes

2:27 js PRO

While Immutable.js offers .is() to confirm value equality between iterables it comes at the cost of referencing each key and value in both objects. For lightning fast equality checks, Immutable.js can produce a hash code based on an iterable's content. If two iterables have the same content, their hash codes will be the same. It's worth noting that this technique is unsuitable for mission critical application development since there is a chance, however slight, that checksums like these might collide. This is outlined here: https://en.wikipedia.org/wiki/Collision_(computer_science)

js tutorial about Maintaining Order in Immutable.js Objects

Maintaining Order in Immutable.js Objects

8:08 js PRO

Immutable.js's Map doesn't promise iteration order after a set() operation. When we need a guarantee for iteration order, we can use OrderedMap. This comes at a slight performance cost, or for you computer science people, it is amortized at an unstable O(log32 N). Let's explore ordering.

js tutorial about Simple Undo/Redo with Immutable.js Data Structures

Simple Undo/Redo with Immutable.js Data Structures

8:35 js PRO

Implementing Undo/Redo can be tricky business. Consider two strategies to simplify implenting undo/redo: 1) use immutable data 2) react to that data with a top-down approach. Let's build a simple drawing app that will draw circles on a canvas and allow us to undo/redo our drawing.

js tutorial about Converting Immutable.js Structures to Javascript and other Immutable Types

Converting Immutable.js Structures to Javascript and other Immutable Types

5:57 js PRO

Immutable.js provides several conversion methods to migrate one structure to another. Each Immutable.js class contains a prefixed "to" method like Map.toList(), Map.toSet(), etc. Converting these types sometimes results in a loss of data, as we will see when converting from Map to List.

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 Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

6:39 js PRO

Immutable.js offers the fromJS() method to build immutable structures from objects and array. Objects are converted into maps. Arrays are converted into lists. The fromJS() method can also take a reviver function for custom conversions.

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 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.

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