A-Z of JavaScript - 2

?

var myEarth = earth({name:"earth",numberofmoons:1});

var myjupiter=jupiter({name:"jupiter",numberofmoons:66});

The three key points here:

1.       There is code reuse.

2.       There is encapsulation. The name and numberOfMoons properties are encapsulated.

3.       The child objects can add in their own specific functionality.

Now an explanation of the syntax:

1.       The base object planet accepts some data in the spec object.

2.       The base object planet creates a closures called that which is returned. The that object has access to everything in the spec object. But, nothing else does. This provides a layer of encapsulation.

3.       The child objects, earth and jupiter, set up their own data and pass it to base planet object.

4.       The planet object returns a closure which contains base functionality. The child classes receive this closure and add further methods and variables to it.

Hoisting 
No matter where var's are declared in a function, javascript will "hoist" them meaning that they behave as if they were declared at the top of the function. 

view source

print?

mylocation = "dublin"; // global variable

function outputPosition() {

console.log(mylocation);  // outputs "undefined" not "dublin"

var mylocation = "fingal" ;

console.log(mylocation);  // outputs "fingal"

}

outputPosition();

In the function above, the var declaration in the function means that the first log will "see" the mylocation in the function scope and not the one declared in the global scope. After declaration, the local mylocation var will have the value "undefined", hence why this is outputted first.  Functions that are assigned to variables can also be hoisted.  The only difference being that when functions are hoisted, their definitions also are - not just their declarations.Immediate Function Expressions
Immediate function expression are executed as soon as they are defined. 

view source

print?

(function() {

console.log("I ain't waiting around");

}());

There are two aspects of the syntax to note here.  Firsty, there is a () immediately after the function definiton, this makes it execute. Secondly, the function can only execute if it is a function expression as opposed to a function declaration. The outer () make the function an expression.  Another way to define a an immediate function expression is: 

view source

print?

var anotherWay = function() {

console.log("I ain't waiting around");

}()

JSON
JavaScript Object Notation (JSON) is a notation used to represent objects. It is very similar to the format used for Javascript Object literals except the property names must be wrapped in quotes. The JSON format is not exclusive to javascript; it can be used by any language (Python, Ruby etc). JSON makes it very easy to see what's an array and what's an object. In XML this would be much harder. An external document - such as XSD - would have to be consulted. In this example, Mitt Romney has an array describing who might vore for him and an object which is his son. 

view source

print?

