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!

import { concat } from 'ramda';

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


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

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


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);


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

Rename `makeUrlFromInput` to `searchAndRenderResults` and edit it to look like this.

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

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

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

inputElement.addEventListener('keyup', searchAndRenderResults);


We've simply renamed it and added a function that fetches the URL and logs the JSON response.

Don't forget to change your event listener too!

inputElement.addEventListener('keyup', searchAndRenderResults);

Looking good so far! We're making the AJAX request and properly parsing/logging the response.

Next step is hooking it up with our UI!

Transforming the request URL into an AJAX request and receiving JSON. (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

Making the AJAX Request