JS - Functions

Everytime a JavaScript function is called its context is pushed onto the Execution Stack, a stack of Function Contexts. The function runs to completion, possibly pushing event messages onto the Event Message Queue. When complete the function's context is popped. If there is another function context on the stack that function also runs to completion, continuing until the Execution Queue is empty. At that time the JavaScript engine attempts to pop an event of the Event Message Queue. If the queue is empty it blocks until a message arrives. Note that, at that time, the only way for function contexts to get pushed onto the stack is by collecting an event and pushing its handler context. Those events may come from user defined functions or from the DOM or elsewhere in the JavaScript Execution Engine, perhaps due to a refresh.

Threads:

JavaScript runs on a single thread, responsible for all of its engine execution and for running each of the functions pushed onto the context stack. The only asynchrony comes from pushing events onto the event queue and eventually running their handlers as callbacks. HTML5 has introduced WebWorkers which run on threadpool threads and get and return data via posting messages to the JavaScript Event Message Queue or to another worker's event queue. That sounds really useful until you realize that a WebWorker is not allowed to interact with the DOM - there's no locking mechanism - and a lot of what JavaScript does is to interact with the DOM. You could serialize the DOM on the JavaScript thread, and pass to a WebWorker for processing, but the serialization work will probably offset any gains from using multiple cores. The one real gain is to do something like what Node.js does, e.g., off-load I/O to a worker thread. That could be a very effective way of tranferring files, for example. The Node.js literature keeps talking about asynchronous I/O and this is what they are talking about.

Scope:

In JavaScript, ECMA5, there are just two scopes: global scope and function scope. Any variable declared with the var qualifier joins its parent scope, e.g., function scope if defined inside a function. If you forget the var the variable becomes a property of the global object (the Window if executing in a browser). Blocks, as of ECMA5, have no scope of their own. There is a let qualifier that supports block level scope in ECMA6.

The "this" reference:

In JavaScript the "this" reference has some peculiar properties. here are the rules:

If used in a constructor function for an object created with "new":	It refers to the newly created object.
If used in the global scope:	this refers to the global scope.
If this is used in a function:	this refers to the function's parent scope.
If the function is a member of an object:	this refers to the object.
If a global reference is made to a member function then invoked:	this in the function refers to the global scope.
In an event handler:	this refers to the element the event was emitted by.
If you invoke func() with func.call(someThis, arg1, arg2, ...):	in func() this refers to the passed first argument.
If you invoke func() with func.apply(someThis, [...]):	In func this refers to the context of someThis. Apply does the same thing as call. The only difference is that Apply takes its arguments as an array.

Function Closures:

JavaScript functions are really lambdas: they are first class functions, e.g., can be passed and returned from other functions; they can be defined without a name, and so anonymous, and they have closures. If you declare a function inside another function it will capture the outer function context, keeping it from being disposed until it is invoked and completes the invocation. We've implemented the function:

Arrow Functions

Arrow functions are annonymous, locally defined functions:

  Example Syntax:
    (arg1, arg2, ..., argN) => { statements }
    (arg1, arg2, ..., argN) => expression      /* equivalent to return expression */
    singleArg => expression

  Example use in code:
    var people = ["Fawett", "Bhosale", "Salman", "Corley", "Cui" ];
    people.map(person => person.length); returns Array[6, 7, 6, 6, 3];

  Note:
    The array.map(function(currentValue)) returns a new array with values that are returned by the input function
    when applied to each element of the original array.  Yes, functions can be passed as arguments to other functions.

Surprisingly, Functions are Objects:

Here we will give our CreateFunction a name and an age:

<script>
  showvalue('CreateFunction.funName = "Joe"');
  CreateFunction.funName = "Joe";
  showline('CreateFunction.age = "20 minutes"');
  CreateFunction.age = "20 minutes";
  showvalue("my funName is " + CreateFunction.funName);
  showline("my age is " + CreateFunction.age);
  showvalue("showing all JSon");
  showvalue("----------------")
  showAllJSon(CreateFunction);
  putline();
  showvalue("invoking function");
  showvalue("-----------------");
  CreateFunction()();
</script>

Functions have an Arguments Array:

Obviously, JavaScript is very forgiving of the number of arguments you supply to a function. If you give more than the named arguments the function body can access them by indexing the arguments array. If you give fewer than the named arguments and the function body accesses an argument that is not supplied, it will simply be undefined.

JavaScript Demo2 - Functions and Their Execution Environment: