Discover functional programming patterns with RamdaJS. Learn about pure functions, currying, and point-free style while deepening your knowledge of map, filter, and reduce methods.

We know the functional programming (FP) hype train's been riding strong the past few years, especially in the JavaScript community. We extol FP in countless books, videos, and blog posts, with no sign of slowing down.

As a result this course isn't to convince you, today's JS developer, of how awesome FP is. I'm simply sharing some popular patterns using Ramda, an FP library that I've blogged on many times.

Before going through them, though, we will lay the groundwork with concepts like pure functions, currying, and point-free style.

You're already doing FP through map, filter, reduce, and Lodash, so why not dive a bit deeper and see if you like it down here?

Functional Programming Patterns With RamdaJS!

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

For an actual search, 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

See? We just added `bears` to the end. Visiting that link returns JSON like this.

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.

Here's a nice start

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


I'd keep it this way, but this is a Ramda course! We want to get comfortable with using it, so how about this?

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.

Let's quickly test our code. It should be looking like this so far

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

export default pipe(
  pathOr('', ['target', 'value']),
  trim
);


import { concat } from 'ramda';

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


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

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

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

Go ahead and update your `index.js` by importing our two functions, along with Ramda's `pipe` and `tap`.

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.

We'll be changing it again soon, but it's nice to see our progress thus far!

Creating dynamic Wikipedia search urls (4 min. read)

Introduction

Pure Functions

Higher-Order Functions

Function Composition

Currying

Pipe and Compose

Sorting

Conditional Logic

Using What We've Learned

Functors

Lenses

Lenses Exercises

Building a Wikipedia Search

Closing Comments

Getting the Wikipedia URL