Home
Map
function ExamplesDesign functions with arguments and return values. Use immediately-invoked functions.
JavaScript
This page was last reviewed on Feb 28, 2023.
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.
function multiplyBy2(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.
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.
Lookup Table
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.
C#VB.NETPythonGolangJavaSwiftRust
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).
Home
Changes
© 2007-2023 Sam Allen.