DEV Community

Code Craft-Fun with Javascript
Code Craft-Fun with Javascript

Posted on • Originally published at code-craft.hashnode.dev on

First Class Function in Javascript

Understanding functions and their implementation is really important to write effective, robust functional programming using Javascript. This comes with great design patterns and ideas which makes the code more flexible, scalable and less prone to bugs. We will be discussing how functions are treated in Javascript and the power it gives to the language.

First-class Function

When the functions are treated like any other variables in a programming language, then that language is said to have first-class functions. For example-

  • the function can be passed as an argument to other functions

  • the function can be returned by another function

  • the function can be assigned as a value to a variable

Let's understand this by some code examples -

Assigning a function to a variable

const greet = () => {
  console.log("Hello");
};
greet(); // Invoke it using the variable name
//Output - Hello

Enter fullscreen mode Exit fullscreen mode

Isn't it amazing! We have assigned an anonymous function to a variable greet. Then we used that variable greet to invoke the function by giving () .

Note - Even if you assign a named function to a variable, still you can invoke the function with the variable name.

const greet = function message() {
  console.log("Hello");
};
greet();
//Output - Hello

Enter fullscreen mode Exit fullscreen mode

Passing a function as an argument

function introduce() {
  return "Hello, My name is ";
}
function greeting(message, name) {
  console.log(message() + name);
}
// Pass `introduce` as an argument to `greeting` function
greeting(introduce, "John!");
// Hello, My name is John!

Enter fullscreen mode Exit fullscreen mode

Wow! it's giving more power to use functions so flexibly.

Here, we have implemented introduce() function where we return the common string as Hello, My name is to greet any name. This introduce() function is passed as a reference to the greeting() function with the name to concatenate both strings to create a full greeting message to log on to the console. This is how we treat a function as a value.

Note: The function that we pass as an argument is called a Callback Function. In the above example,introduce() is a callback function.

Returning a function from another function

function appCounter() {
  let count = 0;
  return () => {
    console.log(++count);
  };
}

let counter = appCounter();
counter(); // Output = 1;
counter(); // Output = 2;

Enter fullscreen mode Exit fullscreen mode

This is a simple counter-example. appCounter function returns an anonymous function which is assigned to a counter variable. It logs the incremented value of count variable whenever counter() is invoked.

Note: A function that returns a function or takes other functions as arguments is called a higher-order function.

Top comments (4)

Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ

Isn't it amazing! We have assigned an anonymous function to a variable greet.

And by doing so, the function ceases to be anonymous. Check it with greet.name. A true anonymous function has no name.

Collapse
 
codecraftjs profile image
Code Craft-Fun with Javascript

Yes,
But the point here is to treat a function as a value, whether it be an anonymous or a named function . Any how, once it is assigned it will be stored in that variable and can be invoked as function with variable name.

Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ

I was kind of addressing your point about named functions being useful for debugging - which is true... but not really relevant to the code above as that function does have a name.

Thread Thread
 
codecraftjs profile image
Code Craft-Fun with Javascript • Edited

Got your point! I will provide code example for assigning named function as value instead .