Introduction
In JavaScript, functions are first-class citizens, which means that they can be treated like any other value in the language. This means that you can assign functions to variables, pass them as arguments to other functions, and return them from functions.
In this article, we will illustrate the different ways we can work with function as values.
Assigning a function to a variable
You can assign a function to a variable just like you would assign any other value:
const sayHello = function () {
console.log("Hello, GoLinuxCloud!");
};
sayHello();
Output
Hello, GoLinuxCloud!
Passing a function as an argument to another function
Moving on, we can pass a function as an argument to another function just as we will do with values. For example, using the function we created in the last section, we can pass the function to another function be called within the function.
function callFunction(func) {
func();
}
callFunction(sayHello);
Output
Hello, GoLinuxCloud!
Returning a function from a function
Just as with values, we can return functions. The idea around is that functions will eventually return a value. Inherently, you are simply returning the value that the function produced from its operation.
function createGreetingFunction(name) {
return function () {
console.log(`Hello, ${name}!`);
};
}
const sayHelloToJohn = createGreetingFunction("John");
sayHelloToJohn();
Output
Hello, John!
The above makes use of an anonymous function. The anonymous function is returned in the creatGreetingFunction().
Using function expressions
Function expressions are anonymous functions that are assigned to a variable.
Here is a quick example on function expressions.
const sayHello = function () {
console.log("Hello, world!");
};
sayHello();
Output
Hello, world!
Function expressions are often used in conjunction with higher-order functions, which are functions that take other functions as arguments or return functions as output.
For example, you can use the Array.prototype.map() function to apply a function to each element of an array and return a new array.
const numbers = [11, 24, 36];
const doubled = numbers.map(function (number) {
return number * 2;
});
console.log(doubled);
Output
[ 22, 48, 72 ]
Here, the function expression takes each array element and multiplies it by 2.
Using arrow functions
Arrow functions are a shorthand syntax for writing functions in JavaScript. They are often used in conjunction with higher-order functions, such as Array.prototype.map() and Array.prototype.filter().
Here's an example of using an arrow function as an argument to the Array.prototype.map() function.
const numbers = [1, 2, 3];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
Output
[ 2, 4, 6 ]
Using functions as object properties
Another example of using function as values is in the usage of functions as object properties. You can use functions as properties of objects in JavaScript.
const person = {
name: "John",
sayHello() {
console.log(`Hello, my name is ${this.name}!`);
},
};
person.sayHello();
Output
Hello, my name is John!
Using functions as class methods
You can use functions as methods of classes in JavaScript. Here is an example of how to use function as class methods.
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, my name is ${this.name}!`);
}
}
const person = new Person("David");
person.sayHello();
Output
Hello, my name is David!
Summary
Overall, the ability to use functions as values in JavaScript allows developers to write powerful and flexible code that can adapt to different situations and requirements. It is an important concept to understand and master in order to be effective in JavaScript programming.
References
Functions As Values - JavaScript: The Definitive Guide, 6th Edition [Book] (oreilly.com)
