When do you use var and let to declare variables?

The distinction is subtle and outside the scope of this course. var was the original and is still used. let is newer and has some advantages in some subtle cases that won't concern us.

You can use either one.

Could you walk through another example of functions returning functions? / Can you explain more on the Functions as Return Values please? Going through the logic a bit.

Suppose we have a global list of employees. We might write some code to give them raises when needed.


var employees = [ {name: 'ariel', salary: 85000.00},
                  {name: 'belle', salary: 92000.00},
                // ...
                ];

function giveRaise(raiseFunction) {
    // the raiseFunction updates the employee
    employees.forEach(raiseFunction);
}

function fixedRaise (amount) {
    return function (employee) { 
        employee.salary += amount;
    }
}
    
function percentageRaise (percent) {
    return function (employee) { 
        employee.salary += employee.salary*percent; 
    }
}

Now, some examples:


giveRaise( fixedRaise(100) );  // raise of 100 simoleons
giveRaise( percentageRaise(0.05) ); // 5% raise
giveRaise( percentageRaise(0.06) ); // 6% raise

What is the purpose of an anonymous function / what are anonymous functions and how can they be used/when to use them? / More on anonymous functions.

Anonymous functions are great when you need a function but you don't want or can't name it.

Could you give more examples of anonymous and named function side by side?

Sure. First, imagine a page with a buttons to go to "dark mode" or "light mode":


<button id="darkModeButton">switch to dark mode</button>
<button id="lightModeButton">switch to light mode</button>

They might look like this:

Now, let's have an event handler:


function darkMode() {
    $("body").css({"background-color": "black",
                   "color": "white"});
}

$("#darkModeButton").click(darkMode);

$("#lightModeButton").click(function () {
    $("body").css({"background-color": "white", 
                   "color": "black"});
});

Could you provide more clarification on sections of callback functions and functions as return values?

There functions in the examples above are callback functions.

Could we explain arrow functions a bit more?

Sure. An arrow function is a simplified syntax for anonymous functions. The following are (almost) the same:


var f1 = function (salary) { return 1.05 * salary; }
var f2 = (salary) => 1.05 * salary;

nums = [ 1, 2, 4, 8, 10 ];
nums.map(f1);
nums.map(f2);

The arrow function omits the function keyword, the braces, and the return keyword.

A method similar to .map is forEach(), which takes a function of up to three arguments: the item, its index in the array, and the array itself. In practice, the third argument is often ignored, and we will omit it here. (Remember that JavaScript allows you to invoke a function with more arguments than it's declared to take. The extra arguments are just ignored. Here, if we supply an anonymous function that takes only two arguments, it means we aren't interested in the third argument — the array.)

In this part of the reading, you say that the third argument is ignored and omitted. Why so?

I said it's usually omitted. We omit it when we don't need it. Like the giveRaise function, above. Or:


// find the sum
sum = 0;
nums = [ 1, 2, 4, 8, 10 ];
nums.forEach( function(n) { sum += n; });
console.log(sum);
// bump the numbers by 10 percent
nums.forEach( function(n,i) { nums[i] += n * 0.10; } );
console.log(nums);
// bump the numbers by another 5 percent
nums.forEach( function(n,i,arr) { arr[i] += n * 0.05; } );
console.log(nums);

We would only need the third argument if we were in a context where we didn't know what the array was.