How To Learn Javascript Properly
Week 2 – Chapter 4


So for chapter 4 there is quite a bit to cover.Professional JavaScript for Web Developers
Here’s what I’m learning:

PRIMITIVE AND REFERENCE VARIABLES

  • Primitives variables hold a single piece of data… Reference variables carry multiple pieces of data
  • Primitive reference values are that are referenced from new variable locations differently.  When referencing a primitive variable a new instance of the variable is copied to the new variable. Consider the following:
    var num1 = 5;
    var num2 = num1; // num1 will now be 5

    However, reference variables point to the original variable value. This is because reference variables are stored in memory and when the reference variable is accessed, it’s accessing the same data in memory. (at least that’s how I understand it :P) Consider the following:

    var obj1 = new Object();
    var obj2 = obj1;
    obj1.name = "Nicholas";
    alert(obj2.name); //"Nicholas
  • Variables are accessed both by value and by reference, but arguments are passed only by value.
  • Variables are just data held in an object, Arguments are parameters set on functions or methods.
  • To determine type, the typeof and instanceof operators are provided.  The typeof operator works well on primitive values and is used to help in the identification of primitive type variables. Here’s how it’s used:
    var s = "Nicholas";
    var b = true;
    var i = 22;
    var u;
    var n = null;
    var o = new Object();console.log(typeof s); //string
    console.log(typeof i); //number
    console.log(typeof b); //boolean
    console.log(typeof u); //undefined
    console.log(typeof n); //object
    console.log(typeof o); //object

    The instanceof operator will return true if the variable is an instance of the given reference type. Here’s an example of it’s usage:

    console.log(person instanceof Object); //is the variable person an Object?
    console.log(colors instanceof Array); //is the variable colors an Array?
    console.log(pattern instanceof RegExp); //is the variable pattern a RegExp?

EXECUTION CONTEXT AND SCOPE

  • Each execution context has an associated variable object upon which all of its defined variables and functions exist. This object is not accessible by code but is used behind the scenes to handle data.
  • Each function call has its own execution context. When code is executed in a context, a scope chain of variable objects is created. The chain is created to provide ordered access to all variables and functions.  The front of the scope chain is always the variable object of the context of whose code is executing.  Identifiers are resolved by navigating the scope chain in search of the identifier name and always begin at the front and work their way up to the global context variable object (the window object in the browser).  If it’s not found, an error occurs.
    Below is some code I wrote to illustrate how local and global context is scoped by the interpreter.

    var color = "blue"; // global context
    console.log( "1 = " + color + " - color's initial variable setting");
    function changeColor(){
    var anotherColor = "red"; //local context for changeColor
    console.log("2 = " + anotherColor + " - anotherColor's initial variable setting");
    function swapColors(){var tempColor = anotherColor; //local context for swapColors
    console.log("3 = " + tempColor + " - tempColor's being set to the anotherColor variable");
    anotherColor = color; //local context for changeColor
    console.log("4 = " + anotherColor + " - anotherColor's being set to the color variable");
    color = tempColor; //global context
    console.log("5 = " + color + " - color's being set to the tempColor variable");
    //color, anotherColor, and tempColor are all accessible here
    }
    //color and anotherColor are accessible here, but not tempColorswapColors(); //local context for changeColor
    console.log("6 = " + color + "- The Color variable's final setting");
    }
    //only color is accessible here
    changeColor(); // global context

    By executing the previous code you should see the following in the console.consolelog

GARBAGE COLLECTION

  • JavaScript handles this automatically by the browsers.
  • Values that go out of scope will automatically be marked for reclamation and will be deleted during the garbage-collection process.
  • Mark-And-Sweep Garbage collection is the most common method across browsers.
  • Reference-Counting was another method though not very popular was used in older browser implementations such as Netscape 3.  The problem with this method is it’s dependency on reference counts returning to 0 after an objects variable has been accessed more then 2 times.  If the object never returns to 0 it never frees the memory.
  • Another issue with Reference-Counting is circular reference.  Meaning objectA is referencing objectB and vice versa.
  • Unfortunately not all IE 8 js objects are native.  Some of these objects are implemented as COM (Component Object Model) objects in C++.  These use reference counting for garbage collection.
  • In cases where circular references occur. They can be broken by re-assigning the values to null
  • Garbage collection is ran periodically based on the browser.
  • IE < 7 is infamous for performance issues duo to how often it’s garbage collector ran.  It’s based on the number of allocations.  Specifically 256 variable allocations, 4,096 object/array literals and array slots, or 64kb of strings.  This caused it to run frequently and led to ie7 making changes to it’s garbage-collection routine.
  • IE 7 changed the collection method to dynamically change the allocation threshold of variables
  • Various browsers have methods that can call the garbage-collection process

MEMORY MANAGEMENT

  • Operating Systems typically limit how much memory is available to web browsers mainly for security but also to prevent web pages from crashing the OS by using all the memory.  This limits the number of statements that can be executed in a single thread.
  • It is best to limit the memory usage by setting variable values to null once they are no longer needed – this is called dereferencing the value and frees up the memory reference.