Functional JavaScript — Creating Functions

Photo by Obi Onyeador on Unsplash

JavaScript is partly a functional language.

To learn JavaScript, we got to learn the functional parts of JavaScript.

In this article, we’ll look at how to use the functional programming features in JavaScript.

Pure Function Is a Mathematical Function

Pure functions are mathematical functions.

They exhibit all the same characteristics.

Given the same input, then return one output.

JavaScript and Functional Programming

JavaScript is partly a functional programming language.

It has some of the features, but it also allows us to program it in a non-functional way.

For instance, we can create a function in JavaScript that takes no arguments.

But functions are treated as first-class citizens.

So we can have higher-order functions.

JavaScript Functions

We can create a simple JavaScript function by writing:

() => "foo"

We created an arrow function, which is available only in ES6.

We can assign it to a variable by writing:

const foo = () => "foo";

Then we can call the function by writing:

foo()

Strict Mode

JavaScript has a strict mode to let us write better JavaScript code.

To enable strict mode, we can add the 'use strict' directive to add the make the code below it use strict mode.

For example, we can write:

"use strict";const bar = function bar() {
return "bar";
};

to enable strict mode.

It’ll stop us from writing bad code like creating global variables accidentally:

"use strict";global = 'bad';

Multiple Statement Functions

We can write functions with multiple statements.

For instance, we can write:

const simpleFn = () => {
let value = "abc"
return value;
}

We have an assignment statement and a return statement to return the value.

Function Arguments

Functions can take arguments.

For example, we can write:

const identity = (value) => value

It takes a value and returns it.

ES5 functions are valid in ES6.

But it doesn’t work the other way around.

So we can’t use arrow functions in an ES5 only environment.

Functional Alternatives to Loops

We can rewrite loops in a functional way by abstracting out the loop body into its own function.

For example, instead of writing:

const array = [1, 2, 3];
for (const a of arr) {
console.log(a);
}

We can write:

const forEach = (array, fn) => {
for (const a of arr) {
fn(a)
}
}

Our forEach function has an array and fn parameters.

We loop through the array and call our function.

This way, we can abstract out our logic to the outside and pass it in.

If we use const , then we can’t assign a new value to forEach accidentally.

Photo by Dogancan Ozturan on Unsplash

Conclusion

We can create functions to a functional way by creating functions that don’t reference things from the outside.

Also, we can abstract out logic into their own functions and pass them in.

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store