DEV Community: Drew

Merge Functions

Drew — Fri, 22 Jan 2021 11:08:24 +0000

Part of a series to track the 90-Day Beat Down

I recently got hired for a new gig. They hired 2 of us on a 90-day prove-yourself contract. Pretty sure this is a "competition" of sorts to see which of us can rise to the top.

This is how I internalize things I review and learn.

Let's Combine Multiple Async Behaviors

Async

Wait- what's an async behavior?

Let's get the exact description from MDN:

Async functions can contain zero or more await expressions. Await expressions suspend progress through an async function, yielding control and subsequently resuming progress only when an awaited promise-based asynchronous operation is either fulfilled or rejected. The resolved value of the promise is treated as the return value of the await expression. Use of async / await enables the use of ordinary try / catch blocks around asynchronous code.

What does that even mean? It's basically a giant game of redlight, greenlight.

Do something
- red light!
- ...waiting for completion...
- green light!
Do the next thing
- red light!
- ...waiting for completion...
- green light!
Do the next thing, etc.

Now let's think back to post 1. Our goal was to do a better job of writing customizable, reusable functions by a) returning functions from functions and b) using functions as parameters (providing listeners or callbacks).

Let's take a look at a lot of code. Go slowly, review this chunk, and see if you notice any patterns:

let addOneListener = (selector) => (eventType) => (listener) => {
  let element = document.querySelector(selector);
  element.addEventListener(eventType, listener);

  return () => {
    element.removeEventListener(eventType, listener);
  };
};

let createTheInterval = (time) => (listener) => {
  let id = setInterval(listener, time);
  return () => {
    clearInterval(id);
  };
};

let addBtnListener = addOneListener("#button");
let addBtnClickListener = addBtnListener("click");

let oneSec = createTheInterval(1000);

let cancelOneSecond = oneSecond(() => {
  console.log("one")
})

cancelOneSecond()

let twoSeconds = createInterval(2000)
twoSeconds(() => {
  console.log("two")
})

We have ^^^ a number of functions that all expect to receive a listener as a parameter.

Now that we see this pattern, we can start combining functions in interesting ways.

Broadcasters (accepting the listeners)

I'm going to refer to functions that accept listeners as broadcasters, because that's how I was taught. You may also hear these named sources or other words that describe things that push out values. For now, a broadcaster is a function that accepts a listener.

let comboFunction = (broadcaster1, broadcaster2) => listener => {
  let cancel1 = broadcaster1(listener)
  let cancel2 = broadcaster2(listener)

  return () => {
    cancel1()
    cancel2()
  }
}

This is a lot of code (again), so let's break it down:

comboFunction is a variable that is declared
we initialize this variable and assign it the value of a function declaration
that function accepts 2 additional functions as parameters (our broadcasters)
our function is a variable until we decide to execute it like so:

let timePass_or_eventHandle = comboFunction(addBtnClickListener, oneSec);
let cancelBoth = timePass_or_eventHandle(() => {
  console.log("time pass or event happened ");
});

Try using this code all combined code.

By initializing the variable cancelBoth and assigning it the value of timePass_or_eventHandle, we actually cause the function to execute.

What happens if we add cancelBoth();

Nothing! The "time pass" doesn't reach the console and the clicked button does nothing as well.

Next time we can add in some awesome lodash functionality to help make our function wrapping a bit more concise and readable.

JS Function Wrapping

Drew — Thu, 21 Jan 2021 10:45:34 +0000

Part of a series to track the 90-Day Beat Down

I recently got hired for a new gig. They hired 2 of us on a 90-day prove-yourself contract. Pretty sure this is a "competition" of sorts to see which of us can rise to the top.

This is my way of internalizing what I learn along the way.

Shore Up the Foundation with JavaScript

Callbacks and Closure Patterns

Sometimes javascript apis are inconsistent in how they act. By wrapping them in functions, we have more control, more customization, and stronger callbacks...

let createTimeout = (time) => {
    setTimeout(() => {
        console.log('done');
    }, time)
};

createTimeout(100);

This mostly works just fine, but with small amounts of time, it becomes increasingly difficult to know if the timeout is actually occurring. Let's wrap it in another fatarrow function:

let createTimeout = (time) => () => {
    setTimeout(() => {
        console.log('done');
    }, time);
};

