JavaScript Functions

Dr. Greg Bernstein

September 8th, 2018

Functions

Readings

Function Declaration

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

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

Function Expressions

Can use 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

Closures

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.

More on JavaScript Functions

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 Functions

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"));