Understanding JavaScript Data Types

Every programming language has data types. These data types can hold data and allow our program to act upon it. In this little section, we will be seeing JavaScripts’ data types.

In a nutshell, JavaScript as a language supports the following data types:

• .Numbers

• .Strings

• .Booleans

• .Objects

• .null

• .undefined

and importantly, we also have our friend functions as a data type in JavaScript language. Since functions are data types like String, we can pass them around, store them in a variable, etc., very similarly as we do for String and Numbers data types.Functions are First Class Citizens when the language permits them to be used as any other data type, that is, functions can be assigned to variables, passed around as arguments, and can be returned from other functions. In the next section we will see a quick example of what we mean by storing and passing functions around.

Storing a Function

As mentioned in the previous section, functions are nothing but data. Since it’s data, we can hold them in a variable! The below code (Listing 3-1) is literally a valid code in JavaScript context:

Listing 3-1. Storing a Function to Variable

let fn = () => {}

In the above code snippet, fn is nothing but a variable that is pointing to a data type function. We can quickly check that fn is of type function by running the following:

typeof fn
=> "function"

Since fn is just a reference to our function, we can call it like this:

fn()

the above will execute the function that fn points to.

Passing a Function

As day-to-day JavaScript programmers, we know how to pass data to a function. Consider the following function (Listing 3-2), which takes an argument and consoles the type of the argument:

Listing 3-2. tellType Function

var tellType = (arg) => {
        console.log(typeof arg)
}

One can pass the argument to tellType function to see it in action:

let data = 1
tellType(data)
=> number

Nothing fancy here. As seen in the previous section, we can store even functions in our variable (as functions in JavaScript are data). So how about passing a variable that has reference to a function? Let’s quickly check it:

var dataFn = () => {
        console.log("I'm a function")
}
tellType(dataFn)
=> function

That’s great! Now we will make our tellType to execute the passed argument as shown in Listing 3-3 if it’s of type function:

Listing 3-3. tellType Executes arg if It’s Function

var tellType = (arg) => {
   if(typeof arg === "function")
      arg()
   else
          console.log("The passed data is " + arg)
}

Here we are checking whether the passed arg is of type function; if so, call it. Remember if a variable is of type function, it means it has a reference to a function that can be executed. That is the reason we are calling arg() if it enters an if statement in the above code snippet.

Let’s execute our tellType function by passing our dataFn variable to it:

tellType(dataFn)
=> I'm a function

We have successfully passed a function dataFn to another function tellType, which has executed the passed function. That’s so simple.

Returning a Function

We have seen how to pass a function to another function. Since functions are simple data in JavaScript, we can return them from other functions, too (like other data types).

We’ll take a simple example of a function that returns another function as shown below in Listing 3-4:

Listing 3-4. Crazy Function Return String

let crazy = () => { return String }

String(“HOC”)
=> HOC

Note that our crazy function returns a function reference that is pointing to String function. Let’s go and call our crazy function:

crazy()
=> String() { [native code] }

As you can see, calling the crazy function returns a String function. Note that it just returns the function reference not executing the function. So we can hold back the returned function reference and call them like this:

let fn = crazy()
fn("HOC")
=> HOC

or even better like this:

crazy()("HOC")
=> HOC

//Fn => String
let crazy = () => { return String }

In these sections we have seen functions, which take other functions as its argument and have also seen examples on functions that do not return another function. Now it’s time to bring you to the higher-order function definition:

• A Higher-Order Function is a function that receives the function as its argument and/or returns them as outputs.

Abstraction Definitions

Wikipedia helps us in getting the definitions of Abstraction:

• In software engineering and computer science, abstraction is a technique for managing complexity of computer systems. It works by establishing a level of complexity on which a person interacts with the system, suppressing the more complex details below the current level. The programmer works with an idealized interface (usually well defined) and can add additional levels of functionality that would otherwise be too complex to handle.

and it also includes the following text (which is what we are interested in):

• For example, a programmer writing code that involves numerical operations may not be interested in the way numbers are represented in the underlying hardware (e.g. whether they're 16 bit or 32 bit integers), and where those details have been suppressed it can be said that they were abstracted away, leaving simply numbers with which the programmer can work.

The above text clearly gives the idea on abstraction. Abstraction allows us to work on the desired goal but not worrying about the underlying system concepts.

Abstraction via Higher-Order Functions

In this section we will see how higher-order functions help us to achieve the abstraction concept we discussed in the previous section. Here is the code snippet of our forEach function defined in the previous chapter (Listing 2-9):

const forEach = (array,fn) => {
        for(let i=0;array.length;i++)
                fn(array[i])
}

The above function forEach here has abstracted away the problem of traversing the array. The user of the API forEach doesn't need to understand how forEach have implemented the traversing part, thus abstracting away the problem.

. . .
     fn(array[i])              
. . .

forEach([1,2,3],(data) => {
       //data is passed from forEach function
       //to this current function as argument
})

forEach essentially traverses the array. What about traversing a JavaScript object? Traversing a JavaScript object has steps like this:

1. Iterate all the keys of the given object.

2. Identify that the key belongs to its own object.

3. Get the value of the key if step 2 is true.

Let’s abstract these steps into a higher-order function named forEachObject:

Listing 3-5. forEachObject Function Definition

const forEachObject = (obj,fn) => {
    for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                //calls the fn with key and value as its argument
                fn(property, obj[property])
            }
    }
}

