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/

To get a job as a frontend developer, we need to nail the coding interview.

In this article, we’ll look at some functional programming questions of JavaScript.

What is Functional Programming? What makes JavaScript a Functional Language?

Functional programming is a programming paradigm that dictates the way we build apps. Functional programming treats functions in programs like mathematical functions.

This means that we avoid changing state and creating mutable data. It also means that functions are pure, that is, a function that returns the same thing given the same input.

Functions also shouldn’t have side effects in functional programming because it makes functions impure.

JavaScript functions are also first-class functions. This means that we can have functions that have functions as arguments or functions that return functions.

It also supports closures, where we return functions that can use some values inside the parent function.

For example, JavaScript arrays have the map, filter, and reduce methods, which take callback functions that are called as they process the items in the array.

map, filter, and reduce are higher-order functions since they accept functions as arguments. Functions that return functions are also higher-order functions.

For example, the map method can be used as follows:

const nums = [1,2,3];
const doubleNums = nums.map(x => x*2);

In the code above, we passed in the function x => x*2 into map .

x => x*2 does the computation as specified by the code on each entry, and then return a new array with the new values. Then we get that doubleNum is [2, 4, 6] .

What are Higher Order Functions?

Higher-order functions are functions that take functions as arguments or return functions.

For example, if we have:

const hoc = (fn)=> fn();
hoc(()=>{
 console.log('foo');
});

The code above has the hoc function which takes a function fn and runs it.

Then when we make the following call:

hoc(()=>{
 console.log('foo');
});

Then we get foo logged since the function we passed in is run in the hoc function.

Why are functions called First-class Objects?

JavaScript functions are first-class objects because they’re treated like any other kind of object.

This means that functions can be stored in a variable, object or array. They can be passed into functions as arguments. Also, they can be returned from the function.

For example, we can assign functions to variables as follows:

let foo = () => {};

We assigned an arrow function to the variable foo .

Also, they can be passed in as argument as follows:

let foo = () => {
 console.log('foo');
};
let bar = (fn) => fn();
bar(foo);

Then we can call bar with foo passed in. Note that we just pass in the reference of foo , we don’t call it. Therefore, there are no parentheses following foo .

They can be returned by a function as follows:

let foo = () => {
 return ()=> console.log('foo')
};
`
foo()();

the foo function above returns a function that logs 'foo' .

Then we call it as we did in the last line.

JavaScript functions can also be stored in objects and arrays. For example, we can write:

let obj = {
  foo: () => {
    console.log("foo");
  }
};
obj.foo();

We put the foo function inside an object as a property then called it in the last line.

Finally, we can store them in an array as follows:

const arr = [
  () => {
    console.log("foo");
  }
];
`
arr[0]();

or we can call push to put it in the array:

const arr = [];
`
arr.push(() => {
  console.log("foo");
});
`
arr[0]();

What is the arguments object?

The arguments object is an array-like object that has the arguments that we pass into a function. Array-like means that it has the length property and we can loop through the items by using an index to get the item, but it doesn’t have any array methods like map , reduce , or filter included with it.

It only gets the arguments of traditional functions.

For example, we can write:

function foo() {
  console.log(arguments);
}
`
foo(1, 2, 3, 4, 5);

Then the console.log will return us the arguments that we passed into foo , which is 1, 2, 3, 4, and 5.

Arrow functions don’t bind to the arguments object, so we can’t get all the arguments passed into an arrow function with this object.

The for...of loop also works with the arguments object, so we can loop through the arguments as follows:

function foo() {
  for (let arg of arguments) {
    console.log(arg);
  }
}
`
foo(1, 2, 3, 4, 5);

We can use the spread operator to convert arguments into an array. For example, we can write:

function foo() {
  console.log([...arguments]);
}
`
foo(1, 2, 3, 4, 5);

Then we get [1, 2, 3, 4, 5] logged.

Conclusion

JavaScript has lots of functional programming features. Functions are first-class objects, which means that they’re treated like any other object.

It also has the quirky, array-like arguments to get the arguments that are passed into a traditional function.