Function. A function in JavaScript can be anonymous. We can invoke a function immediately. We declare a function with the function keyword or the => symbol.
We can pass functions as arguments to other functions. These are higher-order functions. Often, simpler code with for-loops is faster.
First example. JavaScript programs are full of functions. When we see console.log, this too is a function call—one we do not need to define ourselves.
Here We introduce multiplyBy2, a function that receives an argument and returns that value multiplied by 2.
functionmultiplyBy2(value) {
"use strict";
// Multiply the argument by 2.return value * 2;
}
// Call the function.
console.log("FUNCTION RESULT: " + multiplyBy2(4));FUNCTION RESULT: 8
Function argument. We can create an anonymous function, and pass it as an argument to another function. Here we invoke forEach, which loops over the elements of an array.
And A function that prints the element to the console is called on each iteration.
// Print 3 integer elements with an anonymous function.// ... Pass the function as an argument to forEach.
[10, 20, 30].forEach(function(x) {
"use strict";
console.log("VALUE IS: " + x);
});VALUE IS: 10
VALUE IS: 20
VALUE IS: 30
IIFE example. Sometimes a function must be called once, and right where it is defined. An IIFE an immediately-invoked function expression. It helps us manage scope.
Tip We have code that is as easy to write as top-level code, but it is in a function. The "animal" variable goes out of scope.
(function() {
var animal = "cat";
document.getElementById("animals").textContent = animal;
})();
Return. A function can return a value. Often we use if-statements to branch inside a function, and then return the correct value. A return is not required for all functions.
function getWord(n) {
// Return string representation of number.
if (n === 1) {
return"one";
}
else if (n === 2) {
return"two";
}
else {
return"unknown";
}
}
console.log("GETWORD: " + getWord(1));
console.log("GETWORD: " + getWord(2));
console.log("GETWORD: " + getWord(1000));GETWORD: one
GETWORD: two
GETWORD: unknown
Return, void function. Suppose we try to use the return value of a function, but no return value is reached. We get the special value "undefined."
function getWord(n) {
if (n === 1) {
return "one";
}
}
// If no return statement is reached, we get undefined.
console.log("RESULT: " + getWord(1000));RESULT: undefined
Arrow function. Early versions of JavaScript do not have arrow functions. But browser support for arrow functions has emerged. We have a left and a right side separated by a => operator.
Info The left side of the arrow function is a list of arguments—this is the same as a "function" in JavaScript.
And On the right is the return value of the function. The value is computed and returned (no "return" keyword is used).
// Use an arrow function and store the function in a variable.
var pets = (cats, dogs) => (cats + dogs)
// Call arrow function.
var result = "I have " + pets(1, 2) + " pets.";
console.log("ARROW FUNCTION: " + result);ARROW FUNCTION: I have 3 pets.
Optimization, function reduction. JavaScript functions are objects—this means they are often allocated and garbage-collected. Invoking the garbage collector tends to be slow in languages.
Info One optimization for JavaScript is to reduce the count of functions—combine them or eliminate them unless needed.
function single1() {
console.log("RESULT 1");
}
function single2() {
console.log("RESULT 2");
}
function combo(x) {
if (x === 0) {
console.log("RESULT 3");
}
else {
console.log("RESULT 4");
}
}
// Call functions.
single1();
single2();
combo(0);
combo(1);RESULT 1
RESULT 2
RESULT 3
RESULT 4
Multiple return values. A JavaScript program can return multiple values from a function. An array or object (passed by a reference, or created in the function) can be used.
Lookup table. We can develop a lookup table of functions. Then we can skip if-statements, and access functions based on a value. This requires some planning.
With functions and IIFE we add structural designs to our JavaScript programs. With immediately-invoked function expressions we gain a simple and powerful way to create scope.
Dot Net Perls is a collection of tested code examples. Pages are continually updated to stay current, with code correctness a top priority.
Sam Allen is passionate about computer languages. In the past, his work has been recommended by Apple and Microsoft and he has studied computers at a selective university in the United States.
This page was last updated on Feb 28, 2023 (edit).