Categories
Functional Javascript

Functional JavaScript — Creating Functions

Spread the love

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.

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *