A quick note on functions

functions-note.md

A quick note on functions

After our discussion on Wednesday, I wanted to make sure the information was presented in a nice way.

We left off talking about functions and what they do, either named or anonymous.

We also mentioned the idea of scope: so here are some examples and ideas to help get that all to sink in (hopefully).

Scope is the idea that we can quarantine variables to a specific area. This is great because we may run into times where it is natural to use the same name for something.

The way JavaScript (and many other languages) scope variables is lexically.

Let's have an example:

// this will work:

function foo (a) {
  console.log(a + b);
}

var b = 2;

foo( 2 );

One quick note is hoisting: the engine running JavaScript will pull variable declarations and functions to the top. Have a look at this Stack Overflow question for a look at how hoisting is done.

In this example, we'll get an error:

// create a ReferenceError

function foo(a) {
  console.log(a + b);
  b = a;
}

foo(2);

The process of getting a value for a variable involved seeing if it exists in the current scope and traveling up each successive scope until it reaches the global scope. If it doesn't find the variable (like above) the engine complains and sends us a ReferenceError

You can think of this like an elevator. If the top floor is the global scope, and we're in the lobby with our current scope, if we ask for a variable (like document or window!) we will get access to it.

But! Consider the following example:

(function global () {

  function foo() {
    var i = 0;
  }
  
  function bar() {
    console.log(i);
  }
  
  foo();
  bar();

})();

What we just demonstrated is lexical scoping works: we can't look at the other children of the global scope just like elevators don't move horizontally.

In addition, I may have inadvertently introduced a version of what is called a function expression. You've seen function expressions before but maybe didn't know it:

$(document).ready(function(){
  var hey = "look! I'm inside a function expression";
});

Here is the difference:

// global is a function expression
(function global () {

  function foo() {
    var i = 0;
  }
  
  function bar() {
    console.log(i);
  }
  
  foo();
  bar();

})();

// global is a regular function: 
function global () {

  function foo() {
    var i = 0;
  }
  
  function bar() {
    console.log(i);
  }
  
  foo();
  bar();

}

The engine distinguishes them by seeing there are characters before the word function or not.

To be even more precise, that example used an immediately invoked function expression (iife), which just means we tell javascript to run the function once it's been compiled.

That's enough for now, let me know if you have any questions.