JavaScript function Examples

Design functions with arguments and return values. Use immediately-invoked functions.

Function. A bridge crosses the peaceful lake. The scene is beautiful. A gentle breeze causes a ripple in the water. A bridge is a structure that has a 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.

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)); Output 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.

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); }); Output 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.

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)); Output 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)); Output 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); Output 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 =; var test = 0; // Version 1: call function expression. for (var i = 0; i < 100000; i++) { test += (function() { return 1; })(); } var x2 =; // Version 2: inlined value. for (var i = 0; i < 100000; i++) { test += 1; } var x3 =; // Results. console.log("TIME 1: " + (x2 - x1)); console.log("TIME 2: " + (x3 - x2)); Output 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); Output 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.function Lookup

V8 compiler. Modern JavaScript engines compile code based on function units. Each function is compiled to a bytecode or machine code then executed.

Quote: With Ignition, V8 compiles JavaScript functions to a concise bytecode, which is between 50% to 25% the size of the equivalent baseline machine code. This bytecode is then executed by a high-performance interpreter....

V8 JavaScript Engine:

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
© 2007-2020 Sam Allen. Every person is special and unique. Send bug reports to