Here they are in action:

let object = {a:1,b:2}
forEachObject(object, (k,v) => console.log(k + ":" + v))                                                                                          
=> a:1
=> b:1

Cool! An important point to note is that both forEach and forEachObject functions are higher-order functions, which allow the developer to work on task (by passing the corresponding function) abstracting away the traversing part! And also since these traversing functions are being abstracted away, we can test them thoroughly, leading to a concise code base. We will be more functional about higher-order functions. Let’s go and implement an abstracted way for handling control flows.

For that, let us create a function called unless. Unless is a simple function, which takes a predicate (that should be either true or false); and if the predicate is false; call the fn as shown below here in Listing 3-6:

Listing 3-6. unless Function Definition

const unless = (predicate,fn) => {
        if(!predicate)
                fn()
}

With the unless function in place, we can go and write a concise piece of code to find the list of even numbers. The code for it looks like this:

forEach([1,2,3,4,5,6,7],(number) => {
        unless((number % 2), () => {
                console.log(number, " is even")
        })
})

The above code when executed is going to print the following:

2 ' is even'
4 ' is even'
6 ' is even'

In the above case we are getting the even numbers from the array list. What if we want to get the list of even numbers from, say, 0 to 100? We can't use forEach here (of course we can, if we have the array that has [0,1,2.....,100] content). Let’s meet another higher-order function called times. Times is yet another simple higher-order function, which takes the number and calls the passed function as many times as the caller mentioned. The times function looks like what is shown here in Listing 3-7:

Listing 3-7. times Function Definition

const times = (times, fn) => {
  for (var i = 0; i < times; i++)
        fn(i);
}

Times function looks very similar to the forEach function; it’s just that we are operating on a Number rather than an Array. Now with the times function in place, we can go ahead and solve our problem in hand like this:

times(100, function(n) {
  unless(n % 2, function() {
    console.log(n, "is even");
  });
});

That’s going to print our expected answer

0 'is even'
2 'is even'
4 'is even'
6 'is even'
8 'is even'
10 'is even'
. . .
. . .                                                                                                                                              
94 'is even'
96 'is even'
98 'is even'

With the above code we have abstracted away looping, and the condition checks into a simple and concise higher-order function!

Having seen a few examples of higher-order functions, it’s time to go into serious mode! In the upcoming section, we will be discussing the real-world higher-order functions and how to create them. So here we go.

every Function

Often as a JavaScript developer we need to check if the array of content is a number, custom object, or anything else. We usually write our typical for loop approach to solve these problems. But let’s abstract these away into a function called every. The every function takes two arguments: an array and a function. It checks if all the elements of the array are evaluated to true by the passed function. The implementation looks like this as shown in Listing 3-8:

Listing 3-8. every Function Definition

const every = (arr,fn) => {
    let result = true;
    for(let i=0;i<arr.length;i++)
       result = result && fn(arr[i])
    return result
}

Here we are simply iterating over the passed array and calling the fn by passing the current content of the array element at the iteration. Note that the passed fn should be returning a Boolean value. Then we do a && to make sure all the contents of the array are obeying the criteria that is given by the fn.

We need to quickly check that our every function works fine. Then pass on the array of NaN and pass fn as isNaN, which does check if the given number is NaN or not:

every([NaN, NaN, NaN], isNaN)
=> true
every([NaN, NaN, 4], isNaN)
=> false

