September 2017

With ES6, we were given a new tool: generators. In a normal function, there is only one entry point: the invocation of the function itself. A generator allows you to pause the execution of a function and resume it later. Generators are useful when dealing with iterators and can simplify the asynchronous nature of Javascript.


So, how would we define a generator, compared to a normal function? You declare a generator function by using the * ( asterisk ) operator after the function keyword:

function* awesomeGenerator(){

To pause the execution inside the generator, we use the statement yield:

function* awesomeGenerator(){
  yield 'Hey friend' // We pause the execution here
  console.log('Back again') // When we resume, we are here

next() method

A generator gives you a next() method, which is used to start/resume the execution. This method returns an object with two keys:

  value: [ yielded value ],
  done: [ true if we reach the end]

Let’s see a very simple generator in action:

function* groceriesGenerator(){
  yield 'Eggs'
  yield 'Tomatoes'
  yield 'Milk'
  return 'Paper Bag'

const groceries = groceriesGenerator()

console.log( // [1]
console.log( // [2]
console.log( // [3]
console.log( // [4]

// [1] { value: 'Eggs', done: false }
// [2] { value: 'Tomatoes', done: false }
// [3] { value: 'Milk', done: false }
// [4] { value: 'Paper Bag', done: true }

At our first call, our groceriesGenerator reached our first yield statement and paused, returning the value Eggs to the caller. Our second next() resumed the execution at the second yield statement, pausing it again and returning Tomatoes

Our last next() terminates the generator, returns Paper Bag and sets done to true.

As iterators

In the introduction, I said that generators could help to implement iterators. Let’s see an example:

function* iterationGenerator( arr ){
  for( let i = 0; i < arr.length; i++ ){
    yield arr[i]

const iterator = iterationGenerator( ['John', 'Sarah', 'Joe', 'Emily'])

let current =

while( !current.done ){
  console.log( current.value )
  current =

// John
// Sarah
// Joe
// Emily

In this example, you can see how the state of the generator is maintained accross invocations. Whne we resume the execution by calling next(), the variables and loops are the same.

Pass values back to generators

Finally, you can also pass a value back to a generator. Here is a example:

function* twoWayGenerator(arr){
  for( let i = 0; i < arr.length; i++ ) {
    const symbol = yield 
    console.log(`${arr[i]} ${symbol}`)

const prices = twoWayGenerator([10, 23, 12])'€')'£')'$')

// 10 €
// 23 £
// 12 $

Here, our first next() will not print anything because we pause the execution before the first console.log. The second next() is called with an argument. This argument is provided as the returned value of the yield statement. We store this value inside the symbol variable and use it next.

You can also force a generator to throw an error:
prices.throw( new Error('Invalid Amount'))

//  const symbol = yield
//                   ^
//  Error: Invalid Amount

That’s it for a quick and dirty introduction about generators. In the next article, we will go a bit deeper and explore how generators can help us control the asynchronous flow of Javascript.

Read more


Insert another intro about functional programming…


Composition is about creating small functions and creating bigger and more complete functions with them. Think of a function as a brick, composition is how you would make those bricks work together to build a wall or a house.

You might have encoutered composition in mathematics, written like so: f(g(x)). The function f is composed with the function g of x. Or f after g equals f of g of x. After because we evaluate the functions from right to left, from the inside to the outside:

f <-- g <-- x

The output of the precedent function becomes the input of the next. x is the input of g. The output of g(x) becomes the f input.


Ok, let’s code something then. Imagine that you are a company that is in charge of manipulating text. You receive a bunch of words, and your customers want it back in a certain way.

A client comes at you with a text and says:

I want the words shorter than 5 characters to be uppercased.

We create three functions to execute those actions. One function takes the text and return words in lowercase. The second function look for short words and upperCase them. Finally, the third recreates the text from the array received.

function words( text ){
  return String( text )

function shortUpper( words ){
  return word => {
    if( word.length < 5 ){
      return word.toUpperCase()
    } else {
      return word

function createText( array ){
  return array.join(' ')

The client sends in the text and we make our functions work:

const text = 'Hello! My name is Damien and I love Javascript. Make this exciting.'

const allWords = words(text)
const upperText = shortUpper( allWords )
const newText = createText( upperText )

//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

Great! The client got what he wanted. The problem is: our workers have to manually take the output of the words and shortUpper functions, carry them to the next function, and turn on the function’s engine on. That’s a lot of work, can we automate this?

Cue dramatic music

Enter composition

We want the function’s outputs to be sent to the next function without having to do it ourselves. Like so:

const newText = createText( shortUpper( words( text ) ) )

//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

We read this from left to right, but, as I mentioned earlier, we execute from the inside to the outside:

createText <-- shortUpper <-- words <-- text

We even decide to create a function for this popular demand:

function upperLessThan5( text ){
  return createText( shortUpper( words( text) ) )

upperLessThan5( text )
//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

Our company has another popular demand: replacing ‘.’ by ‘!!!’ while making the first character of each word uppercase. We have some functions to handle that:

function exclamationMarks( words ){
  return word => word.replace('.', '!!!'))

function upperFirstChar( words ){
  return word => {
    return `${word[0].toUpperCase()}${word.substr(1)}`

function firstCharUpperExclamation( text ){
  return createText( exclamationMarks( upperFirstChar( words( text ) ) ) )

firstCharUpperExclamation( text )
//Hello! My Name Is Damien And I Love Javascript!!! Make This Exciting!!!

Cool, we’re able to compose functions by combining several smaller functions!

Going nuts!

The company’s CEO couldn’t be happier. The factory transforms text very fast thanks to composing. But he wants more!

What if we had a function that took all the functions as inputs and just made composition happened by itself? We could call it compose.

The engineers gather up and brainstorm. They decide to experiment with the two products they already have. They come up with this:

function composeThreeFunctions(fn3, fn2, fn1){
  return function composed( firstValue ){
    return fn3( fn2( fn1( firstValue ) ) )

function composeFourFunctions(fn4, fn3, fn2, fn1){
  return function composed( firstValue ){
    return fn4( fn3( fn2( fn1( firstValue ) ) ) )

const upperLessThan5 = composeThreeFunctions( createText, shortUpper, words )
upperLessThan5( text )

//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

const exclamationFirstCharUpper = composeFourFunctions( createText, upperFirstChar, exclamationMarks, words)

exclamationFirstCharUpper( text )

//Hello! My Name Is Damien And I Love Javascript!!! Make This Exciting!!!

Our functions takes all the functions needed as parameters. It returns a function that takes the original value as parameters and return all the functions composed in the proper order. Be careful about the order! We execute from the inside to the outside. The last function you specified will be the first executed. How do the function remembers all the functions from the original function? Closure baby!

Now, we can compose whatever we want with three or four functions. But the CEO wants something generic.

What if we need to compose only two functions? or five? ten? I don’t want an infinite amount of functions sitting in my factory. Can you create one function that just take an arbitrary number of functions and compose?

Finally, the engineers come up with the compose function:

function compose( ...fns ){
  return function composed( value ) {
    let listOfFunctions = fns.slice()
    while( listOfFunctions.length > 0 ){
      value = listOfFunctions.pop()( value )

    return value

const upperLessThan5 = compose( createText, shortUpper, words )
upperLessThan5( text )

//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

const exclamationFirstCharUpper = compose( createText, upperFirstChar, exclamationMarks, words )
exclamationFirstCharUpper( text )

//Hello! My Name Is Damien And I Love Javascript!!! Make This Exciting!!!

The compose function takes a list of functions as a parameter. We use the rest operator (…) to gather that as an array. We return a function with the original value as parameter. Inside of this function, we create a local copy of the functions array ( how? CLOSUUUUUURE ). Then we call the last function of the array with the output of the last function. pop() returns the last element of the array and remove it from the array. The output of the last listOfFunctions element becomes the input of the next one. When our array is empty, we return the final value.

I mean, this is just amazing. Now we can go absolutely crazy.

Moar examples!!!

I’m just playing around now. But the sky is the limit.

const upperLessThan5Exclamation = compose( createText, shortUpper, exclamationMarks, words )
const exclamationUpperLessThan5 = compose( createText, exclamationMarks, shortUpper, words )

// Same thing, different order

upperLessThan5Exclamation( text )
exclamationUpperLessThan5( text )
//hello! MY NAME IS damien AND I LOVE javascript!!! MAKE THIS exciting!!!
//hello! MY NAME IS damien AND I LOVE javascript!!! MAKE THIS exciting!!!

function replaceAbyE( words ){
  return word => {
    return word.replace(/a/gi, 'e')

function replaceJavascriptWithPython( words ){
  return word => {
    if( word == /javascript/i ){
      return 'Python'
    } else {
      return word

const everything = compose( createText, shortUpper, exclamationMarks, upperFirstChar, replaceAbyE, replaceJavascriptWithPython, words )

everything( text )
//Hello! MY NEME IS Demien END I LOVE Python MEKE THIS Exciting!!!

Well, I’ll stop there. I want to see how librairies like Ramda implement composition, but this is really a fun way to write code.

Read more



Well, time to teach myself something I don’t understand again…
In this article, we will explore a technique called currying. Currying is another concept in functional programming. It goes as follow: when a function expects several arguments, we break it down into successive chained functions that each take a single argument.

We reduce the arity of each function to one ( arity is the arguments length of a function ). Let’s see some examples.
Continue reading Explaining currying to myself

Read more

What I worked on

It has been more difficult to find the time this week. I managed to squeeze in a few hours this week-end. So, the catalog is starting to take form. The game’s cards are classified by classes and sorted by mana cost. I added previous/next buttons to switch pages ( 14 cards are displayed on each page ). I had a little challenge when I had to switch from one character to the next. When you click next and the current character has no more cards, the application switch to the next character and displays its cards. Took me some time to figure out though.

I mostly worked on the HomePage this week-end. I styled the navigation bar slightly, and I added buttons for the Add new game and Create new deck actions. The new game action opens a modal where the user can choose 4 things:

  • its class
  • its opponent’s class
  • its deck
  • the outcome of the deck

The modal is done and the front-end logic is handled.

Next week goals and code

For this week, I will try to finish the new game functionality by inserting them in a database and listing them on the front-end. I think the future statistics page will display a list of the latest games saved. Then, I will start the creation of the new deck functionality. This might take a while. Not quite sure how a want to do it yet. I think I will add an action on each card in the catalog to allow the user to add the card to a deck.

The code can be found here

Read more


I write because it helps me retain informations. Whatever subject I’m studying I force myself to put it into words, like I’m teaching someone else. My main purpose is not to teach others though, but to teach myself. We always think we understand something, until we have to explain it. Those who know, do, those who teach, do it better. I’ll try to teach myself closures in this article.
Continue reading Explaining Closures to myself

Read more

Every week, I write a blog post about my progress on side projects. I explained my thought process in this article last week. I also detailed the first project that I wanted to work on for this month.

Week One

The stack choice

For the front-end, I went with React and create-react-app. It greatly reduces the headache of getting everything set up. For the back-end, I chose express. For this project, this is more than enough to do what I want. I’ll also use MongoDB for the database and I decided to use semantic-ui for the UI framework. I used material-ui before, so I went with a different one.

Setting things up

There are two different parts in this project. The root of the project takes care of the server side ( express + mongodb ). Inside this root folder, a /client folder holds the front-end that was set up thanks to create-react-app.

The first difficulty that I had was to connect both parts. How do I inform the front-end and back-end to listen to each other with the create-react-app setup?

Thankfully, the documentation links to a tutorial that explains how to make create-react-app works with an API. Right here if you’re curious. The front-end and back-end are run concurrently thanks to the npm package named concurrently ( convenient ).

And after that, I could start writing my code.

Hearthstone API

To get all the informations about the game’s cards, I found an API at this url. Well documented, easy to use, and I have all the informations I needed.

React Router

This one made me sweat a bit more. I wasn’t aware a new version of React Router was released. It took me some time to understand how the new one worked. ( BrowserRouter and Switch ).

Starting to see some results

I started with the cards’s catalog. I had to figure out the call to make to get the cards I needed ( hint: collectible=1 ). After that, I filter the cards by classes and sets in the front-end. Hearthstone has a “standard” mode where only the most recent cards sets are used.

The catalog functionality will ressemble the one in the actual game. The user should be able to sort them by name, mana cost, cards set and classes…

Code and next week’s goals

Here is the code on Github

For next week, I will try to finish the catalog functionality with all the sorting and filters. If that is done, I’ll start adding some deck actions ( deck creation, adding cards to deck from catalog … )

See you next week!

Read more