DEV Community: Sal Rahman

Functors, Monads, and Promises

Sal Rahman — Sun, 29 Aug 2021 05:11:09 +0000

The JavaScript Promise is a tool for asynchronous operation. However, it is a whole lot more powerful than that.

The promise's then method can be thought to act both like map and flatMap.

Arrays, map, flatMap, Functors, and Monads

Recall that in JavaScript arrays, map allows you to take an array, and get a totally new array, with each elements entirely transformed. In other words, map takes an array (implicitly), a function, and returns another array.

So, for instance, if you wanted to derive an array of strings from an array of numbers, you would invoke the map method, by supplying a function.

Here's an example.

const nums = [ 1, 2, 3, 4, 5 ];

const strs = nums.map(n => n.toString());

// Should be:
// [ '1', '2', '3', '4', '5' ]

Because arrays implement a map method, you can think of arrays as functors.

Arrays also implement a flatMap method. Like map, it is also used to derive an entirely new array. But the key difference here is that rather than the supplied function returning the transformed value, it can return it wrapped inside an array.

const nums = [ 1, 2, 3, 4, 5 ];

const strs = nums.flatMap(n => [ n.toString() ]);
// Note: we're returning an ARRAY with a single string!

// Should be:
// [ '1', '2', '3', '4', '5' ]

In case your wondering: yes, the returned array can absolutely have more than one element in it. Those values will simply be concatenated into the final result.

Because arrays implement flatMap, you can think of arrays as Monads.

About Functors and Monads

Functors and monads are two constructs that hold value.

Functors implement map, and monads implement flatMap.

Functors and monads can be defined to hold any number of values, whether it be strictly one, two, three, or unlimited.

Promises as Functors and Monads

The JavaScript promise represents a construct that holds a single value.

A promise's then method acts as both map, and flatMap.

The method then, like map, and flatMap, will always return a promise.

With then, you can have the function return a non-promise value. This will have then act like an array's map method. Or, you can have that function return a promise. This will have then act like an array's flatMap method.

Here is then acting like map.

promise.then((x) => {
  return x + 42;
});

Here is then acting like flatMap.

promise.then((x) => {
  // Note: Promise.resolve will return a promise.
  return Promise.resolve(x + 42);
});

Monad laws with promise

Monads have laws. Think of them like Newton's three laws of motion.

These are:

left-dentity
right-identity
associativity

Because promises can be interpreted as monads, you most certainly can use then to follow the three laws.

Let's demonstrate. First, let's assume that the functions f and g accept a value and returns a promise, and p is a promise.

Left-identity

Promise.resolve(x).then(f)

// Is equivalent to

f(x)

Right-identity

p.then(Promise.resolve)

// Is equivalent to

p // I'm serious. that's all there is to it.

Associativity

p.then(x => f(x).then(g))

// Is equivalent to

p.then(f).then(g)

Monadic error handling in Promise

Traditionally flatMap (the then in promises) is very instance-specific. After all, you can substitute the name flatMap with whatever name you want, so long as the instance behaves like a monad. And in the case of promises, flatMap is called then.

Other than the name (then instead of flatMap), the way it is implemented can be different from instance to instance.

And in the case of Promises, it can be implemented so that then does not evaluate if the Promise holds no value other than an error.

For example

Promise.reject(new Error('Some error'))
  .then(() => {
    console.log('Wee!');
    // Trust me. Nothing will happen here.
  });

In order to do anything with the promise, you will need to invoke the catch method. The catch method will return a promise, just like then.

However, while then will only evaluate the function if the promise holds a value, catch will evaluate the function if the promise holds an error.

Promise.reject(new Error('Some error'))
  .then(() => {
    console.log('Wee!');
    // Trust me. Nothing will happen here.

    return Promise.resolve(1);
  })
  .catch(() => {
    console.log('Caught an error!')
    return Promise.resolve(42);
  })
  .then(x => {
    console.log(x);
    // Will log 42, not 1.
  });

Interestingly enough, the monad laws will also work with catch, as well as then.

Conclusion

So this article went over what a monad is, and how promises can be thought of as monads. To put it in simple terms, an object can be thought of as a monad, as long as it implements some method that looks like flatMap.

Promises and async functions

Sal Rahman — Thu, 05 Aug 2021 21:12:20 +0000

With JavaScript, some operations are asynchronous, and many of these asynchronous operations are signalled via promises.

