Thirty functions total!

This is my third article on Utility Functions Made with Reduce.

• Part one (10 functions)
• Part two (10 functions)

Altogether we now have thirty helper functions made using JavaScript's reduce. For more detail on reduce itself, consider reading my tutorial on it.

The functions listed below were inspired by the amazing RamdaJS library. I also wrote unit tests to ensure correct behavior, which you can find on my GitHub.

1. adjust

Parameters

1. index - Index of source array
2. fn - Function to apply at that index
3. list - List of items.

Description

Applies a function to the value at the given index. Returns the original array if provided index is out of bounds.

Usage

const double = (x) => x * 2;

adjust(1, double, [1, 2, 3]);
// [1, 4, 3]

adjust(4, double, [1, 2, 3]);
// [1, 2, 3]

Implementation

const adjust = (index, fn, list) =>
  list.reduce((acc, value, sourceArrayIndex) => {
    const valueToUse = sourceArrayIndex === index ? fn(value) : value;

    acc.push(valueToUse);

    return acc;
  }, []);

2. fromPairs

Parameters

1. pairs - A list of key-value pairs.

Description

Creates an object from a list of key-value pairs.

Usage

fromPairs([['a', 1], ['b', 2], ['c', 3]]);
// { a: 1, b: 2, c: 3 }

Implementation

const fromPairs = (pairs) =>
  pairs.reduce((acc, currentPair) => {
    const [key, value] = currentPair;

    acc[key] = value;

    return acc;
  }, {});

3. range

Parameters

1. from - Starting number.
2. to - Ending number.

Description

Returns a list of numbers from a given range.

Usage

range(1, 5);
// [1, 2, 3, 4, 5]

Implementation

const range = (from, to) =>
  Array.from({ length: to - from + 1 }).reduce((acc, _, index) => {
    acc.push(from + index);

    return acc;
  }, []);

4. repeat

Parameters

1. item - Item to repeat.
2. times - Number of times to repeat.

Description

Returns a list of a given value N times.

Usage

repeat({ favoriteLanguage: 'JavaScript' }, 2);

/*
[{
    favoriteLanguage: 'JavaScript'
}, {
    favoriteLanguage: 'JavaScript'
}],
*/

Implementation

const repeat = (item, times) =>
  Array.from({ length: times }).reduce((acc) => {
    acc.push(item);

    return acc;
  }, []);

5. times

Parameters

1. fn - Function to call.
2. numTimes - Number of times to call that function.

Description

Calls a given function N times. The fn provided receives the current index as a parameter.

Usage

times((x) => x * 2, 3);
// [0, 2, 4]

Implementation

const times = (fn, numTimes) =>
  Array.from({ length: numTimes }).reduce((acc, _, index) => {
    acc.push(fn(index));

    return acc;
  }, []);

6. deduplicate

Parameters

1. items - List of items.

Description

Deduplicates the items in a list.

Usage

deduplicate([[1], [1], { hello: 'world' }, { hello: 'world' }]);
// [[1], { hello: 'world' }]

Implementation

const deduplicate = (items) => {
  const cache = {};

  return items.reduce((acc, item) => {
    const alreadyIncluded = cache[item] === true;

    if (!alreadyIncluded) {
      cache[item] = true;
      acc.push(item);
    }

    return acc;
  }, []);
};

7. reverse

Parameters

1. list - List of items.

Description

Reverses a list without mutating it by returning a new list, unlike the native Array.reverse method.

Usage

reverse([1, 2, 3]);
// [3, 2, 1]

Implementation

const reverse = (list) =>
  list.reduce((acc, _, index) => {
    const reverseIndex = list.length - index - 1;
    const reverseValue = list[reverseIndex];

    acc.push(reverseValue);

    return acc;
  }, []);

8. insertAll

Parameters

1. index - Index to insert at.
2. subList - List to insert.
3. sourceList - Source list.

Description

Inserts a sub-list into a list at the given index. Appends to the end of the list if index is too large.

Usage

insertAll(1, [2, 3, 4], [1, 5]);
// [1, 2, 3, 4, 5]

insertAll(10, [2, 3, 4], [1, 5]);
// [1, 5, 2, 3, 4]

Implementation

const insertAll = (index, subList, sourceList) => {
  if (index > sourceList.length - 1) {
    return sourceList.concat(subList);
  }

  return sourceList.reduce((acc, value, sourceArrayIndex) => {
    if (index === sourceArrayIndex) {
      acc.push(...subList, value);
    } else {
      acc.push(value);
    }

    return acc;
  }, []);
};

9. mergeAll

Parameters

1. objectList - List of objects to merge.

Description

Merges a list of objects into one.

Usage

mergeAll([
    { js: 'reduce' },
    { elm: 'fold' },
    { java: 'collect' },
    { js: 'reduce' }
]);

/*
{
    js: 'reduce',
    elm: 'fold',
    java: 'collect'
}
*/

Implementation

const mergeAll = (objectList) =>
  objectList.reduce((acc, obj) => {
    Object.keys(obj).forEach((key) => {
      acc[key] = obj[key];
    });

    return acc;
  }, {});

10. xprod

Parameters

1. list1 - List of items.
2. list2 - List of items.

Description

Given a list, returns a new list of all possible pairs.

Usage

xprod(['Hello', 'World'], ['JavaScript', 'Reduce']);
/*
[
  ['Hello', 'JavaScript'],
  ['Hello', 'Reduce'],
  ['World', 'JavaScript'],
  ['World', 'Reduce']
]
*/

Implementation

const xprod = (list1, list2) =>
  list1.reduce((acc, list1Item) => {
    list2.forEach((list2Item) => {
      acc.push([list1Item, list2Item]);
    });

    return acc;
  }, []);

Want Free Coaching?

If you'd like to schedule a free call to discuss Front-End development questions regarding code, interviews, career, or anything else follow me on Twitter and DM me.

After that if you enjoy our first meeting, we can discuss an ongoing coaching to help you reach your Front-End development goals!

Thanks for reading

For more content like this, check out https://yazeedb.com!

Until next time!

This time, with a test suite!

Previously I wrote about 10 utility functions implemented with JavaScript's reduce function. It was well-received, and I walked away with an even deeper appreciation for this magnificent multi-tool. Why not try 10 more?

Many of these were inspired by the awesome libraries Lodash and Ramda! I also wrote unit tests to ensure correct behavior. You can see everything on the Github repo here.

1. pipe

Parameters

1. ...functions - Any number of functions.

Description

Performs left-to-right function composition. The first argument to a pipeline acts as the initial value, and is transformed as it passes through each function.

Implementation

