18    Arrays, Functions, and Objects in JavaScript

18.1.1    Different Ways to Define a Function in JavaScript

let total = sum(100, 200);  // !!! Incorrect function call !!!
let sum = function(parameter1, parameter2) {  // Function expression
    return parameter1 + parameter2;
} 

18.1.2    Calling Functions and Function Parameters

The question as to how you should respond when a function with multiple parameters is called with fewer arguments, depends, of course, on the function itself. If multiple values are expected for a mathematical function, you’ll probably have to issue a warning or error message.

Listing 18.4     /examples/chapter018/18_1_2/script2.js

In this example, all values passed to the sumAll() function are added using the arguments object. Before that, a check is run to see if any arguments have been passed at all. However, in practice, such tasks are now more likely to be implemented using the rest parameter.

let iVal = 111;  // Global vriable

function simple(param1) {
    if (param1) {
        var sVal = 222;
    }
    return sVal + iVal;  // Okay, thanks to variable hoisting
}

let sumUp = simple(true);
console.log(sumUp);
console.log(sVal + iVal);  // Error: sVal unknown 

The iVal variable is a global variable and visible everywhere in the entire script. Consequently, this variable can be used both within a function and outside of it. I don’t think that’s a big surprise to anyone. The sVal variable, on the other hand, is only visible inside the simple() function, which is why using it outside of the function, as is done at the end of the example with console.log(sVal + iVal), leads to the error message that sVal is unknown. This is the scope JavaScript creates for each function. However, JavaScript doesn’t create a block scope within the if block here, as is usually the case in other programming languages. JavaScript uses variable hoisting and interprets the example as follows:

function simple(param1) {
    var sVal;
    if (param1) {
        sVal = 222;
    }
    return sVal + iVal;
} 

Therefore, the sVal variable is visible within the entire function. This behavior—that a variable is declared via var inside a statement block within a function and is also visible outside the block inside the function—isn’t always desirable and can entail errors. In addition, it often makes it harder to understand the code. For this reason, the better alternative is the let keyword, which should be used instead of var. A variable created with let gets a block scope and is thus only visible in the current code block. In our example, you can implement a block scope as follows:

The let keyword enables you to restrict the scope of a variable to individual code blocks, as is the case by default in many other programming languages.

If you had used neither let nor var before the sVal variable in this example, you’d have defined a global variable you could have accessed from anywhere, even from outside the function. Usually you don’t want this at all, and it can be avoided even with strict mode by always writing a "use strict"; at the beginning of the JavaScript code.

function simple() {
  "use strict";
  // Code for the simple() function 
}

In JavaScript, you can also define functions within functions so that they’re only visible and valid within the function. The following example calls a function to divide two values. Inside the function, normalize() is called, which checks if one of the values is 0, and in that case makes it a 1. The reason is that a division by 0 makes no sense. Calling the normalize() function outside the divide() function would result in an error because it isn’t visible there. Here’s the example:

function divide(x, y) {
    return normalize(x) / normalize(y);

    function normalize(val) {
        if (val == 0) {
            return 1;
        }
        return val;
    }
}
console.log(divide(4, 0)); 

Listing 18.7     /examples/chapter018/18_1_4/script.js

A more modern way to define functions with relatively little effort is available with arrow functions. In addition to the more compact notation, the main advantage of arrow functions is that the this keyword within the function refers to the context in which the function was defined, and not, as in a normal function, to the context in which the function is executed. For this purpose, here’s a simple example first:

let double = val => val * 2;
console.log(double(100)); // Output: 200 

If you use multiple parameters with the arrow function notation, you must put the parameters in parentheses:

let sum = (param1, param2) => param1 + param2;
console.log(sum(100, 300)); // Output: 400 

You already know the shorter version of the function from the introduction:

let sum = function(param1, param2) {
    return param1 + param2;
} 

Surely, you’ve noticed that the function body has been omitted in the arrow functions. This is possible as long as there’s only one statement in the function. If you use multiple statements, you must also use curly brackets here, for example:

let debug = msg => {
    console.log("Debug output -> ");
    console.log(msg);
    console.log("<- Debug output")
}

let val = 1234;
debug("Current value val (" + val + ")"); 

The same applies to the return statement, which you can omit in a short form of the arrow function without a function body. The following principle applies here: once the function consists of multiple lines, you must use a return statement, for example:

let multiplication = (param1, param2) => {
    console.log("Multiplication is being executed");
    return param1 * param2;
}
console.log(multiplication(10, 5)); 

let simple = () => console.log("Function without parameters");
simple(); 

18.1.6    Using a Function in a Web Page

To make sure that this chapter doesn’t get too theoretical, we’ll demonstrate how you can call a function within a web page. A few things are anticipated here, but I figure this simple example is still comprehensible. In the example, you can enter two values each via HTML form elements and either add them together via a button or multiply them.

Listing 18.8     /examples/chapter018/18_1_6/js/calc.js

…
<body>
    <div>
        <label for="field1">Value 1: </label>
        <input id="field1" type="text" value="5">
    </div>
    <div>
        <label for="field2">Value 2:</label>
       <input id="field2" type="text" value="5">
    </div>
    <div>
        <label for="result">Result: </label>
        <input id="result" type="text">
    </div>
    <div>
        <button id="button-calculate-sum">Calculate sum</button>
        <button id="button-calculate-mul">Multiply</button>
    </div>
    <script src="js/calc.js"></script>
</body> 

Listing 18.9     /examples/chapter018/18_1_6/index.html