For instance, fetching data from an API is an asynchronous operation; you need to wait until data from the API has been fully downloaded. So, invoking fetch doesn't give you the data. Instead, it gives you a promise, from which you will need to have another function be called to receive said value, as the first parameter of that function.

With a promise, to get the result the instance that is available, you invoke the then method, and pass in said function as the first parameter.

Here's an example:

const fetchPromise = fetch('http://example.com/some-api/');


fetchPromise.then(response => {
  // Do something with `response` here.
  //
  // Note: the `response` object doesn't actually contain the data. You will
  // need to invoke either `response.text()` to extract the data into a string
  // object, or `response.json()` to extract the data into an object, if the
  // incoming data is valid JSON.
});

With fetch, we have access to a response object.

But from the response object, we will need to extract the value. And that is done via invoking either response.text(), or response.json(). Both of these methods will yield a promise!

So here's what the above code would look like if we wanted to extract the textual value of the response.

const fetchPromise = fetch('https://example.com/some-api/');


fetchPromise.then(response => {
  const textPromise = response.text()

  textPromise.then(value => {
    // The paramter `value` will be the extracted string.
  });
});

But it gets better.

You know how in arrays, there's a flatMap function, and it can accept as return value another array?

The then method in promises acts like flatMap, where you can return another promise, from the callback function in then.

So, to extract the text value, you can invoke the above function like so:

const fetchPromise = fetch('https://example.com/some-api/');


fetchPromise.then(response => {
  const textPromise = response.text();

  return textPromise;
});

Above, we merely returned the promise. But how do we extract the value?

Before going into that, also note this important fact: the then method will always return a promise!

And that promise will—at a high level—be exactly equal to what is returned by the callback in the then.

So, to extract the text, the above code would look like so:

const fetchPromise = fetch('https://example.com/some-api/');


fetchPromise.then(response => {
  const textPromise = response.text();

  return textPromise;
}).then(text => {
  // The value will be in `text`
});

Since we've established where promises typically come from, let's shorten the above code.

fetch('https://example.com/some-api/')
  .then(response => response.text())
  .then(text => {
    // The value will be in `text`
  });

Let's say the above API yields a string, and we can use that string to invoke another API call. Let's do that.

We can have numerous ways to do that.

We can nest the invocations.

fetch('https://example.com/some-api/')
  .then(response => {
    return response.text()
      .then(text => {
        return fetch(`https://example.com/some-api/{text}`)
          .then(response => response.text());
      });
  })
  .then(text => {
    // The value will be in `text`
  });

We can nest some of the invocations. Perhaps to group the "response-to-text extraction" logic.

fetch('https://example.com/some-api/')
  .then(response => response.text())
  .then(text => {
    return fetch(`https://example.com/some-api/${text}`)
      .then(response => response.text());
  })
  .then(text => {
    // The value will be in `text`
  });

Or have everything be sequential.

fetch('https://example.com/some-api')
  .then(response => response.text())
  .then(text => {
    return fetch(`https://example.com/some-api/${text}`)
  })
  .then(response => response.text())
  .then(text => {
    // The value will be in `text`
  });

Async functions

OK, the above invocation of then is cumbersome, in many situations. So, a solution to limit the number of then invocations would be to use an async function.

An async function looks like this:

async function something() {
  return 42;
}

An async function doesn't merely return anything. It only returns a promise!

So, invoking something() will yield a promise.

something()
  .then((value) => {
    console.log(value); // should print 42
  });

It gets even better. An async function allows you to resolve promises without invoking then. You would use the await keyword for that.

So, for instance, if fetch were to be invoked inside an async function, it would look like so:

async function doSomething() {
  const response = await fetch('https://example.com/some-api');
  return response.text();
}

Since async functions return a promise, we can have the above fetch invocations simplified to this:

fetch('https://example.com/some-api')
  .then(async response => {
    const text = await response.text();
    const response2 =
      await fetch(`https://example.com/some-api/${text}`);
    return response2.text();
  });

I don't know about you, but I'm not a fan of superfluous response variables. A solution is to use then to avoid creating those variables.

fetch('https://example.com/some-api')
  .then(async response => {
    const text = await response.text();
    return fetch(`https://example.com/some-api/${text}`)
      .then(response => response.text());
  });

How to use WeakMap in JavaScript

Sal Rahman — Fri, 20 Nov 2020 17:32:01 +0000

You've seen Map.

Then there's WeakMap.

WeakMap doesn't allow you to iterate over the key-value pairs that you add to it.