const pipe = (...functions) => (initialValue) =>
  functions.reduce((value, fn) => fn(value), initialValue);

Usage

const mathSequence = pipe(
    (x) => x * 2,
    (x) => x - 1,
    (x) => x * 3
  );

mathSequence(1); // 3
mathSequence(2); // 9
mathSequence(3); // 15

For more detail, I wrote an article on pipe here.

2. compose

Parameters

1. ...functions - Any number of functions.

Description

Performs right-to-left function composition. The first argument to a pipeline acts as the initial value, and is transformed as it passes through each function.

Works like pipe, but in the opposite direction.

Implementation

const compose = (...functions) => (initialValue) =>
  functions.reduceRight((value, fn) => fn(value), initialValue);

Usage

const mathSequence = compose(
    (x) => x * 2,
    (x) => x - 1,
    (x) => x * 3
  );

mathSequence(1); // 4
mathSequence(2); // 10
mathSequence(3); // 16

For more detail, I wrote an article on compose here.

3. zip

Parameters

1. list1 - List of items.
2. list2 - List of items.

Description

Pairs items from two lists via index. If list lengths are not equal, the shorter list's length is used.

Implementation

const zip = (list1, list2) => {
  const sourceList = list1.length > list2.length ? list2 : list1;

  return sourceList.reduce((acc, _, index) => {
    const value1 = list1[index];
    const value2 = list2[index];

    acc.push([value1, value2]);

    return acc;
  }, []);
};

Usage

zip([1, 3], [2, 4]); // [[1, 2], [3, 4]]

zip([1, 3, 5], [2, 4]); // [[1, 2], [3, 4]]

zip([1, 3], [2, 4, 5]); // [[1, 2], [3, 4]]

zip(['Decode', 'secret'], ['this', 'message!']);
// [['Decode', 'this'], ['secret', 'message!']]

4. intersperse

Parameters

1. separator - Item to insert.
2. list - List of items.

Description

Inserts a separator between each element of a list.

Implementation

const intersperse = (separator, list) =>
  list.reduce((acc, value, index) => {
    if (index === list.length - 1) {
      acc.push(value);
    } else {
      acc.push(value, separator);
    }

    return acc;
  }, []);

Usage

intersperse('Batman', [1, 2, 3, 4, 5, 6]);
// [1, 'Batman', 2, 'Batman', 3, 'Batman', 4, 'Batman', 5, 'Batman', 6]

intersperse('Batman', []);
// []

5. insert

Parameters

1. index - Index to insert element at.
2. newItem - Element to insert.
3. list - List of items.

Description

Inserts an element at the given index. If the index is too large, element is inserted at the end of the list.

Implementation

const insert = (index, newItem, list) => {
  if (index > list.length - 1) {
    return [...list, newItem];
  }

  return list.reduce((acc, value, sourceArrayIndex) => {
    if (index === sourceArrayIndex) {
      acc.push(newItem, value);
    } else {
      acc.push(value);
    }

    return acc;
  }, []);
};

Usage

insert(0, 'Batman', [1, 2, 3]);
// ['Batman', 1, 2, 3]

insert(1, 'Batman', [1, 2, 3]);
// [1, 'Batman', 2, 3]

insert(2, ['Batman'], [1, 2, 3]);
// [1, 2, ['Batman'], 3]

insert(10, ['Batman'], [1, 2, 3]);
// [1, 2, 3, ['Batman']]

6. flatten

Parameters

1. list - List of items.

Description

Flattens a list of items by one level.

Implementation

const flatten = (list) => list.reduce((acc, value) => acc.concat(value), []);

Usage

flatten([[1, 2], [3, 4]]);
// [1, 2, 3, 4]

flatten([[1, 2], [[3, 4]]]);
// [1, 2, [3, 4]]

flatten([[[1, 2]], [3, 4]]);
// [[1, 2], 3, 4]

flatten([[[1, 2], [3, 4]]]);
// [[1, 2], [3, 4]]

7. flatMap

Parameters

1. mappingFunction - Function to run on each list item.
2. list - List of items.

Description

Maps each list item according to the given function, then flattens the result.

Implementation

// Kind of cheating, because we already implemented flatten ?
const flatMap = (mappingFunction, list) => flatten(list.map(mappingFunction));

Usage

flatMap((n) => [n * 2], [1, 2, 3, 4]);
// [2, 4, 6, 8]

flatMap((n) => [n, n], [1, 2, 3, 4]);
// [1, 1, 2, 2, 3, 3, 4, 4]

flatMap((s) => s.split(' '), ['flatMap', 'should be', 'mapFlat']);
// ['flatMap', 'should', 'be', 'mapFlat']

8. includes

Parameters

1. item - Item to check the list for.
2. list - List of items.

Description

Checks a list for a given element. If the element is found, returns true. Otherwise returns false.

Implementation

const includes = (item, list) =>
  list.reduce((isIncluded, value) => isIncluded || item === value, false);

Usage

includes(3, [1, 2, 3]); // true
includes(3, [1, 2]); // false
includes(0, []); // false

9. compact

Parameters

1. list - List of items.

Description

Removes "falsey" values from a list.

Implementation

const compact = (list) =>
  list.reduce((acc, value) => {
    if (value) {
      acc.push(value);
    }

    return acc;
  }, []);

Usage

compact([0, null, 1, undefined, 2, '', 3, false, 4, NaN]);
// [1, 2, 3, 4]

10. arrayIntoObject

Parameters

1. key - String to use as the new object key.
2. list - List of items.

Description

Converts an array into an object, using the given key as the new object's key.

Implementation

const arrayIntoObject = (key, list) =>
  list.reduce((acc, obj) => {
    const value = obj[key];

    acc[value] = obj;

    return acc;
  }, {});

Usage

const users = [
    { username: 'JX01', status: 'offline' },
    { username: 'yazeedBee', status: 'online' }
];

arrayIntoObject('username', users);
/*
{
  JX01: {
    username: 'JX01',
    status: 'offline'
  },
  yazeedBee: { username: 'yazeedBee', status: 'online' }
}
*/

arrayIntoObject('status', users);
/*
{
  offline: {
    username: 'JX01',
    status: 'offline'
  },
  online: { username: 'yazeedBee', status: 'online' }
}
*/

Want Free Coaching?

If you'd like to schedule a free call to discuss Front-End development questions regarding code, interviews, career, or anything else follow me on Twitter and DM me.

After that if you enjoy our first meeting, we can discuss an ongoing coaching to help you reach your Front-End development goals!

Thanks for reading

For more content like this, check out https://yazeedb.com!

Until next time!

