JavaScript Functional Programming Basics

Posted on: December 16, 2019 by Deven

JavaScript functions are first-class objects, which means functions possess the same properties as variables do.

With the introduction of the latest JavaScript Syntax, a lot of improvements have been done to boost your JavaScript functional programming workflow, including arrow functions, promises, and the spread operator.

So, What is JavaScript Functional Programming?

JavaScript Functional programming is a Style of programming javaScript applications where the application is structured in a way that it should describe what should happen over defining how it should happen.

Arrow function in JavaScript

Your functions can represent your data in JavaScript, as you probably know we can declare functions with var, const, or let keywords like we declare any other variable or number.

Let’s understand with simple code snippets

var log = function(message) {
  console.log(message);
};

log("Your functions can represent your data in JavaScript");

Now, let’s write the same code snippet above using an arrow function

const log = message => {
  console.log(message);
};

As you can see Arrow Function syntax made the same code snippet much easier.

Since functions possess the same properties as variables do, we can also add them to objects:

const obj = {
  message: "functions possess the same properties as variables do",
  log(message) {
    console.log(message);
  }
};

obj.log(obj.message);

The code statement above will do the same thing as Arrow function statement, So what’s going on? we are storing a function in a variable log, Further, the const was used to declare the second function so it cannot be overwritten.

Functions can be also added to arrays in JavaScript

JavaScript arrays are used to store multiple values in a single variable, Let’s Understand with simple code snippet:

const messages = [
  "Functions can be also added to arrays in JavaScript",
  message => console.log(message),
  "functions possess the same properties as variables do",
  message => console.log(message)
];

messages[1](messages[0]); // Functions can be also added to arrays in JavaScript
messages[3](messages[2]); // functions possess the same properties as variables do

Since functions possess the same properties as variables do, we can send them to other functions as arguments.

Let’s understand using higher-order functions, functions that either take or return other functions.

// Higher-order function
const otherFn = logger => {
  logger("we can send them to other functions as arguments");
};

otherFn(message => console.log(message));

// we can send them to other functions as arguments

Functions can also be returned from other functions, just like variables:

// Higher-order function
const createApple = function(logger) {
  return function(message) {
    logger(message.toUpperCase() + "!!!");
  };
};

const apple = createApple(message => console.log(message));

apple("functions can be returned from other functions");
apple("createapple returns a function");
apple("apple invokes that returned function");

//FUNCTIONS CAN BE RETURNED FROM OTHER FUNCTIONS
//CREATEAPPLE RETURNS A FUNCTION
//APPLE INVOKES THAT RETURNED FUNCTION

We can also describe the above createApple higher-order function with arrows:

const createApple = logger => message => {
  logger(message.toUpperCase() + "!!!");
};

As you see in the code snippet above there is more than one arrow used during a function declaration, which means that we are using a higher-order function.