const map = new WeakMap([[{}, {}], [{}, {}]]);

for (const el of map) { // TypeError: map is not iterable
  console.log(el);
}

Effectively, whatever that you store in WeakMap, you can't know what's in it.

But it does have a benefit: a WeakMap deletes key-value pairs, when the original key is garbage-collected.

Garbage Collection

Whenever you create an object, it gets added to memory. There is absolutely no way to explicitly delete it from memory.

This is where garbage-collection comes in. If you lose reference to the object, the garbage collector assumes that the object is no longer needed, freeing up memory on the user's machine.

Memory Leaks

Although JavaScript is a garbage-collected language, there are ways to cause a memory leak; that is, adding data to memory that don't end up getting freed, eating up available memory on the user's machine.

Here are three steps to cause memory leaks in JavaScript:

add data to either an array, Set, object, or Map, and then
never losing reference to any of them
never writing any logic that revisits them to delete any unneeded data

Object Purity

Before I demonstrate how to use WeakMaps, I will first highlight the importance of object purity.

Some problems require us to maintain information about an object that we have no control over. Usually, these objects come from other libraries that we did not write.

There are two approaches to maintaining information about an object (that I can think of).

The first being that we can modify the object directly. In the interest of defensive programming, modifying objects directly could introduce bugs that would be hard to debug. And if we do discover the cause of the problem, we may eventually conclude: object purity is important.

This brings us to our second approach. Instead of modifying the object directly, we can instead map the original object to some other data. There are three JavaScript primitives that we can use for this: object, Map, and WeakMap.

Object and Map requires us to write logic that revisits them to clean them up, in order to avoid memory leaks. WeakMaps, on the other hand, does not require us to revisit it to delete unneeded key-value pairs.

Using WeakMap

So with memory leaks in mind, and with our intention to maintain object purity, a WeakMap will allow us to maintain metadata, and let garbage collection take over for data we no longer care about.

Let's assume one of our problems involves maintaining a counter for the number of times an object was accessed.

const map = new WeakMap();

function dataMeta(obj) {
  let data = map.get(obj);

  if (!data) {

    // Replace this code with whatever data that you want to
    // maintain.
    data = { count: 0 };

    map.set(obj, data);
  }

  // Replace this code with whatever mutations that you want
  // to introduce.
  data.count++;

  return data;
}

And below is the above function in action.

console.log(dataMeta({})); // { count: 1 }

console.log(dataMeta({})); // { count: 1 }

const someData = {};

console.log(dataMeta(someData)); // { count : 1 }

console.log(dataMeta(someData)); // { count : 2 }

And, if we are to lose reference to someData (perhaps we've left a function's scope that held that variable), then there will be no way to retrieve that object.

So what happens? Garbage collection. The WeakMap associated with map will no longer hold the data associated with the someData.

Conclusion

JavaScript cleans up memory that is no longer in use.

However, it is still possible to introduce memory leaks in JavaScript, by adding values to unbounded collection types, more specifically, array, object, Map, and Set.

Therefore, the aforementioned primitives are not good for holding meta information about an object.

This is where WeakMap will be useful.

Powerful operators for effective JavaScript: "map" and "flat map" (not exclusive to arrays)

Sal Rahman — Mon, 02 Mar 2020 02:57:27 +0000

You have an array. Given that array's elements, you want to create an entirely new array, with the data being different from the original. For-loops have been historically the construct used for such a task.

But in this article, I aim to introduce to you to two operators, that, when composed, can yield highly expressive code, and potentially improve your productivity. These operators are map and flatMap.

Along with the map and flatMap operators, I aim to have you think about where data originates from, and how they are stored, and how one can use map and flatMap to derive richer data.

I also aim to show you that map and flatMap can be used with just about any types that "hold" data.

By composing these operators, you will be able to work with clean and rich data, that are distinct from the source data, and allow you to quickly re-think how your application uses it.

Synthesizing a new array

You have an array of objects, and each object represents a comment. Each comment object has a date field.

However, that field is a string, and—as the name would imply—represents the date.

// Dummy data.
//
// Array of comments.

const comments = [
  {
    content: 'This is awesome',
    date: '2019-10-12'
  },
  {
    content: 'This is rad',
    date: '2019-11-05'
  },
  {
    content: 'I like your post!',
    date: '2020-01-12'
  },
  // ...
]

Given this array, you want to generate a whole new array of objects, with the date field converted to a JavaScript Date object.

In older versions of JavaScript, before the map method was added to arrays, for-loops were useful.

It will involve initializing an empty array, iterating through the previous array, and pushing the new object into the new array.

// In a much, much older version of JavaScript, this is what people used to do.

const commentsWithDate = [];

for (let i = 0; i < comments.length; i++) {
  const currentComment = comments[i];

  commentsWithDate.push({

    ...currentComment,
    date: new Date(currentComment)

  });
}

Iterating through an array is a very common task. With a for-loop, it involves initializing a number to 0, checking that it's less than the length of the array, and incrementing it. This becomes repetitive, and possibly error prone.

Thus, the map method was added to JavaScript (eventually, iterables became a thing. It didn't only become an idiom, but an important part of JavaScript. And eventually, for-of-loop was also introduced). Replacing the above with an invocation of map would look like so:

// The following code achieves exactly the same outcome as the above for-loop
// example.
//
// The code below is using array.map for creating a new array.

const commentsWithDate = comments.map(comment => {

  // Rather than push to a new array, just return the new object, and it will
  // be appended into the new array for you.
  return {

    ...comment,
    date: new Date(comment)

  };

});

Bear in mind that the concept of map is not exclusive to arrays.

Any container types (even if the container type holds, by definition, only a single value) may have map implemented for it. More on this later.

Exercise

Look for code that you've written, or code on GitHub that you find that synthesize new arrays. Are they pushing to arrays for synthesis, or are they using map? If they are pushing to arrays, try to see if you can refactor it to use map.
Try to imagine any container types, other than arrays (hint: JavaScript's Map and Set collections are such types). Try to implement some map function for them

Joining things

Let's say you are re-implementing the ubiquitous instant messaging app, Slack.

Slack has a feature where you can view all (unread) messages, across all channels.

Let's re-implement that feature. But we'll keep it simple. We will only implement the ability to view all messages (whether read or unread), across all channels, at a glance.

This is what the array object will look like:

// Dummy data

const channels = [
  {
    tag: 'watercooler',
    messages: [
      {
        body: 'What\'s for lunch, today?',
        timestamp: '2020-03-01T01:42:17.836Z'
      },
      {
        body: 'I don'\t know. Let\'s have some tacos',
        timestamp: '2020-03-01T01:42:48.922Z'
      },
    ]
  },
  {
    tag: 'development',
    messages: [
      {
        body: 'Is anyone willing to get into a pair-programming session?',
        timestamp: '2020-03-01T01:43:09.339Z'
      },
      {
        body: 'Hit me up in five minutes. I may be able to help.',
        timestamp: '2020-03-01T01:44:00.590Z'
      },
    ]
  },
  {
    tag: 'product',
    messages: [
      {
        body: 'Does anyone have the analysis of last week\'s A/B test?',
        timestamp: '2020-03-01T02:04:41.258Z'
      },
      {
        body: 'It\'s in the Dropbox Paper document, titled "A/B test 2020-02',
        timestamp: '2020-03-01T02:04:49.269Z'
      },
    ]
  }
]

The channels variable is an array, that has objects, that each object has a field messages, which are the messages.

A solution would be to iterate through each channel, then iterate through each messages per channel.

const messages = [];

for (const channel of channels) {
  for (const message of channel.messages) {
    messages.push(message);
  }
}

If you wanted to avoid pushing to an array, one can use flatMap.

The flatMap method joins all arrays returned by the mapping function.

const messages = channels.flatMap(channel => {
  return channel.messages
});

Formality of flatMap

Given some container type (such as an array), there exists a method called flatMap, which accepts a callback. That callback accepts a value of the type that the container type holds. The callback returns another container, whos values may not be the same as the original container type.

someContainer.flatMap(theValue => {
  const somethingDifferent = transform(theValue);

  return createSomeContainer(theValue);
});

flatMap will unwrap each item in the container type, and invoke the callback with the value. The callback will then return a container, and flatMap will unwrap the value, and return an entirely new container.

Exercise

From the above message retrieval example, modify flatMap code so that messages have a date field that is a Date object representation of timestamp (note: just calling new Date(message.timestamp) will suffice)
Look for code that you've written, or code on GitHub that you find that synthesize new arrays. Are they pushing to arrays for synthesis, or are they using flatMap? If they are pushing to arrays, try to see if you can refactor it to use map.
Try to imagine any container types, other than arrays (hint: JavaScript's Map and Set collections are such types). Try to implement some flatMap function for them

Why not mutate the original array?

One of he most commonly touted benefits of using map and flatMap is that it avoids mutations. Many would say that mutations are major source of software faults. That's one reason.

Another reason is that although the source data has everything we need, certain aspects of our applications may require it in specific formats. And it's not just one or two aspects of our applications, but possibly dozens. Mutating the source can result in application code that is hard to manage.

Thus, you don't mutate, but synthesize. The original data remains untouched, but aspects of your code can still benefit from getting the data in the format that it expects.

Promise's `then` method are like `map` and `flatMap`

The then method in promises act like both map and flatMap.

Let's say you issue a REST API call to get an article. You can invoke then to gain access to the retrieved article. But, you can derive an entirely new promise, by returning an entirely new object.

Thus, we are using then like map.

getArticle().then(article => {
  return {
    ...article,
    date: newDate(article.date)
  };
}); // Returns a promise, with a comment that has a `Date` object attached.

Using then like flatMap, if you wanted to get comments from an article, you'd invoke it like so.

// Here are using `then` like flatMap.
getArticle().then(article => {
  const commentsPromise = getComments(article.id);

  // Here, we are using `then` like `map`.
  return commentsPromise.then(comments => {
    return comments.map(comment => {
      ...comment,
      date: new Date(comment.date)
    });
  });
});

Exercise

In the second promise example, refactor it so that the second then is no longer nested inside the callback
What if you wanted to not only return just the comments, but have the comments embedded in the post object. Would you be able to remove the nesting? If not, why?

Functors (those that work with map) and monads (those that work with flatMap)

A container type that works with the map function is a functor. Both arrays, and promises are examples of functors.

A container type that works with the flatMap function is a monad. Both arrays, and promises are examples of monads.

Actually, you can turn just about any container type in a functor and/or a monad.

Iterables as functors (map) and monads (flatMap)

Just as a primer, arrays are iterables. As iterables, you can splat them into arrays and function parameters, as well as iterate through them using for-of.

// Some silly array example.
const arr = [ 1, 2, 3 ];

for (const el of arr) {
  // `el` should be an element of arr
}

// Splat into an array
const newArr = [ ...arr ];

// Splat into function parameter
someFunction(...newArr)

But remember: all arrays are iterables, but not all iterables are arrays.

And hence you don't enjoy the luxuries afforded to you by JavaScript arrays.

However, they are a container type that you can extract their values from.

Iterables don't natively have any map or flatMap function defined. Fortunately, we can define them ourselves.

We will use generator function for that. Generators return iterables.

With generators, we can use the yield keyword to simplify our lives.

function * map(iterable, callback) {
  for (const value of iterable) {
    yield callback(value);
  }
}

Likewise, for flatMap.

function * flatMap(iterable, callback) {
  for (const value of iterable) {
    for (const subIterable of callback(value)) {
      yield value;
    }

    // Actually, we could have just used `yield * callback(value)`, but those
    // who are not initiated with generators, this may be a bit much to digest.
  }
}

Then, perhaps we have posts stored in something other than an array, but is iterable, we can map each value to get the date.

const commentsWithDate = map(comments, comment => {
  return {
    ...comment,
    date: new Date(comment.date)
  }
});

// Note: `commentsWithDate` is an iterable; not an array

Also with the example of getting messages from channels, we can do the following:

const messages = flatMap(channels, channel => {
  return channel.messages;
});

// the above variable will now be a flat iterable of messages; not channels

And, if we are to take the above example, and have it so that the messages have a date field:

const messages = flatMap(channels, channel => {
  return map(channel.messages, message => {
    return { ...message, date: new Date(message.timestamp) };
  });
});

// the above variable will now be a flat iterable of messages; not channels

A helper library: IxJS

Above, I have introduced map and flatMap for iterables.

One problem with the above, however, is it requires that we pass in the iterable as a first parameter. Composing map and flatMap results in nesting, and renders it rather difficult to follow logically which operations are happening in what order.

IxJS introduces an iterator object that exposes a pipe method. This way, you are able to compose map and flatMap.

Here's what the above code would look like with IxJS

const results = from(channels).pipe(
  flatMap(channel => channel.messages),
  map(message => ({ ...message, date: new Date(message.timestamp) }))
);

Other examples: RxJS and observables

Eventing primer

If you wanted to listen in on user mouse clicks, you can attach an event listener (in the form of a callback function) to the mouse click event.

Below is an example of listening to a click events on a button.

button.addEventListener('click', event => {
  alert(`Button clicked at coordinate (${event.screenX}, ${event.screenY}).`);
});

The paradigm applied in the application programming interface (API) above is that the button itself is an event emitter. It's an event emitter because it exposes a method named addEventListener, and you attach an event listener, provided some event tag (in this case, the 'click' event).

An alternative paradigm that browsers could have opted for instead, is that the button holds, as a property, an object that represents an event emitter (also referred to as an event stream).

So here's what the API could have looked like, had browsers instead opted for the paradigm that I am proposing:

button.clickStream.subscribe(event => {
  alert(`Button clicked at coordinate (${event.screenX}, ${event.screenY}).`);
});

In the last example, clickStream is an object. And since it's an object that has the single responsibility of notifying click events, we can grab a hold of it, and apply all sorts of operators of our choosing.

Of course, in the context of this post, it's a perfect candidate for map and flatMap.

Observables as functors (map) and monads (flatMap)

Earlier, I mentioned that you can think of promises as a container type. But if you are familiar with them, they are what are often returned after some asynchronous call (such as AJAX request, file read, etc.).

Nevertheless, it helps to think of them as container types; they asynchronously "hold" a value, that is exposed through callbacks. This is related to how then can act both like map and flatMap.

RxJS introduces a notion called "observables". Observables differ from promises in that promises represent a single instance of a value, where as observables represent a stream of values.

Like promises, we can treat observables like container types.

RxJS observables have a pipe method, that you can apply the map and flatMap functions to.

Chat application notification example using RxJS observables

Throughout this post, I made repeated references to instant messaging (IM) applications. This is because IM apps are very event-driven.

The two events that we will concern ourselves with is

when a contact logs in
when a contact sends a direct message

For our IM app, we will have a server. We interface with it via a REST or GraphQL API (detail doesn't matter), as well as WebSocket for streams of data. It's through WebSocket that we will be subscribing to events.

Through WebSocket, our server supports subscribing to these two events, for now:

users coming online
which user sent us a message (note: when the user logs out, the subscription closes)

First, we want to listen in on events of a user logging in.

Below is a simple listener to our server for that very event.

const socket = new WebSocket(`${endpoint}/log-ins`);

socket.on('message', (data) => {
  // Do whatever, here.
});

For the purposes of this article, I want to make use of RxJS, as much as possible.

With RxJS, we can convert an event emitter into an observable.

Let's convert the above socket message event into an observable.

import { fromEvent } from 'rxjs';

const socketMessageStream = fromEvent(socket, 'message');

Next, we will filter for only valid JSON messages, and convert them to valid JavaScript objects.

We will peruse the RxJS filter operator.

The purpose of the filter operator is to generate a new stream, for all events that only test true, according to a callback (that callback has a fancy term, and it's called a predicate).

Let's create an RxJS operator that will filter only for valid JSON, and transform them into objects.

/**
 * Operator for filtering out invalid JSON, and converting the messages to
 * objects.
 */
function onlyValidObjects(source) {

  return source.pipe(

    // Get all valid messages that can be converted to an object.
    filter(message => {
      try {
        JSON.parse(message.toString('utf8'));
      } catch (_) {
        return false;
      }
    }),

    // Convert those messages to 
    map(message => JSON.parse(message.toString('utf8')))

  );

}

Next create a stream of only valid events.

import { filter, map } from 'rxjs/operators';

// All messages are valid objects.
const validEvents = socketMessageStream.pipe(onlyValidObjects);

Next, we filter exclusively for messages that are login events.

import { filter } from 'rxjs/operators';

// loginStream will only have events that will exclusively hold log-in events.
const loginStream = socketMessageStream.pipe(
  filter(message => {
    return message.type === 'login';
  })
);

Finally, from the login stream, get a new stream of all new messages from all logged-in users.

For every login, this requires listening to new messages, from every user that logs in.

Listening to new messages from every new login can be their own event stream. This results in "nested" event listeners.

This is now a call for flatMap. The following demonstrates the use of flatMap to flatten out the messages stream.

import { flatMap } from 'rxjs/operators';

const messageStream = loginStream.pipe(
  flatMap(user => {

    const instantMessages = new WebSocket(`${endpoint}/messages/${user.id}`);
    return fromEvent(instantMessage, 'message').pipe(onlyValidObjects);

    // Note: we don't have to worry about logging out, since `instantMessages`
    // closes the moment the user logs out.

  })
);

Now, with messagesStream, we are free to interpret the stream however we wish.

The first of which is to send a push notification to the browser.

messageStream.subscribe(message => {
  notify(`${message.user.name} sent ${message.body}`);
});

// You can implement the `notify` function by following the "Example" section on
// MDN.
//
// https://developer.mozilla.org/en-US/docs/Web/API/notification

If we're using React, we should be able to add a counter.

Below is a React component that subscribes to the message stream, and for every message, increment the counter.

import React, { useState, useEffect } from 'react';

/**
 * A counter that increments on every new message.
 */
function Counter() {

  const [ count, setCounter ] = useState(0);

  useEffect(() => {
    const subscription = messageStream
      .subscribe(() => { setCounter(count + 1); });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return (
    <div>
      Notifications {count}
    </div>
  );

}

Exercise

As is evidenced by filter, the map and flatMap operators aren't the only RxJS operators. Consider looking into using other operators from RxJS, and see what you can eventually build (hint: consider the scan operator)
Just like RxJS observables, map and flatMap aren't the only operators for arrays. Look at the MDN documentation on arrays, and explore all the other operators available.

Takeaways

rather than relying on loops and actively mutating data, map and flatMap can be composed to synthesize new data
these operators allow you to iterate quickly by limiting yout work mostly from synthesized clean but rich data
map and flatMap can be applied to more than just arrays. As long as there exists some data holder, you can extract it, and apply operators to them, and derive new data
streams are such examples of data holders (even if data is not yet available). RxJS re-imagines how events should be handled. Thus, as demonstrated above, map and flatMap were applied to

In Closing

With map and flatMap, you are given two very powerful operators to work with data, without mutating them.

Hopefully, you will now be able to quickly iterate on new features for your JavaScript-related products (and even in other environments other than JavaScript).

Elegant iteration in JavaScript with generators

Sal Rahman — Tue, 09 Apr 2019 01:52:35 +0000

In the past, iteration in JavaScript often involved while loops, for-loops, and recursions. Eventually, programmers have devised patterns for the purposes of iterations. One such pattern is the iterator pattern.

It is such a powerful yet elegant pattern, that it became a core part of the JavaScript programming language.

In this article, I will go over generators, iterables, and iterators, and how you can apply them in retrieving data from your data structures.

Generators primer

Generators are a way to generate a series of values, or to run a series of operations. That series can either eventually stop, or go on forever.

This is how you would write a generator:

function * myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

Unlike functions, when you invoke myGenerator, you don't immediately get 1, 2, and 3. Instead, you get what is called an iterable (actually, it's an iterable-iterator. More on that later). Iterables are core to the JavaScript language.

In order to extract those values, you need to iterate through the iterable. You'd do so via the for-of loop.

const iterable = myGenerator();

for (const value of iterable) {
  console.log(value);
}

// Should give us:
// 1
// 2
// 3

But, if you wanted to turn that iterable into an array, you don't need to use for-of; instead, you can just "spread" it into an array.

const iterable = myGenerator();

const fromIterable = [...iterable];

The versatility of iterables in JavaScript is why this pattern makes it so powerful. In fact, so many constructs in JavaScript either accept iterables, or are, themselves, iterables! Arrays, for instance, are defined as iterables.

If you wanted to, you can "spread" the iterable to a list of parameters.

someSpreadable(...iterable);

Arrays aren't exclusive to function spread operator; iterables, in general, can have the spread operator applied.

With generators, not only can you "yield" a single value, but you can also "yield" the individual values enclosed in an iterable. And so, you can rewrite the above myGenerator function to "yield" the individual 1, 2, and 3, but instead from an array. Just be sure to append a * right after the yield keyword.

function * myGenerator() {
  yield * [1, 2, 3];
}

Infinite series

If you wanted to generate an infinite series, you can create a generator to do so. It will involve while loop, but once done so, you can apply whatever helpers you'd need to extract the necessary values. Let's generate the Fibonacci sequence.

function * fibonacci() {
  let previous = 0;
  let i = 1;
  while (true) {
    previous = i + previous;
    yield previous;
  }
}

And, to take the first ten elements of the sequence, we can write a generator for that.

function * take(iterable, n) {
  let i = 0;
  for (let value of iterable) {
    yield value;
    i++;
    if (i >= n) { break; }
  }
}

Afterwards, we can get the first ten values of the fibonacci sequence.

const iterator = take(fibonacci(), 10);
console.log([...iterator]);
// -> [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]

Generally, you won't re-invent the wheel. The above take implementation already exists within the IxJS library. Perhaps, in the future, there may even be helper functions built right into JavaScript.

Iterables and iterators

In the previous section, generators were discussed. Generators are functions that return iterables. Iterables are objects that have a method that is keyed by Symbol.iterator. The existence of that method signals to various JavaScript constructs that an object is an iterable. The Symbol.iterator method is what returns an iterator. The iterator object implements a next method, which itself returns an object that has the properties value and done.

The property value represents the value in the current iteration; done is a boolean value to indicate if the iterations is complete.

The following is an example implementation of an object that is iterable, and that returns a series of number 1, forever.

const someIterable = {
  [Symbol.iterator]() {
    return {
      next() {
        return { value: 1, done: false }
      }
    }
  }
}

In the previous section on generators, it was mentioned that generators return an iterable. That is, however, not entirely true. They actually return an "iterable-iterator". That is, they are both an iterable, and an iterator. And so, we can use a generator to define the above Symbol.iterator method.

Here's the implementation using generators.

const someIterable = {
  *[Symbol.iterator]() {
    while (true) {
      yield 1;
    }
  }
}

Both implementations are almost identical.

Data structures

If you needed to store and retrieve data efficiently, you can use a tree-like structure. However, if you needed to iterate through the values, you'd need to traverse the tree.

Generators can facilitate this. We'll use a binary search tree to demonstrate this (here's an animation for this https://youtu.be/qHCELlYY08w?t=22).

Tree data structures have nodes. It's through nodes that we traverse the entire tree. Generators can facilitate recursive descent, and so, we can have the node itself be an iterable! Both the left and right nodes are thus iterables (since they represent left and right subtrees, respectively); we can "yield" their values.

class Node {
  // ... let's ignore the implementation of `Node`

  *[Symbol.iterator]() {
    if (this.left !== null) { yield * this.left; }
    yield this.value;
    if (this.right !== null) { yield * this.right; }
  }
}

Likewise, binary search tree itself can "yield" the root node.

class BinarySearchTree {
  // ... let's ignore the implementation of the tree

  *[Symbol.iterator]() {
    if (this.root !== null) { yield * this.root; }
  }
}

We can, therefore, use the binary search tree like so:

const tree = new BinarySearchTree();

tree.insert(10, 'bar');
tree.insert(3, 'foo');
tree.insert(11, 'baz');

console.log([...tree]);
// -> [ 'foo', 'bar', 'baz' ]

Other examples of iterables

As far as iterables are concerned, it's already been mentioned that generators return iterables, that arrays are iterables, and that the above binary search tree is an example of a custom iterable. JavaScript has two other defined constructs that are iterables, which are Map, and Set

We can take Map or Set, and interact with them the same way we would with other iterables.

Conclusion

Iterables are a core feature in JavaScript. They are a way to generate values, which you can iterate through individually. They are an expressive way to expose an object's underlying set of values. Because they are a core to JavaScript, they are used heavily by many of the language's constructs, and future JavaScript revisions will continue to use iterables, in potentially new syntaxes.

So instead of relying on arrays to represent collections, consider defining an object that doubles as an iterable. This way, not only do you grant more power to the user of your code, but you'd likely save on computation by only giving what the user code asked, and only when asked.

DEV Community: Sal Rahman

Functors, Monads, and Promises

Arrays, map, flatMap, Functors, and Monads

About Functors and Monads

Promises as Functors and Monads

Monad laws with promise

Left-identity

Right-identity

Associativity

Monadic error handling in Promise

Conclusion

Promises and async functions

Async functions

How to use WeakMap in JavaScript

Garbage Collection

Memory Leaks

Object Purity

Using WeakMap

Conclusion

Powerful operators for effective JavaScript: "map" and "flat map" (not exclusive to arrays)

Synthesizing a new array

Exercise

Joining things

Formality of flatMap

Exercise

Why not mutate the original array?

Promise's then method are like map and flatMap

Exercise

Functors (those that work with map) and monads (those that work with flatMap)

Iterables as functors (map) and monads (flatMap)

A helper library: IxJS

Other examples: RxJS and observables

Eventing primer

Observables as functors (map) and monads (flatMap)

Chat application notification example using RxJS observables

Exercise

Takeaways

In Closing

Elegant iteration in JavaScript with generators

Generators primer

Infinite series

Iterables and iterators

Data structures

Other examples of iterables

Conclusion

Promise's `then` method are like `map` and `flatMap`