let timeout1s = createTimeout(1000);
let timeout2s = createTimeout(2000);
let timeout3s = createTimeout(3000);
timeout1s();
timeout2s();
timeout3s();

^^^ that code provides us with more customization. But it does not give us more control over what happens within setTimeout. What if we wanted to differentiate the callback behavior based on the time parameter? That would mean our code needed to act one way for 1s, a different way for 2s, etc.

let createTimeout = (time) => (callback) => {
    setTimeout(callback, time);
};

let timeout1s = createTimeout(1000);
let timeout2s = createTimeout(2000);
let timeout3s = createTimeout(3000);
// call the functions AND provide unique callbacks
timeout1s(() => {
    console.log("one");
});
timeout2s(() => {
    console.log("two");
});
timeout3s(() => {
    console.log("three");
});

This puts us on track to deal with async behavior more consistently. But a huge part of async behavior is building in an exit strategy. "What if we need to cancel mid-function?"

let createTimeout = (time) => (callback) => {
    // setTimeout returns an id we can use
    let id = setTimeout(callback, time); 
    // return that from our function so we can access it
    return id;
};

let timeout1s = createTimeout(1000);
let timeout2s = createTimeout(2000);
let timeout3s = createTimeout(3000);

let id1s = timeout1s(() => {
    console.log("one");
});

id1s now holds the value of the setTimeout id that was created, and we can clear it with clearTimeout(id1s).

But if we want even more control over our code (which we do), we can actually continue to wrap our functionality inside more functions!

let createTimeout = (time) => (callback) => {
    let id = setTimeout(callback, time);
    // returns a function to capture **behavior**
    return () => clearTimeout(id1s);
};

let timeout1s = createTimeout(1000);
let timeout2s = createTimeout(2000);
let timeout3s = createTimeout(3000);

let cancel1s = timeout1s(() => {
    console.log("one");
});
cancel1s();
timeout2s(() => {
    console.log("two");
});

The big picture concepts I'm trying to capture (and use moving forward) are:

You increase code flexibility by returning functions from within functions
You increase flexibility and customization by passing functions in to other functions

Let's go through the same process with an event listener
End goal:

let addListener = selector => eventType => listener => {
    let element = document.querySelector(selector);
    element.addEventListener(eventType, listener);
    return () => {
        element.removeEventListener(eventType, listener);
    }
};

let addButtonListener = addListener('button');
let addButtonClickListener = addButtonListener("click")
let removeBtnClickListener = addButtonClickListener(() => {
    console.log('button clicked');
})
// removeBtnClickListener();

How did we get there?

Each piece of the function addListener is returning another function.
Anytime we invoke a piece of that chain, we're getting a function returned to us in addition to the function being executed.

Let's break it down:

let addListener = selector => eventType => listener => {
    let element = document.querySelector(selector);
    element.addEventListener(eventType, listener);
    return () => {
        element.removeEventListener(eventType, listener);
    }
};

when we call addListener('button'); what do we have?

let addButtonListener = addListener('button');
console.log(addButtonListener);
let addButtonClickListener = addButtonListener("click")
console.log(addButtonClickListener);
let removeBtnClickListener = addButtonClickListener(() => {
    console.log('button clicked');
});
console.log(removeBtnClickListener);

Those logs in the console are pretty informative:

Each thing logged is a function! and the first two return another function! We now have control over how addEventListener interacts with other APIs, like setTimeout, gives us confidence in our pattern moving forward

Place this code in a js file, add that file into a simple html with 1 btn, and see what happens:

// index.html
<!DOCTYPE html>
<html lang="en">
    <body>
        <button id="button">Click My Dick</button>
        <script src="./index.js" type="text/javascript" />
    </body>
</html>

and

//index.js
let addButtonListener = addListener('button');

let addButtonClickListener = addButtonListener("click")

let removeBtnClickListener = addButtonClickListener(() => {
    console.log('button clicked');
})

// removeBtnClickListener();

If the remove call is commented out, we see the clicks log to the console. With the remove un-commented, the listener is removed before we (the user) ever have a chance to click anything.

Always check devTools to confirm these things. console.log can only take you so far and is annoying at best):

Just to reiterate the goal of this review:

Use functions to return other functions. Also, pass functions into other functions. This function wrapping will provide more code control, flexibility, and even reusability,