DEV Community

John Au-Yeung
John Au-Yeung

Posted on • Originally published at thewebdev.info

Functional JavaScript — Creating Functions

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

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"
Enter fullscreen mode Exit fullscreen mode

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

We can assign it to a variable by writing:

const foo = () => "foo";
Enter fullscreen mode Exit fullscreen mode

Then we can call the function by writing:

foo()
Enter fullscreen mode Exit fullscreen mode

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";
};
Enter fullscreen mode Exit fullscreen mode

to enable strict mode.

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

"use strict";

global = 'bad';
Enter fullscreen mode Exit fullscreen mode

Multiple Statement Functions

We can write functions with multiple statements.

For instance, we can write:

const simpleFn = () => {
  let value = "abc"
  return value;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

We can write:

const forEach = (array, fn) => {
  for (const a of arr) {
    fn(a)
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)