The multi-tool strikes again.

In my last article I offered you a challenge to recreate well-known functions using reduce. This article will show you how some of them can be implemented, along with some extras!

In total we're going to look at ten utility functions. They're incredibly handy on your projects, and best of all, they're implemented using reduce! I drew lots of inspiration from the RamdaJS library for this one, so check that out!

1. some

Parameters

1. predicate - Function that returns true or false.
2. array - List of items to test.

Description

If predicate returns true for any item, some returns true. Otherwise it returns false.

Implementation

const some = (predicate, array) =>
  array.reduce((acc, value) => acc || predicate(value), false);

Usage

const equals3 = (x) => x === 3;

some(equals3, [3]); // true
some(equals3, [3, 3, 3]); // true
some(equals3, [1, 2, 3]); // true
some(equals3, [2]); // false

2. all

Parameters

1. predicate - Function that returns true or false.
2. array - List of items to test.

Description

If predicate returns true for every item, all returns true. Otherwise it returns false.

Implementation

const all = (predicate, array) =>
  array.reduce((acc, value) => acc && predicate(value), true);

Usage

const equals3 = (x) => x === 3;

all(equals3, [3]); // true
all(equals3, [3, 3, 3]); // true
all(equals3, [1, 2, 3]); // false
all(equals3, [3, 2, 3]; // false

3. none

Parameters

1. predicate - Function that returns true or false.
2. array - List of items to test.

Description

If predicate returns false for every item, none returns true. Otherwise it returns false.

Implementation

const none = (predicate, array) =>
  array.reduce((acc, value) => !acc && !predicate(value), false);

Usage

const isEven = (x) => x % 2 === 0;

none(isEven, [1, 3, 5]); // true
none(isEven, [1, 3, 4]); // false
none(equals3, [1, 2, 4]); // true
none(equals3, [1, 2, 3]); // false

4. map

Parameters

1. transformFunction - Function to run on each element.
2. array - List of items to transform.

Description

Returns a new array of items, each one transformed according to the given transformFunction.

Implementation

const map = (transformFunction, array) =>
  array.reduce((newArray, item) => {
    newArray.push(transformFunction(item));

    return newArray;
  }, []);

Usage

const double = (x) => x * 2;
const reverseString = (string) =>
  string
    .split('')
    .reverse()
    .join('');

map(double, [100, 200, 300]);
// [200, 400, 600]

map(reverseString, ['Hello World', 'I love map']);
// ['dlroW olleH', 'pam evol I']

5. filter

Parameters

1. predicate - Function that returns true or false.
2. array - List of items to filter.

Description

Returns a new array. If predicate returns true, that item is added to the new array. Otherwise that item is excluded from the new array.

Implementation

const filter = (predicate, array) =>
  array.reduce((newArray, item) => {
    if (predicate(item) === true) {
      newArray.push(item);
    }

    return newArray;
  }, []);

Usage

const isEven = (x) => x % 2 === 0;

filter(isEven, [1, 2, 3]);
// [2]

filter(equals3, [1, 2, 3, 4, 3]);
// [3, 3]

6. reject

Parameters

1. predicate - Function that returns true or false.
2. array - List of items to filter.

Description

Just like filter, but with the opposite behavior.

If predicate returns false, that item is added to the new array. Otherwise that item is excluded from the new array.

Implementation

const reject = (predicate, array) =>
  array.reduce((newArray, item) => {
    if (predicate(item) === false) {
      newArray.push(item);
    }

    return newArray;
  }, []);

Usage

const isEven = (x) => x % 2 === 0;

reject(isEven, [1, 2, 3]);
// [1, 3]

reject(equals3, [1, 2, 3, 4, 3]);
// [1, 2, 4]

7. find

Parameters

1. predicate - Function that returns true or false.
2. array - List of items to search.

Description

Returns the first element that matches the given predicate. If no element matches then undefined is returned.

Implementation

const find = (predicate, array) =>
  array.reduce((result, item) => {
    if (result !== undefined) {
      return result;
    }

    if (predicate(item) === true) {
      return item;
    }

    return undefined;
  }, undefined);

Usage

const isEven = (x) => x % 2 === 0;

find(isEven, []); // undefined
find(isEven, [1, 2, 3]); // 2
find(isEven, [1, 3, 5]); // undefined
find(equals3, [1, 2, 3, 4, 3]); // 3
find(equals3, [1, 2, 4]); // undefined

8. partition

Parameters

1. predicate - Function that returns true or false.
2. array - List of items.

Description

"Partitions" or splits an array into two based on the predicate. If predicate returns true, the item goes into list 1. Otherwise the item goes into list 2.

Implementation

const partition = (predicate, array) =>
  array.reduce(
    (result, item) => {
      const [list1, list2] = result;

      if (predicate(item) === true) {
        list1.push(item);
      } else {
        list2.push(item);
      }

      return result;
    },
    [[], []]
  );

Usage

const isEven = (x) => x % 2 === 0;

partition(isEven, [1, 2, 3]);
// [[2], [1, 3]]

partition(isEven, [1, 3, 5]);
// [[], [1, 3, 5]]

partition(equals3, [1, 2, 3, 4, 3]);
// [[3, 3], [1, 2, 4]]

partition(equals3, [1, 2, 4]);
// [[], [1, 2, 4]]

9. pluck

Parameters

1. key - Key name to pluck from the object
2. array - List of items.

Description

Plucks the given key off of each item in the array. Returns a new array of these values.

Implementation

const pluck = (key, array) =>
  array.reduce((values, current) => {
    values.push(current[key]);

    return values;
  }, []);

Usage

pluck('name', [{ name: 'Batman' }, { name: 'Robin' }, { name: 'Joker' }]);
// ['Batman', 'Robin', 'Joker']

pluck(0, [[1, 2, 3], [4, 5, 6], [7, 8, 9]]);
// [1, 4, 7]

10. scan

Parameters

1. reducer - Standard reducer function that receives two parameters - the accumulator and current element from the array.
2. initialValue - The initial value for the accumulator.
3. array - List of items.

Description

Works just like reduce but instead just the single result, it returns a list of every reduced value on the way to the single result.

Implementation

const scan = (reducer, initialValue, array) => {
  const reducedValues = [];

  array.reduce((acc, current) => {
    const newAcc = reducer(acc, current);

    reducedValues.push(newAcc);

    return newAcc;
  }, initialValue);

  return reducedValues;
};

Usage

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

scan(add, 0, [1, 2, 3, 4, 5, 6]);
// [1, 3, 6, 10, 15, 21] - Every number added from 1-6

scan(multiply, 1, [1, 2, 3, 4, 5, 6]);
// [1, 2, 6, 24, 120, 720] - Every number multiplied from 1-6

Want Free Coaching?

If you'd like to schedule a free call to discuss Front-End development questions regarding code, interviews, career, or anything else follow me on Twitter and DM me.

After that if you enjoy our first meeting, we can discuss an ongoing coaching to help you reach your Front-End development goals!

Thanks for reading

For more content like this, check out https://yazeedb.com!

Until next time!

Eric Elliott’s exceptional Composing Software series is initially what got me excited about functional programming. It's a must-read.

At one point in the series, he mentioned currying. Both computer science and mathematics agree on the definition:

Currying turns multi-argument functions into unary (single argument) functions.

Curried functions take many arguments one at a time. So if you have

greet = (greeting, first, last) => `${greeting}, ${first} ${last}`;

greet('Hello', 'Bruce', 'Wayne'); // Hello, Bruce Wayne

Properly currying greet gives you

curriedGreet = curry(greet);

curriedGreet('Hello')('Bruce')('Wayne'); // Hello, Bruce Wayne

This 3-argument function has been turned into three unary functions. As you supply one parameter, a new function pops out expecting the next one.

Properly?

I say "properly currying" because some curry functions are more flexible in their usage. Currying's great in theory, but invoking a function for each argument gets tiring in JavaScript.

Ramda's curry function lets you invoke curriedGreet like this:

// greet requires 3 params: (greeting, first, last)

// these all return a function looking for (first, last)
curriedGreet('Hello');
curriedGreet('Hello')();
curriedGreet()('Hello')()();

// these all return a function looking for (last)
curriedGreet('Hello')('Bruce');
curriedGreet('Hello', 'Bruce');
curriedGreet('Hello')()('Bruce')();

// these return a greeting, since all 3 params were honored
curriedGreet('Hello')('Bruce')('Wayne');
curriedGreet('Hello', 'Bruce', 'Wayne');
curriedGreet('Hello', 'Bruce')()()('Wayne');

Notice you can choose to give multiple arguments in a single shot. This implementation's more useful while writing code.

And as demonstrated above, you can invoke this function forever without parameters and it’ll always return a function that expects the remaining parameters.

How's This Possible?

Mr. Elliot shared a curry implementation much like Ramda's. Here’s the code, or as he aptly called it, a magic spell:

const curry = (f, arr = []) => (...args) =>
  ((a) => (a.length === f.length ? f(...a) : curry(f, a)))([...arr, ...args]);

Umm… ?

Yeah, I know... It's incredibly concise, so let's refactor and appreciate it together.

This Version Works the Same

I've also sprinkled debugger statements to examine it in Chrome Developer Tools.

curry = (originalFunction, initialParams = []) => {
  debugger;

  return (...nextParams) => {
    debugger;

    const curriedFunction = (params) => {
      debugger;

      if (params.length === originalFunction.length) {
        return originalFunction(...params);
      }

      return curry(originalFunction, params);
    };

    return curriedFunction([...initialParams, ...nextParams]);
  };
};

Open your Developer Tools and follow along!

Let's Do This!

Paste greet and curry into your console. Then enter curriedGreet = curry(greet) and begin the madness.

Pause on line 2

Inspecting our two params we see originalFunction is greet and initialParams defaulted to an empty array because we didn’t supply it. Move to the next breakpoint and, oh wait… that’s it.

Yep! curry(greet) just returns a new function that expects 3 more parameters. Type curriedGreet in the console to see what I’m talking about.

When you’re done playing with that, let’s get a bit crazier and do sayHello = curriedGreet('Hello').

Pause on line 4

Before moving on, type originalFunction and initialParams in your console. Notice we can still access those 2 parameters even though we’re in a completely new function? That’s because functions returned from parent functions enjoy their parent’s scope.

Real-life inheritance

After a parent function passes on, they leave their parameters for their kids to use. Kind of like inheritance in the real life sense.

curry was initially given originalFunction and initialParams and then returned a “child” function. Those 2 variables weren’t disposed of yet because maybe that child needs them. If he doesn’t, then that scope gets cleaned up because when no one references you, that’s when you truly die.

Ok, back to line 4…

Inspect nextParams and see that it’s ['Hello']…an array? But I thought we said curriedGreet(‘Hello’) , not curriedGreet(['Hello'])!

Correct: we invoked curriedGreet with 'Hello', but thanks to the rest syntax, we’ve turned 'Hello' into ['Hello'].

Y THO?!

curry is a general function that can be supplied 1, 10, or 10,000,000 parameters, so it needs a way to reference all of them. Using the rest syntax like that captures every single parameter in one array, making curry's job much easier.

Let’s jump to the next debugger statement.

Line 6 now, but hold on.

You may have noticed that line 12 actually ran before the debugger statement on line 6. If not, look closer. Our program defines a function called curriedFunction on line 5, uses it on line 12, and then we hit that debugger statement on line 6. And what’s curriedFunction invoked with?

[...initialParams, ...nextParams];

Yuuuup. Look at params on line 5 and you’ll see ['Hello']. Both initialParams and nextParams were arrays, so we flattened and combined them into a single array using the handy spread operator.

Here’s where the good stuff happens.

Line 7 says “If params and originalFunction are the same length, call greet with our params and we’re done.” Which reminds me…

JavaScript functions have lengths too

This is how curry does its magic! This is how it decides whether or not to ask for more parameters.

In JavaScript, a function’s .length property tells you how many arguments it expects.

greet.length; // 3

iTakeOneParam = (a) => {};
iTakeTwoParams = (a, b) => {};

iTakeOneParam.length; // 1
iTakeTwoParams.length; // 2

If our provided and expected parameters match, we’re good, just hand them off to the original function and finish the job!

That’s baller ?

But in our case, the parameters and function length are not the same. We only provided ‘Hello’, so params.length is 1, and originalFunction.length is 3 because greet expects 3 parameters: greeting, first, last.

So what happens next?

Well since that if statement evaluates to false, the code will skip to line 10 and re-invoke our master curry function. It re-receives greet and this time, 'Hello', and begins the madness all over again.

That’s recursion, my friends.

curry is essentially an infinite loop of self-calling, parameter-hungry functions that won’t rest until their guest is full. Hospitality at its finest.

Back at line 2

Same parameters as before, except initialParams is ['Hello'] this time. Skip again to exit the cycle. Type our new variable into the console, sayHello. It’s another function, still expecting more parameters, but we’re getting warmer…

Let’s turn up the heat with sayHelloToJohn = sayHello('John').

We’re inside line 4 again, and nextParams is ['John']. Jump to the next debugger on line 6 and inspect params: it’s ['Hello', 'John']! ?

Why, why, why?

Because remember, line 12 says “Hey curriedFunction, he gave me 'Hello' last time and ‘John’ this time. Take them both in this array [...initialParams, ...nextParams].”

Now curriedFunction again compares the length of these params to originalFunction, and since 2 < 3 we move to line 10 and call curry once again! And of course, we pass along greet and our 2 params, ['Hello', 'John']

We’re so close, let’s finish this and get the full greeting back!

sayHelloToJohnDoe = sayHelloToJohn('Doe')

I think we know what happens next.

The Deed Is Done

greet got his parameters, curry stopped looping, and we’ve received our greeting: Hello, John Doe.

Play around with this function some more. Try supplying multiple or no parameters in one shot, get as crazy as you want. See how many times curry has to recurse before returning your expected output.

curriedGreet('Hello', 'John', 'Doe');
curriedGreet('Hello', 'John')('Doe');
curriedGreet()()('Hello')()('John')()()()()('Doe');

Many thanks to Eric Elliott for introducing this to me, and even more thanks to you for appreciating curry with me. Until next time!

For more content like this, check out yazeedb.com!

Learn how to create types for curry and Ramda

_Photo by [Unsplash](https://unsplash.com/photos/2jXkA7GAz9M?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">sergio souza on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

Despite the popularity of currying and the rise of functional programming (and of TypeScript), it is still a hassle today to make use of curry and have proper type checks. Even famous libraries like Ramda do not provide generic types for their curry implementations (but we will).

However, you need no functional programming background to follow this guide. The guide is about currying but it is only a topic of my choice to teach you advanced TypeScript techniques. You just need to have practised a bit with TypeScript’s primitive types. And by the end of this walk-through, you will be a real TS wizard ?.

If you’re a functional programmer, you are probably already using currying to create powerful compositions and partial applications… And if you are a bit behind, it’s time to take the leap into functional programming, start shifting away from the imperative paradigm and solve problems faster, with ease, and promote reusability within your codebase.

At the end of this guide, you will know how to create powerful types like:

In fact, Ramda does have some kind of mediocre types for curry. These types are not generic, hard-coded, limiting us to a certain amount of parameters. As of version 0.26.x, it only follows a maximum of 6 arguments and does not allow us to use its famous placeholder feature very easily with TypeScript. Why? It’s hard, but we agree that we had enough and we’re going to fix this!

_Source: [Giphy](https://giphy.com/gifs/glitch-falling-JWXIa2DAQNoQg" rel="noopener" target="blank" title=")

What is currying?

But before we start, let’s make sure that you have a very basic understanding of what currying is. Currying is the process of transforming a function that takes multiple arguments into a series of functions that take one argument at a time. Well that’s the theory.

I prefer examples much more than words, so let’s create a function that takes two numbers and that returns the result of their addition:

The curried version of simpleAdd would be:

In this guide, I will first explain how to create TypeScript types that work with a standard curry implementation.

Then, we will evolve them into more advanced types that can allow curried functions to take 0 or more arguments.

And finally, we will be able to use “gaps” that abstract the fact that we are not capable or willing to provide an argument at a certain moment.

TL;DR: We will create types for “classic curry” & “advanced curry” (Ramda).

Tuple types

Before we start learning the most advanced TypeScript techniques, I just want to make sure that you know tuples. Tuple types allow you to express an array where the type of a fixed number of elements is known. Let’s see an example:

They can be used to enforce the kind of values inside a fixed size array:

And can also be used in combination of rest parameters (or destructuring):

But before starting to build our awesome curry types, we’re going to do a bit of a warmup. We are going to create the first tools that we need to build one of the most basic curry types. Let’s go ahead.

Maybe you could guess… We are going to work with tuple types a lot. We’ll use them as soon as we extracted the parameters from the “original” curried function. So for the purpose of an example, let’s create a basic function:

We extracted the parameter types from fn00 thanks to the magic of Parameters. But it’s not so magical when you recode it:

Let’s test it:

Good, it works just as Parameters does. Don’t be scared of infer, it is one of the most powerful keywords for building types. I will explain it in more detail right after we practiced some more:

Head

Earlier, we learnt that a “classic curried” function takes one argument at a time. And we also saw that we can extract the parameter types in the form of a tuple type, very convenient.
So Head takes a tuple type T and returns the first type that it contains. This way, we’ll be able to know what argument type has to be taken at a time.

Let’s test it:

Tail

A “classic curried” function consumes arguments one by one. This means that when we consumed the Head<Params&lt;F>>, we somehow need to move on to the next parameter that hasn’t been consumed yet. This is the purpose of Tail, it conveniently removes the first entry that a tuple might contain.

As of TypeScript 3.4, we cannot “simply” remove the first entry of a tuple. So, we are going to work around this problem by using one very valid trick:

Using function types, we were able to tell TypeScript to infer the tuple that we wanted. If you do not understand it yet, it is not a problem, this is just a warmup, remember?

Let’s test it:

HasTail

A curried function will return a function until all of it’s parameters have been consumed. This condition is reached when we called Tail enough times that there is no tail left, nothing’s left to consume:

Let’s test it:

Important keywords

You have encountered three important keywords: **type**, **extends** and **infer**. They can be pretty confusing for beginners, so these are the ideas they convey:

• **extends**:
  To keep it simple, you are allowed to think of it as if it was our dear old
  JavaScript’s **===**. When you do so, you can see an extends statement as a simple ternary, and then it becomes much simpler to understand. In this case, extends is referred to as a conditional type.
• **type**:
  I like to think of a type as if it was a function, but for types. It has an input, which are types (called generics) and has an output. The output depends on the “logic” of a type, and extends is that block of logic, similar to an if clause (or ternary).
• **infer**:
  It is the magnifying glass of TypeScript, a beautiful inspecting tool that can extract types that are trapped inside different kinds of structures!

I think that you understand both extends & type well and this is why we are going to practice a bit more with infer. We’re going to extract types that are contained inside of different generic types. This is how you do it:

Extract a property’s type from an object

Let’s test it:

Extract inner types from function types

Let’s test it:

Extract generic types from a class or an interface

Let’s test it:

Extract types from an array

Let’s test it:

Extract types from a tuple

Let’s test it:

We tried to infer the type of the rest of the tuple into a type B but it did not work as expected. It is because TypeScript lacks of a feature that would allow us to deconstruct a tuple into another one. There is an active proposal that tackles these issues and you can expect improved manipulation for tuples in the future. This is why Tail is constructed the way it is.

infer is very powerful and it will be your main tool for type manipulation.

_Source: [Giphy](https://giphy.com/gifs/cheezburger-see-5K3Vw3jUqwV56" rel="noopener" target="blank" title=")

Curry V0

The warm-up ? is over, and you have the knowledge to build a “classic curry”. But before we start, let’s summarize (again) what it must be able to do:

Our first curry type must take a tuple of parameters P and a return type R. It is a recursive function type that varies with the length of P:

If HasTail reports false, it means that all the parameters were consumed and that it is time to return the return type R from the original function. Otherwise, there’s parameters left to consume, and we recurse within our type. Recurse? Yes, CurryV0 describes a function that has a return type of CurryV0 as long as there is a Tail (HasTail<P> extends true).

This is as simple as it is. Here is the proof, without any implementation:

But let’s rather visualize the recursion that happened above, step by step:

And of course, type hints work for an unlimited amount of parameters ?:

Curry V1

Nice, but we forgot to handle the scenario where we pass a rest parameter:

We tried to use a rest parameter, but it won’t work because we actually expected a single parameter/argument that we earlier called **arg0**. So we want to take at least one argument arg0 and we want to receive any extra (optional) arguments inside a rest parameter called rest. Let’s enable taking rest parameters by upgrading it with Tail & Partial:

Let’s test it:

But we made a horrible mistake: the arguments are consumed very badly. According to what we wrote, this will not produce a single TS error:

In fact there is a big design problem because we said that we would force taking a single arg0. Somehow, we are going to need to keep track of the arguments that are consumed at a time. So, we will first get rid of arg0 and start tracking consumed parameters:

There, we made use of a constrained generic called **T** that is going to track any taken arguments. But now, it is completely broken, there is no more type checks because we said that we wanted to track **any[]** kind of parameters (the constraint). But not only that, Tail is completely useless because it only worked well when we took one argument at a time.

There is only one solution: some more tools ?.

Recursive types

The following tools are going to be used to determine the next parameters to be consumed. How? By tracking the consumed parameters with T we should be able to guess what’s left.

Fasten your seat belt! You are about to learn another powerful technique ?:

Last

Take your time to try to understand this complex yet very short type. This
example takes a tuple as a parameter and it extracts its last entry out:

Let’s test it:

This example demonstrates the power of conditional types when used as an indexed type’s accessor. A what? A conditional type that accesses a type’s inner types in a command line fashion. For a more visual explanation:

This technique is an ideal approach and a safe way to do recursion like we just did. But it is not only limited to recursion, it is a nice and a visual way to organise complex conditional types.

Basic tools #1

Where were we? We said that we needed tools in order to track arguments. It means that we need to know what parameter types we can take, which ones have been consumed and which ones are the next to come. Let’s get started:

Length

To do the analysis mentioned above, we will need to iterate over tuples. As
of TypeScript 3.4.x, there is no such iteration protocol that could allow us to iterate freely (like a for). Mapped types can map from a type to another, but they are too limiting for what we want to do. So, ideally, we would like to be able to manipulate some sort of counter:

Let’s test it:

By topping a tuple up with any, we created something that could be similar to a variable that can be incremented. However, Length is just about giving the size of a tuple, so it also works with any other kind of tuple:

Prepend

It adds a type E at the top of a tuple T by using our first TS trick:

Let’s test it:

In Length’s examples, we manually increased a counter. So Prepend is the ideal candidate to be the base of a counter. Let’s see how it would work:

Drop

It takes a tuple T and drops the first N entries. To do so we are going to use the same techniques we used in Last and our brand new counter type:

Let’s test it:

What happened?

The Drop type will recurse until Length<;I> matches the value of N that we passed. In other words, the type of index 0 is chosen by the conditional accessor until that condition is met. And we used Prepend&lt;any, I> so that we can increase a counter like we would do in a loop. Thus, Length is used as a recursion counter, and it is a way to freely iterate with TS.

Curry V3

It’s been a long and tough road to get here, well done! There’s a reward for you ?.

Now, let’s say that we tracked that 2 parameters were consumed by our curry:

Because we know the amount of consumed parameters, we can guess the ones that are still left to be consumed. Thanks to the help of Drop, we can do this:

It looks like Length and Drop are precious tools. So let’s revamp our previous version of curry, the one that had a broken Tail:

What did we do here?

First, Drop<Length<T>, P> means that we remove consumed parameters out.
Then, if the length of Drop&lt;Length, P> is not equal to 0, our curry type has to continue recursing with the dropped parameters until… Finally, when all of the parameters were consumed, the Length of the dropped parameters is equal to 0, and the return type is R.

_Source: [Giphy](https://giphy.com/gifs/ice-goat-LumJYWwnr6fSg" rel="noopener" target="blank" title=")

Curry V4

But we’ve got another error above: TS complains that our Drop is not of type any[]. Sometimes, TS will complain that a type is not the one you expected, but you know it is! So let’s add another tool to the collection:

Cast

It requires TS to re-check a type X against a type Y, and type Y will only be enforced if it fails. This way, we’re able to stop TS’s complaints:

Let’s test it:

And this is our previous curry, but without any complaint this time:

Remember earlier, when we lost the type checks because we started tracking consumed parameters with T extends any[]? Well it has been fixed by casting T to Partial<;P>. We added a constraint withCast<T,Partial

>!

Let’s test it:

Curry V5

Maybe you thought that we were able to take rest parameters. Well, I am very sorry to inform you that we are not there yet. This is the reason why:

Because rest parameters can be unlimited, TS’s best guess is that the length of our tuple is a number, it’s kind of clever! So, we cannot make use of Length while dealing with rest parameters. Don’t be sad, it’s not so bad:

When all the non-rest parameters are consumed, Drop<Length<;T>,P> can only match […any[]]. Thanks to this, we used [any,…any[] as a condition to end the recursion.

Let’s test it:

Everything works like a charm ?. You just got yourself a smart, generic, variadic curry type. You will be able play with it very soon… But before you do so, what if I told you that our type can get even more awesome?

Placeholders

How awesome? We are going give our type the ability to understand partial application of any combination of arguments, on any position. According to Ramda’s documentation, we can do so by using a placeholder called _. It states that for any curried function f, these calls are equivalent:

A placeholder or “gap” is an object that abstracts the fact that we are not
capable or willing to provide an argument at a certain moment. Let’s start by
defining what a placeholder is. We can directly grab the one from Ramda:

Earlier, we have learnt how to do our first type iterations by increasing a tuple’s length. In fact, it is a bit confusing to use Length and Prepend on our counter type. And to make it clearer, we will refer to that counter as an iterator from now on. Here’s some new aliases just for this purpose:

Pos (Position)

Use it to query the position of an iterator:

Next (+1)

It brings the position of an iterator up:

Prev (-1)

It brings the position of an iterator down:

Let’s test them:

Iterator

It creates an iterator (our counter type) at a position defined by Index and is able to start off from another iterator’s position by using From:

Let’s test it:

Basic tools #2

Good, so what do we do next? We need to analyze whenever a placeholder is passed as an argument. From there, we will be able to tell if a parameter has been “skipped” or “postponed”. Here’s some more tools for this purpose:

Reverse

Believe it or not, we still lack a few basic tools. Reverse is going to give us the freedom that we need. It takes a tuple T and turns it the other way around into a tuple R, thanks to our brand new iteration types:

Let’s test it:

Concat

And from Reverse, Concat was born. It simply takes a tuple T1 and merges it with another tuple T2. It’s kind of what we did in test59:

Let’s test it:

Append

Enabled by Concat, Append can add a type E at the end of a tuple T:

Let’s test it:

Gap analysis

We now have enough tools to perform complex type checks. But it’s been a while since we discussed this “gap” feature, how does it work again? When a gap is specified as an argument, its matching parameter is carried over to the next step (to be taken). So let’s define types that understand gaps:

GapOf

It checks for a placeholder in a tuple T1 at the position described by an iterator I. If it is found, the matching type is collected at the same position in T2 and carried over (saved) for the next step through TN:

Let’s test it:

GapsOf

Don’t be impressed by this one. It calls Gap over T1 & T2 and stores the results in TN. And when it’s done, it concats the results from TN to the parameter types that are left to be taken (for the next function call):

Let’s test it:

Gaps

This last piece of the puzzle is to be applied to the tracked parameters T. We will make use of mapped types to explain that is is possible replace any argument with a placeholder:

A mapped type allows one to iterate and alter properties of another type. In this case, we altered T so that each entry can be of the placeholder type. And thanks to ?, we explained that each entry of T is optional. It means that we no longer have the need to use Partial on the tracked parameters.

Let’s test it:

Ugh, we never said that we could take undefined! We just wanted to be able to omit a part of T. It is a side effect of using the ? operator. But it is not that bad, we can fix this by re-mapping with NonNullable:

So let’s put the two together and get what we wanted:

Let’s test it:

Curry V6

We’ve built the last tools we will ever need for our curry type. It is now time to put the last pieces together. Just to remind you, Gaps is our new replacement for Partial, and GapsOf will replace our previous Drop:

Let’s test it:

In order to make sure that everything works as intended, I am going to force the values that are to be taken by the curried example function:

There is just a little problem: it seems like we’re a bit ahead of Ramda! Our type can understand very complex placeholder usages. In other words, Ramda’s placeholders just don’t work when they’re combined with rest parameters ?:

However, even if this looks perfectly correct, it will result in a complete crash. This happens because the implementation of Ramda’s curry does not deal well with combinations of placeholders and rest parameters. This is why I opened a ticket with Ramda on Github, in the hope that the types we’ve just created could one day work in harmony with the library.

_Source: [Giphy](https://giphy.com/gifs/jess-3osxYciDsUpfwZXZV6" rel="noopener" target="blank" title=")

Curry

This is very cute, but we have one last problem to solve: parameter hints. I don’t know about you, but I use parameter hints a lot. It is very useful to know the names of the parameters that you’re dealing with. The version above does not allow for these kind of hints. Here is the fix:

I admit, it’s completely awful! However, we got hints for Visual Studio Code.
What did we do here? We just replaced the parameter types P & R that used to stand for parameter types and return type, respectively. And instead, we used the function type F from which we extracted the equivalent of P with Parameters<;F>; and R with ReturnType. Thus, TypeScript is able to conserve the name of the parameters, even after currying:

There’s just one thing: when using gaps, we’ll lose the name of a parameter.

A word for IntelliJ users only: You won’t be able to benefit from proper hints. I recommend that you switch to Visual Studio Code as soon as possible. And it is community-driven, free, much (much) faster, and supports key bindings for IntelliJ users. :)

LAST WORDS

Finally, I would like to inform you that there is a current proposal for variadic types. What you’ve learned here is not going to become obsolete — this proposal aims to ease the most common tuple type manipulations, so it is a very good thing for us. In a close future, it will enable easier tuple concatenations like the Append, Concat, and Prepend we’ve built, as well as destructuring and a better way to describe variable function parameters.

That’s it. I know that it’s a lot to digest at once, so that’s why I released a developer version of this article. You can clone it, test it, and change it with TypeScript 3.3.x and above. Keep it close to you and learn from it until you become more comfortable with the different techniques ?.

High-five ? if you enjoyed this guide, and stay tuned for my next article!

EDIT: It’s available for Ramda 0.26.1

Thanks for reading. And if you have any questions or remarks, you are more
than welcome to leave a comment.

In this tutorial, we’ll build a UI using Wikipedia’s public search API along with some JavaScript + RamdaJS.

Getting Started

Here’s the GitHub link and Codesandbox link. Open your terminal and pick a directory to clone it.

git clone [https://github.com/yazeedb/ramda-wikipedia-search](https://github.com/yazeedb/ramda-wikipedia-search)
cd ramda-wikipedia-search
yarn install (or npm install)

The master branch has the finished project, so check out the start branch if you wish to code along.

git checkout start

And start the project!

npm start

Your browser should automatically open localhost:1234.

Getting the Input Value

Here’s the initial app.

To capture the user’s input as they type, our input element needs an event listener.

Your src/index.js file is already hooked up and ready to go. You’ll notice we imported Bootstrap for styling.

Let’s add a dummy event listener to get things going.

import 'bootstrap/dist/css/bootstrap.min.css';

const inputElement = document.querySelector('input');

inputElement.addEventListener('keyup', (event) => {
  console.log('value:', event.target.value);
});

We know event.target.value's the standard way to access an input’s value. Now it shows the value.

How can Ramda help us achieve the following?

• Grab event.target.value
• Trim the output (strip leading/trailing whitespace)
• Default to empty string if undefined

The pathOr function can actually handle the first and third bullet points. It takes three parameters: the default, the path, and the data.

So the following works perfectly

import { pathOr } from 'ramda';

const getInputValue = pathOr('', ['target', 'value']);

If event.target.value is undefined, we’ll get an empty string back!

Ramda also has a trim function, so that solves our whitespace issue.

import { pathOr, trim } from 'ramda';

const getInputValue = (event) => trim(pathOr('', ['target', 'value'], event));

Instead of nesting those functions, let’s use pipe. See my article on pipe if it’s new to you.

import { pathOr, pipe, trim } from 'ramda';

const getInputValue = pipe(
  pathOr('', ['target', 'value']),
  trim
);

We now have a composed function that takes an event object, grabs its target.value, defaults to '', and trims it.

Beautiful.

I recommend storing this in a separate file. Maybe call it getInputValue.js and use the default export syntax.

Getting the Wikipedia URL

As of this writing, Wikipedia’s API search URL is https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=

For an actual search, just append a topic. If you need bears, for example, the URL looks like this:

https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=bears

We’d like a function that takes a topic and returns the full Wikipedia search URL. As the user types we build the URL based off their input.

Ramda’s concat works nicely here.

import { concat } from 'ramda';

const getWikipediaSearchUrlFor = concat(
  'https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search='
);

concat, true to its name, concatenates strings and arrays. It’s curried so providing the URL as one argument returns a function expecting a second string. See my article on currying if it’s new!

Put that code into a module called getUrl.js.

Now let’s update index.js. Import our two new modules, along with pipe and tap from Ramda.

import 'bootstrap/dist/css/bootstrap.min.css';
import { pipe, tap } from 'ramda';
import getInputValue from './getInputValue';
import getUrl from './getUrl';

const makeUrlFromInput = pipe(
  getInputValue,
  getUrl,
  tap(console.warn)
);

const inputElement = document.querySelector('input');

inputElement.addEventListener('keyup', makeUrlFromInput);

This new code’s constructing our request URL from the user’s input and logging it via tap.

Check it out.

Making the AJAX Request

Next step is mapping that URL to an AJAX request and collecting the JSON response.

Replace makeUrlFromInput with a new function, searchAndRenderResults.

const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(console.warn)
);

Don’t forget to change your event listener too!

inputElement.addEventListener('keyup', searchAndRenderResults);

Here’s our result.

Making a Results Component

Now that we have JSON, let’s create a component that pretties it up.

Add Results.js to your directory.

Look back at our Wikipedia search JSON response. Note its shape. It’s an array with the following indices:

1. Query (what you searched for)
2. Array of result names
3. Array of summaries
4. Array of links to results

Our component can take an array of this shape and return a nicely formatted list. Through ES6 array destructuring, we can use that as our function signature.

Edit Results.js

export default ([query, names, summaries, links]) => `
  <h2>Searching for "${query}"</h2>
  <ul class="list-group">
    ${names.map(
      (name, index) => `
        <li class="list-group-item">
          <a href=${links[index]} target="_blank">
            <h4>${name}</h4>
          </a>
          <p>${summaries[index]}</p>
        </li>
      `
    )}
  </ul>
`;

Let’s go step by step.

• It’s a function that takes an array of our expected elements: query, names, summaries, and links.
• Using ES6 template literals, it returns an HTML string with a title and a list.
• Inside the <ul> we map names to <li> tags, so one for each.
• Inside those are <a> tags pointing to each result’s link. Each link opens in a new tab.
• Below the link is a paragraph summary.

Import this in index.js and use it like so:

// ...

import Results from './Results';

// ...

const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(Results)
      .then(console.warn)
);

This passes the Wikipedia JSON to Results and logs the result. You should be seeing a bunch of HTML in your DevTools console!

All that’s left is to render it to the DOM. A simple render function should do the trick.

const render = (markup) => {
  const resultsElement = document.getElementById('results');

  resultsElement.innerHTML = markup;
};

Replace console.warn with the render function.

const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(Results)
      .then(render)
);

And check it out!

Each link should open in a new tab.

Removing Those Weird Commas

You may have noticed something off about our fresh UI.

It has extra commas! Why??

Template Literals

It’s all about how template literals join things. If you stick in an array, it’ll join it using the toString() method.

See how this becomes joined?

const joined = [1, 2, 3].toString();

console.log(joined);
// 1,2,3

console.log(typeof joined);
// string

Template literals do that if you put arrays inside of them.

const nums = [1, 2, 3];
const msg = `My favorite nums are ${nums}`;

console.log(msg);
// My favorite nums are 1,2,3

You can fix that by joining the array without commas. Just use an empty string.

const nums = [1, 2, 3];
const msg = `My favorite nums are ${nums.join('')}`;

console.log(msg);
// My favorite nums are 123

Edit Results.js to use the join method.

export default ([query, names, summaries, links]) => `
  <h2>Searching for "${query}"</h2>
  <ul class="list-group">
    ${names
      .map(
        (name, index) => `
        <li class="list-group-item">
          <a href=${links[index]} target="_blank">
            <h4>${name}</h4>
          </a>
          <p>${summaries[index]}</p>
        </li>
      `
      )
      .join('')}
  </ul>
`;

Now your UI’s much cleaner.

Fixing a Little Bug

I found a little bug while building this. Did you notice it?

Emptying the input throws this error.

That’s because we’re sending an AJAX request without a search topic. Check out the URL in your Network tab.

That link points to a default HTML page. We didn’t get JSON back because we didn’t specify a search topic.

To prevent this from happening we can avoid sending the request if the input's empty.

We need a function that does nothing if the input's empty, and does the search if it’s filled.

Let’s first create a function called doNothing. You can guess what it looks like.

const doNothing = () => {};

This is better known as noOp, but I like doNothing in this context.

Next remove getInputValue from your searchAndRenderResults function. We need a bit more security before using it.

const searchAndRenderResults = pipe(
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(Results)
      .then(render)
);

Import ifElse and isEmpty from Ramda.

import { ifElse, isEmpty, pipe, tap } from 'ramda';

Add another function, makeSearchRequestIfValid.

const makeSearchRequestIfValid = pipe(
  getInputValue,
  ifElse(isEmpty, doNothing, searchAndRenderResults)
);

Take a minute to absorb that.

If the input value’s empty, do nothing. Else, search and render the results.

You can gather that information just by reading the function. That’s expressive.

Ramda’s isEmpty function works with strings, arrays, objects.

This makes it perfect to test our input value.

ifElse fits here because when isEmpty returns true, doNothing runs. Otherwise searchAndRenderResults runs.

Lastly, update your event handler.

inputElement.addEventListener('keyup', makeSearchRequestIfValid);

And check the results. No more errors when clearing the input!

This tutorial was from my completely free course on Educative.io, Functional Programming Patterns With RamdaJS!

Please consider taking/sharing it if you enjoyed this content.

It’s full of lessons, graphics, exercises, and runnable code samples to teach you a basic functional programming style using RamdaJS.

Thank you for reading ❤️