A bit about JavaScript functions

Disclaimer

We'll talk about a subset of JavaScript's functions semantics
  and some idioms and patterns based on it.

It's based on some of the readings I've done  to learn JavaScript:

JavaScript Enlightenment, Cody Lindley

JavaScript: The Good Parts, Douglas Crockford

JavaScript Allongé, Reginald Braithwaite

You Don't Know JS: Scope & Closures, Kyle Simpson

Semantics & Idioms

• Idioms

What are the common approaches to using the language features to express computations?

A function represents a computation to be performed

Parts of a function

1. The reserved word function.
2. The function name.
   It's optional.  If no name is given, the function is said to be anonymous.
3. The set of parameters of the function, wrapped in parentheses.
4. The body of the function: a set of statements wrapped in curly braces.

    
(function() {})         (function(a,b) {return a + b;})

JavaScript functions are objects

As such they are a reference type,

(as opposed to a primitive or value type).

 (function() {}) === (function() {});

JavaScript functions are objects

So they have properties and methods:

such as, length, arguments, prototype,

apply, call, etc.

Functions are first class entities

Functions are values that can: 

be bound to names like any other value, 

passed as arguments,

returned from other functions,

and used wherever any other value can be used.

Applying a function

We use functions applying them to zero or more values called arguments.

Let fn_expr be an expression that when evaluated produces a function and let args be the arguments.

This is how the function is applied:

fn_expr(args)

Some definitions

Environment

• Every time a function is invoked a new environment is created.

• We can think of this environment as a hash that associates by name the variables in the scope to their values.

• When a variable is associated by name to a value is said that the variable is bound to the value. Therefore an environment is a set of bindings.

• When you apply a function to its arguments, an entry is placed in the dictionary for each argument.

Passing arguments

Call by value

For primitive types:

JS places a copy of the value in the environment.

This is called call by value semantics.

Call by sharing

    For reference types:

 JS places a reference to the reference type in the environment.

    When the value needs to be used,

JS uses the reference in the environment

    to retrieve the original.

    This is called call by sharing semantics.

Parameters eager evaluation

        
 (function (radius) { return 2 * radius;})(1 + 1 * 5);
    

How does invoking a function work?

Invoking a function (I)

    
 (function (x) { return x; })(1 + 1);

1. JS parses this whole thing as an expression made up of two sub-expressions.
2. It then starts evaluating each of the sub-expressions.
3. One of the sub-expressions, function (x) { return x; }, evaluates to a function.
4. The other sub-expression, 1 + 1, evaluates to 2.
5. JS now evaluates the whole expression by applying the evaluated function to the argument value.

Invoking a function (II)

• An environment is created -> {'..': {}}.
• The value 2 is bound to the name x in the environment -> {x: 2, '..': {}}.
• The expression x in return x; is evaluated within the environment we just created.
• The value of a variable like x when evaluated in an environment is the value bound to the variable's name in that environment, which is 2.
• And that's the value that the function returns (2).

Function Scope

  Pre-ES6 JS everything has function scope*.

Creating bindings using var

• The var keyword allows us to introduce one or more bindings in the current function's environment.
• Any expression can be bound, even functions, (no surprise here, as they are first-class entities).

  (function(radius) {                                        
    var calcDiameter = function(r) {    
      return 2 * r; 
    };    
    return calcDiameter(radius);                                             
  })(2);
  

• You can bind more than one name-value pair by separating them by commas

  (function() {
    var foo = 'foo',             
      bar = 'bar';      
    return foo + bar;                       
  })();
  

Nested functions:

How do they work?

(function (x) {
  return function(y) {
    return x * y;
  }
})(3)(4)

Free variables

A free variable is one that is not bound within the function.

x was a free variable of the inner function in the previous example.

  But how come x was equal to 3?

Lexical scope

Environments chain

var h = 5;

(function(x) {
  return function(y) {
    return function(z) {
      return x + y + z + h;
    }
  }
})(2)(3)(4);

Types of lookup in the scope chain.

What if the binding is not there?

• LHS lookup.
  1. If not using strict mode
     A new binding is created in the global environment.

  
  

  2. If using strict mode
     A ReferenceError is thrown.


• RHS lookup.
  A ReferenceError is thrown.

Shadowing

• When a variable has the same name as an ancestor environment's binding, it is said to shadow the ancestor.

  function(x) {                
    return function(x, y) {   
      return function(w, z) {
        return function(w) {
          return x + y + z + w;         
        }
      }                  
    }                     
  }(1000)(2, 3)(4000000000, 5)(6)         
  

• If done on purpose, it's often a good thing.


• If not, you're programming by accident and that can always gets dangerous.

See example in shadowing.js

Hoisting