{"name": "Mitt Romney", "party": "republicans", "scary": "of course",

"romneysMostLikelyVoters": ["oilguzzlers", "conservatives"], son : {name:'George Romney}}

Loose typing
Javascript is loosely typed. This means that variables do not need to be typed. It also means there is no complex class hierarchies and there is no casting. 

view source

print?

var number1 = 50;

var number2 = "51";

function output(varToOutput) {

// function does not care about what type the parameter passed is.

console.log(varToOutput);

}

output(number1);  // outputs 50

output(number2);  // outputs 51

Memoization
Memoization is a mechanism whereby functions can cache data from previous executions. 

view source

print?

function myFunc(param){

if (!myFunc.cache) {

myFunc.cache = {}; // If the cache doesn't exist, create it.

}

if (!myFunc.cache[param]) {

//... Imagine the code to work out result below

// is computationally intensive.

var result = {

//...

};

myFunc.cache[param] = result;  // now result is cached.

}

return myFunc.cache[param];

}

Method
When a function is stored as a property of an object, it is referred to as a method. 

view source

print?

var myObject {

myProperty: function () {

//...

// the this keyword in here will refer to the myObject instance.

// This means the "method" can read and change variables in the

// object.

}

}

Modules
The goal of modules is to enable javascript code bases to more modular.  Functions and variables are collated into a module and then the module can decide what functions and what variables the outside world can see - in the same way as encapsulations works in the object orientated paradigms. In javascript we create modules by combining characteristics of closures and immediate function expressions. 

view source

print?

var bankAccountModule = (function moduleScope() {

var balance = 0; //private

function doSomethingPrivate(){  // private method

//...

} 

return { //exposed to public

addMoney: function(money) {

//...  

},

withDrawMoney: function(money) {

//...

},

getBalance: function() {

return balance;

}

}());

In the example above, we have a bank account module:

·         The function expression moduleScope has its own scope. The private variable balance and the private function doSomethingPrivate, exist only within this scope and are only visible to functions within this scope.

·         The moduleScope function returns an object literal. This is a closure which has access to the private variables and functions of moduleScope. The returned object's properties are "public" and accesible to the outside world.

·         The returned object is automatically assigned to bankAccountModule

·         The immediate function ()) syntax is used. This means that the module is initialised immediately.

Because the returned object (the closure) is assigned to bankAccountModule, it means we can access the bankAccountModule as: 

view source

print?

bankAccountModule.addMoney(20);

bankAccoumtModule.withdrawMoney(15);

By convention, the filename of a module should match its namespace. So in this example, the filename should be bankAccountModule.js.  

Namespace Pattern
Javascript doesn't have namespaces built into the language, meaning it is easy for variables to clash. Unless variables are defined in a function, they are considered global. However, it is possible to use "." in variables names. Meaning you can pretend you have name spaces. 

view source

print?

DUBLINTECH.myName = "Alex"

DUBLINTECH.myAddress = "Dublin

Object Literal Notation
In javascript you can define an object as collection of name value pairs.   The values can be property values or functions. 

view source

print?

var ireland = {

capital: "Dublin",

getCapital: function () {

return this.capital;

}

};

Prototype properties (inheritance)
Every object has a prototype object. It is useful when you want to add a property to all instances of a particular object. Suppose you have a constructor function, which representent Irish people who bought in the boom. 

view source

print?

function IrishPersonBoughtInTheBoom(){

}

var mary = new IrishPersonBoughtInTheBoom ();

var tony = new IrishPersonBoughtInTheBoom ();

var peter = new IrishPersonBoughtInTheBoom ();

...

Now, the Irish economy goes belly up, the property bubble explodes and you want to add a debt property to all instances of this function. To do this you would do: 

view source

print?

IrishPersonBoughtInTheBoom.prototype.debt = "ouch";

Then... 

view source

print?

console.log(mary.debt);   // outputs "ouch"

console.log(tony.debt);   // outputs "ouch"

console.log(peter.debt);   // outputs "ouch"

Now, when this approach is used, all instances of IrishPersonBoughtInTheBoom share the save copy of the debt property. This means, that they all have the same value as illustrated in this example.  
Returning functions
A function always returns a value.  If return is not specified for a function, the undefined value type will be returned. Javascript functions can also return some data or another function. 

view source

print?

var counter = function() {

//...

var count = 0;

return function () {

return count = count + 1;

}

}

var nextValue = counter();

nextValue();   // outputs 1

nextValue();   // outputs 2

Note, in this case the inner function which is returned "closes" over the count variable - making it aclosure - since it encapsulates its own count variable. This means it gets its own copy which isdifferent to the variable return by nextValue.count.
this keyword
The this keyword in Java has different meanings, depending on the context it is used. In summary:

·         In a method context, this refers to the object that contains the method.

·         In a function context, this refers to the global object. Unless the function is a property of another object. In which case the this refers to that object.

·         If this is used in a constructor, the this in the constructor function refers to the object which uses the constructor function.

·         When the apply or call methods are used the value of this refers to what was explictly specified in the apply or call invocation.

typeof
typeof is a unary operator with one operand. It is used to determine the types of things (a bit like getClass() in Java). The values outputted by typeof are "number", "string", "boolean", "undefined", "function", "object". 

view source

print?

console.log(typeof "tony");          // outputs string

console.log(typeof 6);               // outputs number

console.log(false);                  // outputs boolean

console.log(this.doesNotExist);   // outputs undefined if the global scope has no such var

console.log(typeof function(){});    // outputs function

console.log(typeof {name:"I am an object"});  //outputs object

console.log(typeof ["I am an array"]) // typedef outputs object for arrays

console.log(typeof null)              // typedef outputs object for nulls

Some implementations return "object" for typeof for regular expressions; others return "function". But the biggest problem with typeof is that it returns object for null. To test for null, use strict equality... 

view source

print?

if (myobject === null) {

...

}

Self-redefining functions
This is a good performance technique. Suppose you have a function and the first time it is called you want it to perform some set up code that you never want to perfom again. You can execute the set up code and then make the function redefine itself after that so that the setup code is never re-excuted. 

view source

print?

var myFunction = function () {

//set up code only to this once

alert("set up, only called once");

// set up code now complete.

// redefine function so that set up code is not re-executed

myFunction = function() {

alert("no set up code");

}

}

myFunction();  // outputs - Set up, only called once

myFunction();  // outputs - no set up code this time

myFunction();  // outputs - no set up code this time

Note, any properties added to the set up part of this function will be lost when the function redefines itself. In addition, if this function is used with a different name (i.e. it is assigned to a variable), the re-definition will not happen and the set up code will re-execute.Scope
In javascript there is a global scope and a function scope available for variables. The var keyword does not need to be used to define variable in the global scope but it must be used to define variable in the local function scope. When a variable is scoped to a local function shares the name with a global variable, the local scope takes precedence - unless var was not used to declare the local variable in which case any local references are pointing to the global reference. There is no block scope in javascript. By block we mean the code between {}, aka curly braces. 

view source

print?

var myFunction = function () {

var noBlockScope = function ( ) {

if (true) {

// you'd think that d would only be visible to this if statement

var d = 24;  

}

if (true) {

// this if statement can see the variable defined in the other if statement

console.log(d);

}

}

noBlockScope();

Single var pattern
You can define all variables used by a function in one place.  It is ensures tidy code and is considered best practise. 

view source

print?

function scrum() {

var numberOfProps = 2,

numberOfHookers = 1,

numberOfSecondRows = 2,

numberOfBackRow = 3

// function body...

}

If a variable is declared but not initialized with a value it will have the value undefined.
Strict Equality
In javascript it is possible to compare two objects using ==. However, in some cases this will perform type conversion which can yield unexpected equality matches. To ensure there is strict comparison (i.e. no type conversions) use the === syntax. 

print?

console.log(1 == true)    // outputs true

console.log(1 === true)   // outputs false

console.log(45 == "45")   // outputs true

console.log(45 === "45")  // outputs false

Truthy and Falsey
When javascript expects a boolean, you may specify a value of any type. Values that convert to true are said to be truthy and values that convert to false are said to be falsey. Example of truthy values are objects, arrays, functions, strings and numbers: 

view source

print?

// This will output 'Wow, they were all true'

if ({} && {sillyproperty:"sillyvalue"} && [] &&

['element'] && function() {} && "string" && 89) {

console.log("wow, they were all true");

}

Examples of falsey values are empty strings, undefined, null and the value  

view source

print?

// This will out put: 'none of them were true'

if (!("" || undefined || null || 0)) {

console.log("none of them were true");

}