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 = 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)); 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: v8.dev

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.

The Dev Codes

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

JavaScript function Examples

Related Links:

.Net

Java

Related Links