var x = 'outer';
        
(function() {        
  console.log(x);
        
  if (true) {
    var x = 'inner';
    console.log(x)
  }
})();

Code pattern using var

Declare all your variables at the beginning

of the function using var,

to make your code easier to understand.

Having just one var with the variables separated by commas also helps the minification process.

     See example in codePatternUsingVar.js

Reassignment, mutation, aliasing

Closures

We've been seeing them for a while*.

They are just functions with free variables.

Closures

To be executed a closure needs:

Function

+

Environment where the function was defined

Some idioms using closures:

Private state

var counter = (function() {
  var value = 0;

  return function() {
    return value++
  }
})();

Some idioms using closures:

Module pattern

function() {
  //private state
  //private functions
  return {
    //public state
    //public functions
  };
}    

Named functions

var bindingName = function actualName () {

};

> bindingName.name
'actualName'

Benefits of using named functions

• Easier to understand.
  Good names help us express the function intent which improves readability.


• Easier to debug.
  It gets easier because the names of the functions are displayed in stack traces.


• Recursion.
  A named function can refer to itself without having to use the deprecated arguments.calle reference.

Recursion

var fn = function even(n) {
  if (n === 0) {
    return true;
  } else {
    return !even(n - 1);
  }
}

Function Declaration (I)

function name () {
}

var name = function name () {

};

Function Declaration (II)

• It facilitates a certain style of programming where you put the main logic at the top, and the helper functions at the bottom:

    var composedFunction = function () {
        doSomething();
        doSometringElse();
        
        function doSomething () { console.log("something is done"); };
        function doSometringElse () { console.log("something else is done"); };
    };

Block Scope in ES6

// Pre ES6
(function(x, y) {
  var gamma = 3;
  if (x > y) {
    var gamma = 1 + y;
    console.log(gamma * x);
  }       
  console.log(gamma);     
})(2, 1);

// ES6 example executed in Chrome using ScratchJs
(function(x, y) {
  var gamma = 3;
  if (x > y) {
    let gamma = 1 + y;
    console.log(gamma * x);
  }   
  console.log(gamma); 
})(2, 1);

// Another ES6 let example executed in Chrome using ScratchJs
var introductions = [], names = ['Karl', 'Friedrich', 'Gauss'];
for (let i = 0; i < 3; i++) {
  introductions[i] = function(soAndSo) {
    return "Hello, " + soAndSo + ", my name is " + names[i]     
  }
}

Block Scope polyfill for pre-ES6

• You can polyfill block scope in pre-ES6 using Traceur.


• Traceur is a transpiler of ES6 features into pre-ES6 (mostly ES5, but not all!) for general usage.


• It's actually what ScratchJs is using behind the scenes.

Dynamic Scope

Recap.

Higher-order functions

Higher-order functions

Functions that take or/and return other functions.

They are a powerful mean of abstraction,
  because they can abstract both control flow and
  algorithms that use other algorithms.

Passing functions as arguments

Passing functions as arguments

var times = function(n, fn) {
  var i;
  for (i = 0; i < n; i++) {
    fn();
  }
}

times(3, function() {
  console.log('hola koko');
});

It's all about composition

Strategy pattern example

    See Strategy pattern and higher-order functions? post

    See verbose_strategy.js
    See takingFunctionsAsArguments-duck.js

"Like many patterns, using it when it applies is only 20% of the benefit. 

  The other 80% comes from organizing your code
  such that you can use it:

Writing functions that can be composed in various ways"

Reginald Braithwaite

Applicative programming

Applicative programming

Creating functions

Basic strategies

1. Compose
2. Partial application
3. Currying
4. Home-made

Composition

var cook = function(food) {
  console.log("Cook " + food + "!");
  return food;
};

var eat = function(food) {
  console.log("Eat " + food + "!");
};

var cookAndEat = function(food) {
  return eat(cook(food));
};

var compose = function(f, g) {
  return function(c) {
    return f(g(c))
  }
};

var cookAndEat = compose(eat, cook);

Partial application

It refers to the process of fixing

a number of arguments of a function,

to produce a new function

with a smaller number of arguments.

   See partialApplication.js

Currying

The process of taking a function that

takes multiple arguments

and transform it into

a chain of single argument functions.

  See currying.js and currying-builders.js

Decorators

A function decorator is a higher-order function

that takes a  function as an argument

and returns another function

which is a variation of the function

passed as an argument.

function not(fn) { 
  return function(argument) {
    return !fn(argument)
  }
}           

Adapters

A function adapter is a higher-order function

that takes a function as an argument

and returns a new function

that adapts the function passed as an argument

to a different signature.

There's much more!

Thanks!

@trikitrok

http://garajeando.blogspot.com.es/