Great. The every is a typical higher-order function that is easy to implement and at the same time it’s very useful, too! Before we go further, we need to make ourselves comfortable with the new for..of loop, which is a part of ES6 specifications. The for..of loops can be used to iterate the array elements. Let’s rewrite our ever function with for loop (Listing 3-9:

Listing 3-9. every Function with for-of loop

const every = (arr,fn) => {
    let result = true;
    for(const value of arr)
       result = result && fn(value)
    return result
}

The for..of loop is just an abstraction over our old for loop. As you can see here, the for..of has eliminated the traversing of an array by hiding the index variable, etc. We have abstracted away for..of with every. It’s all about abstraction. What if the next version of JavaScript changes the way of for..of? We just need to change it in the every function. This is one of the biggest advantages of abstraction.

some Function

Similar to every function, we also have a function called some. The some works quite the opposite way of every function such that the some function returns true if either one of the elements in the array returns true for the passed function. The some function is also called as any function. In order to implement some function we use || rather than && :

Listing 3-10. some Function Definition

const some = (arr,fn) => {
    let result = false;
    for(const value of arr)
       result = result || fn(value)
    return result
}

With some function in place, we can go and check its result by passing the array’s like this:

some([NaN,NaN, 4], isNaN)
=>true
some([3,4, 4], isNaN)
=>false

Having seen both some and every function, let’s go and look at the sort function and how a higher-order function plays an important role there.

sort Function

The sort is an in-built function that is available in the Array prototype of JavaScript. Suppose we need to sort a list of fruits:

var fruit = ['cherries', 'apples', 'bananas'];

you can simply call the sort function that is available on the Array prototype:

fruit.sort()
=> ["apples", "bananas", "cherries"]

That’s so simple. The sort function is a higher-order function that takes up a function as its argument, which will help the sort function to decide the sorting logic. Simply put, the signature of the sort function looks like this:

arr.sort([compareFunction])

Here the compareFunctionis optional. If the compareFunction is not supplied, elements are sorted by converting them to strings and comparing strings in Unicode code point order. You don’t need to worry about Unicode conversion in this section as we are more focused on the higher-order functions. The important point to note here is that in order to compare the element with our own logic while sorting is performed, we need to pass our compareFunction. We can sense how the sort function is designed to be so flexible in such a way that it can sort any data on the JavaScript world, provided we pass a compareFunction. The sort function is flexible due to the nature of higher-order functions!

Before writing our compareFunction, let’s see what it should really implement. The compareFunction should implement the following logic as mentioned here : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Listing 3-11. Skeleton of compare Function

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

As a simple example, imagine we have a list of people:

var people = [
    {firstname: "aaFirstName", lastname: "cclastName"},
    {firstname: "ccFirstName", lastname: "aalastName"},
    {firstname:"bbFirstName", lastname:"bblastName"}
];                                                                      

Now we need to sort people using firstname key in the object, then we need to pass on our own compareFunction like this:

people.sort((a,b) => { return (a.firstname < b.firstname) ? -1 : (a.firstname > b.firstname) ? 1 : 0 })

which is going to return the following data:

 [ { firstname: 'aaFirstName', lastname: 'cclastName' },
  { firstname: 'bbFirstName', lastname: 'bblastName' },
  { firstname: 'ccFirstName', lastname: 'aalastName' } ]

Sorting with respect to lastname looks like this:

people.sort((a,b) => { return (a.lastname < b.lastname) ? -1 : (a.lastname > b.lastname) ? 1 : 0 })

will return:

[ { firstname: 'ccFirstName', lastname: 'aalastName' },
  { firstname: 'bbFirstName', lastname: 'bblastName' },
  { firstname: 'aaFirstName', lastname: 'cclastName' } ]

Hooking again into the logic of compareFunction:

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

Having known the algorithm for our compareFunction, can we do it better? Rather than writing the compareFunction every time, can we abstract away the above logic into a function? As you can see in the above example, we wrote two functions each for comparing firstName and lastName with almost the same duplicate code. Let’s solve this problem with our higher-order function. Now the function that we are going to design won’t take function as its argument but rather return a function. (Remember HOC can also return a function).

Let’s call this function sortBy, which allows the user to sort the array of objects based on the passed property as shown below in Listing 3-12:

Listing 3-12. sortBy function Definition

const sortBy = (property) => {
    return (a,b) => {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result;
    }
}

The sortBy function takes an argument named property and returns a new function that takes two arguments:

. . .
        return (a,b) => { }
. . .

The returned function has a very simple function body that clearly tells the compareFunction logic:

. . .
(a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
. . .

Imagine we are going to call the function with the property name firstname, and then the function body with the replaced property argument looks like the one below:

(a,b) => return (a['firstname'] < b['firstname']) ? -1 : (a['firstname'] > b['firstname']) ? 1 : 0;

That’s exactly what we did by manually writing a function. :) Here is our sortBy function in action:

people.sort(sortBy("firstname"))

will return:

[ { firstname: 'aaFirstName', lastname: 'cclastName' },
  { firstname: 'bbFirstName', lastname: 'bblastName' },
  { firstname: 'ccFirstName', lastname: 'aalastName' } ]

Sorting with respect to lastname looks like this:

people.sort(sortBy("lastname"))

returns:

[ { firstname: 'ccFirstName', lastname: 'aalastName' },
  { firstname: 'bbFirstName', lastname: 'bblastName' },
  { firstname: 'aaFirstName', lastname: 'cclastName' } ]

as before!

Wow, that’s truly amazing! The sort function takes the compareFunction, which is returned by the sortBy function! That’s a lot of higher-order functions floating around! Again we have abstracted away the logic behind compareFunction leaving the user to focus on what he or she really needs. After all, a higher-order function is all about abstractions!

But pause for a moment here and think about the sortBy function. Remember that our sortBy function takes a property and returns another function. The returned function is what passed as compareFunction to our sort function. The question here is how come the returned function carries the property argument value that we have passed?

Welcome to the world of closures! The sortBy function works just because JavaScript supports closures. We need to clearly understand what closures are before we go ahead and write higher-order functions. Closures will be the topic of the next chapter.

Remember though, we will be writing our real-world higher-order function after explaining closures in the next chapter!