const - JS | lectureA Closer Look At Functions

Let's now talk about a fundamental property of the JavaScript language: first-class functions, which enable us to write higher-order functions. But now the question is, what are first-class and higher-order functions?

Well, JavaScript is a language with first-class functions, which in technical terms means that functions are so-called first-class citizens. In practice, that means that functions are simply treated as values. And we have already touched on that idea a couple of times before. But this is such an essential feature of the language that it's worth spending some more time talking about this.

Now, why does JavaScript work this way? Well, it's simply because functions are just another type of JavaScript object. And since objects are values, functions are values too. And since functions are values, we can do a bunch of interesting things with them, like storing them in variables or object properties. And that, of course, we already did a couple of times before.

const sum = (a, b) => a + b;
const counter = {
  value: 0,
  increment: function() {    this.value++;  }};

The above code snippet shows function values being stored in variables as function expressions or properties as object methods. We can also pass functions as arguments to other functions. And we already did that before when adding event listeners or event handlers to DOM objects.

function greet() {
  alert('Hello World!');
}

button.addEventListener('click', greet);

From the above code snippet, we have the addEventListener function that you already know, and we passed the greet function into the addEventListener function as a value.

Now to make it even more interesting, we can also return a function from another function. That sounds crazy, but it can be very useful. Finally, remember that functions are objects. And many types of JavaScript objects have methods like array methods, for example. And actually, there are also function methods. i.e., methods that we can call on functions.

counter.increment.bind(anotherObject);

Again, it sounds crazy, but we will see how to use this to our advantage throughout this section. The above bind method is an example of that. And again, we will learn about the bind method as we go through the section.

The fact that JavaScript has first-class functions makes it possible for us to use and write higher-order functions. A higher-order function is either a function that receives another function as an argument, a function that returns a new function or both.

For functions that receive another function, we can use the above addEventListener function as an example. The addEventListener function is the higher-order function because it receives another function as an input. i.e., the greet function. Which is usually referred to as the callback function. That's because the callback function will be called later by the highr-order function. In this case, addEventListener will call the greet callback later as the click event happens.

Secondly, functions that return a function.

// Higher-Order Function
const sum = (a, b) => {  const x = a;
  const y = b;

  // Returned function
  return () => x + y;}

From the above code snippet, the first highlighted line is our higher-order function, which clearly returns a new function. This style of function is used a lot in JavaScript. But it's also more advanced and, I guess, harder to understand. I will show it to you in the next lecture, but we will explore this deeper later.

To finish, there seems to be some confusion between first-class functions and higher-order functions. Some people think that they are the same thing. But actually, they mean different things. So, first-class functions are just a feature that a programming language either has or does not have. All it means is that all functions are values.

There are no first-class functions in practice. It's just a concept. There are, however, higher-order functions in practice, which are possible because the language supports first-class functions. So it's a subtle difference, but still worth noting if you want to be able to talk like a true JavaScript master.

Now in the next lecture, let's create our own higher-order functions.