Learning Objectives

• Remind ourselves of the flexibility of JavaScript functions
• Understand what a “closure” is and how it arises
• Understand and use function arguments, default and rest parameters
• Learn and use arrow function syntax

Readings

• MDN: Functions

• MDN: Arrow Functions

Function Declaration

// Declaration
function nameOfFunct(funcArg) {
    let b = 2 * funcArg;
    return b*b;
}

// Invocation
console.log(nameOfFunct(3));

Function Expressions

Can assign functions to variables.

function cubey(x) {
    return x*x*x;
}
let myFunc = cubey;
// Anonymous function assign to variable
let otherFunct = function(y){return y*y};
// Invocation
console.log(myFunc(5), otherFunct(5))

Nested Functions

From MDN:

function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2, 3); // returns 13
b = addSquares(3, 4); // returns 25
c = addSquares(4, 5); // returns 41

Closure Concept

From MDN:

The nested (inner) function is private to its containing (outer) function. It also forms a closure. A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that “closes” the expression).

Closure Example

function outside(x) {
    // x is a parameter of the outside function
    function inside(y) {
        // y is a parameter of the inside function
        // x is visible to the inside function
        return x + y;
    }
  return inside; // Returning a function!
}

// creat a function by calling *outside*
fn_inside = outside(3); // x = 3 for the inside function
// Does the inside function remember x?
result = fn_inside(5);
console.log(result);

More on Closures

From MDN:

Since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the outer function execution, if the inner function manages to survive beyond the life of the outer function.

A closure is created when the inner function is somehow made available to any scope outside the outer function.

More Intuition on Closures

From Leland Bernstein:

closure is the act of javaScript securing or “closing out” the environment around a function expression - the resulting environment (scope of the inner and outer function) has a set of “things” (like functions or variables) that the function expression can use.

Closure Usage

For handling DOM events and promises we use callback functions, closures let us “bind” information (variables) to those functions as needed.

Function arguments

You can have explicit access to a functions arguments:

function myTest() {
    console.log("Number of arguments: " + arguments.length);
    for (let i = 0; i < arguments.length; i++) {
        // using template string below
        console.log(`Argument ${i} = ${arguments[i]}`);
    }
}

myTest("Hi", "class", "this", "is", "your Prof");

Default Parameters

ES6 (ES2015) allows default arguments

function repeatIt(saying, times=2){
    let result = saying;
    for (let i = 1; i < times; i++) {
        result += saying;
    }
    return result;
}

console.log(repeatIt("Code the Web! "));
console.log(repeatIt("Free the Web! ", 3));

Rest Parameter

The rest parameter represents an indefinite number of arguments as an array:

function multiplyAdd(multiplier, ...theArgs) {
    let result = 0;
    for (let x of theArgs) {
        result += multiplier*x;
    }
  return result;
}

console.log(multiplyAdd(2, 1, 2, 3));
console.log(multiplyAdd(3, 1, 2, 3));

Arrow Function Example

Two reasons: shorter and different this behavior.

var sqr = x => x*x;
var coding = name => name + " is coding!";
console.log(sqr(50));
console.log(coding("The Prof"));

Arrow Function Syntax 1

From Arrow function syntax

• No parameter arrow function

simpleDate = () => new Date(); // Need parenthesis where parameter would be

• Multiple parameter arrow function

arrAdd = (a, b) => a + b; // Need parenthesis and commas

Arrow Function Syntax 2

From Arrow function syntax

• Multiple statement arrow function

question = name => {d = new Date(); return "is " + d + " your birthday?"} 
// Need braces and return

• Single statement arrow returning an object

makeObj = name => ({student: name, date:  new Date()});
// Need extra parenthesis around object