Learn Functional Programming in JavaScript

JavaScript is one of the most interesting programming languages, simply because you can write software in a variety of different ways. We primarily live in an object-oriented world, but we’re not bound to that paradigm. We can also take a functional programming approach.

This course is 1 hours 35 minutes long, and it’s split into 13 lessons in total. You’ll find it’s a great resource that you will come back to often so make sure you bookmark the parts that interest you. 

Who Is This FREE Course For?

  • Complete beginners who want to be web developers
  • Experienced developers who want to explore advanced topics
  • Programming enthusiasts who enjoy learning something new and exciting

Follow Along, Learn by Doing

I encourage you to follow along with this course, and you’ll learn about all the most important features of functional programming with JavaScript.

To help, the Learn Functional Programming With JavaScript course GitHub repository contains the source code for each lesson and the completed sample project that was built throughout the course. 

1. What You Will Learn in This Free JavaScript Course

Watch video lesson [0:00:00] ↗

By the end of this course you will understand concepts like:

  • first-class functions
  • immutability
  • composing functions
  • currying
  • how to work with the DOM in a functional way

Setup

Watch video lesson [0:01:53] ↗

Let’s get our development area set up and ready for coding! In this lesson I’ll show you how.

To set up JavaScript and our working environment, we’ll use the following tools: 

2. Basic Concepts

First-Class Functions

Watch video lesson [0:07:10] ↗

In JavaScript, functions are first-class objects. They are a type of data we can assign to variables, pass to other functions, and even return functions from within another function. It’s a powerful feature and is central to functional programming.

Declarative Programming

Watch video lesson [0:12:53] ↗

Functional programming takes a declarative approach for writing code. It’s a common (and very trendy) way of writing code. We’ll examine declarative programming and compare it to imperative programming in this lesson.

Pure and Impure Functions

Watch video lesson [0:17:47] ↗

There are two types of functions in functional programming: pure and impure. You’ll learn the difference between the two in this lesson.

Immutability

Watch video lesson [00:21:27] ↗

We typically work with immutable data in functional programming. It may seem like more work to program immutably, and inefficient to boot, but there are benefits to using immutable data. You’ll learn why in this lesson.

3. Building a Functional Project

Introducing Composition

Watch video lesson [00:27:18] ↗

One key aspect of functional programming is the concept of composition: composing multiple functions into one. You’ll learn the two types of composition in this lesson.

Using Composition

Watch video lesson [00:34:28] ↗

Now that you know the types of composition, we’ll compose multiple functions together to build an HTML element.

Currying Functions

Watch video lesson [00:41:11] ↗

Currying can be a difficult concept to grasp at first, but it is extremely powerful and lets us create partial functions.

Writing a Functional Web App

Watch video lesson [00:48:12] ↗

Most of the code we’ve written just creates helper functions. In this lesson, we’ll start writing our application code to display messages on the page.

Handling Events

Watch video lesson [00:56:53] ↗

Handling events in a functional way is not very different from the procedural way, except now we curry our event setup functions. I’ll show you how to do that so we can complete our application in this lesson.

For further reading :

4. Working With Arrays

Understanding map()

Watch video lesson [1:05:29] ↗

One of the most useful and underused operations in all programming is the idea of a map—transforming an array into another array. I’ll show you how to do that with JavaScript’s map() method.

Filtering Arrays

Watch video lesson [1:16:11] ↗

It’s very common to want to filter an array into a smaller set of data. In this lesson, you’ll learn how with the filter() method.

Reducing Arrays

Watch video lesson [1:22:18] ↗

The reduce() operation is very useful, and you’ll learn how it works and how to apply it in this lesson.

For further reading on this topic, take a look at these two articles:

Conclusion

Watch video lesson [1:32:15] ↗

Functional programming with JavaScript is a completely different paradigm than what we’re used to, and it requires us to rethink how we approach common problems. Functional programming can be elegant and expressive, and with concepts like composition and currying, we have some pretty ingenious ways of reusing code.

JavaScript for Web Designers

In this course, you’re going to learn the basics of JavaScript from a web designer’s perspective. Along the way, we’ll build some examples that are geared towards what you as a web designer might face on a daily basis.