JavaScript function ExamplesDesign functions with arguments and return values. Use immediately-invoked functions.
dot net perls
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.
Function arguments. 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.
JavaScript program that uses simple function
function multiplyBy2(value) { "use strict"; // Multiply the argument by 2. return value * 2; } // Call the function. console.log("FUNCTION RESULT: " + multiplyBy2(4));
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.
JavaScript program that uses function object as argument
// 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); });
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.
JavaScript program that uses IIFE
(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.
JavaScript program that uses return keyword
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."
JavaScript program that uses return
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.
Left The left side of the arrow function is a list of arguments—this is the same as a "function" in JavaScript.
Right This is the return value of the function. The value is computed and returned (no "return" keyword is used).
JavaScript program that uses arrow function, var
// 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.
Benchmark, function. Usually a function expression is best used to isolate a nontrivial piece of code. When we use one in a hot loop, our code will slow down.
Version 1 We call a function expression that returns a value. We time many iterations of this logic.
Version 2 We inline the result from the function expression instead of wrapping it in a function block.
Result There is significant cost to using a function expression, even if it should be easily inlined.
JavaScript program that benchmarks IIFE syntax
var x1 = performance.now(); var test = 0; // Version 1: call function expression. for (var i = 0; i < 100000; i++) { test += (function() { return 1; })(); } var x2 = performance.now(); // Version 2: inlined value. for (var i = 0; i < 100000; i++) { test += 1; } var x3 = performance.now(); // Results. console.log("TIME 1: " + (x2 - x1)); console.log("TIME 2: " + (x3 - x2));
TIME 1 (2019): 3.710 TIME 2: 1.979
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.
JavaScript program that uses separate, merged functions
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);
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.
Multiple Returns
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.
function Lookup
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.
© 2007-2021 sam allen. see site info on the changelog