All About Stuff: JavaScript Software Engineer Handbook

The following guide comprises a compilaton of articles that I've found in the Web

Basic Types

var intValue = 1;
var floatValue = 3.0;
var stringValue = "This is a string\n";
var sqString = 'This is also a string';

noVar = "This a var as soon as it defined";

noVar2; // also a var but empty

Javascript is a dynamically typed language.
Variables are declared with the keyword var.
Or they can be declared with no var at all.
Common simple types are supported.
Variables have scope dependent from where they ae

You can reference all local variables inside the same function the variables are declared.
(L1) local variable declared with var keyword
(L2) local variable declared without var keyword
(L3) local variable declared with var keyword inside if statement

You can reference all global variables inside any function.
(G1) global variable declared with var keyword
(G2) global variable without var keyword
(G3) global variable declared with var keyword inside if statement

Outside a function, you can only reference local variables that are not declared with the var keyword.
Commented out. Cannot reference (L1)
(L2) local variable declared without var keyword
Commented out. Cannot reference (L3)

Outside a function, you can reference all global variables.
(G1) global variable declared with var keyword
(G2) global variable without var keyword
(G3) global variable declared with var keyword inside if statement

The output above is generated with the following code:

Note that this JavaScript is placed between the <body> tags, not in the <head>.

<script type="text/javascript" language="JavaScript">
<!--
var globalVar1 = '(G1) global variable declared with var keyword';
globalVar2 = '(G2) global variable without var keyword';
var someBoolean = true;
if (someBoolean) {
 var globalVar3 = '(G3) global variable declared with var keyword inside if statement';
}

function sampleFunction()
{
 var localVar1 = '(L1) local variable declared with var keyword';
 localVar2 = '(L2) local variable declared without var keyword';
 if (someBoolean) {
  var localVar3 = '(L3) local variable declared with var keyword inside if statement';
 }
 
 document.writeln('<b>You can reference all local variables inside the same function the variables are declared.</b><br />');
 document.writeln(localVar1 + '<br />');
 document.writeln(localVar2 + '<br />');
 document.writeln(localVar3 + '<br /><br />');
 
 document.writeln('<b>You can reference all global variables inside any function.</b><br />');
 document.writeln(globalVar1 + '<br />');
 document.writeln(globalVar2 + '<br />');
 document.writeln(globalVar3 + '<br /><br />');
}

sampleFunction();

document.writeln('<b>Outside a function, you can only reference local variables that are not declared with the var keyword.</b><br />');
document.writeln('Commented out. Cannot reference (L1)<br />'); //document.writeln(localVar1 + '<br />');
document.writeln(localVar2 + '<br />');
document.writeln('Commented out. Cannot reference (L3)<br /><br />'); //document.writeln(localVar3 + '<br />');

document.writeln('<b>Outside a function, you can reference all global variables.</b><br />');
document.writeln(globalVar1 + '<br />');
document.writeln(globalVar2 + '<br />');
document.writeln(globalVar3);
//-->
</script>

Operators

Given that x=5, the table below explains the comparison operators:

==	is equal to	x==8 is false x==5 is true
===	is exactly equal to (value and type)	x===5 is true x==="5" is false
!=	is not equal	x!=8 is true
>	is greater than	x>8 is false
<	is less than	x<8 is true
>=	is greater than or equal to	x>=8 is false
<=	is less than or equal to	x<=8 is true

Arrays

var emptyList = [];
var homogenousList = [1, 2, 3];
var heterogenousList = ["one", 2, 3.0];

Javascript has built-in collection objects. The Array object is a dynamically typed sequence of Javascript values. They are created with the bracket notation [] or with the new operator on the Array object (e.g. new Array(5)).

Property Maps

var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
                       "two": "two",
                       "three": 3.0};

Along with Arrays are the Object objects. They act as property maps with strings serving as keys to dynamically typed data.

Access

// Dot notation property access
window.alert("Homogenous map property \"one\" "
             + homogenousMap.one);
// Subscript notation property access
window.alert("Homogenous map property \"two\" "
             + homogenousMap["two"]);

Assignment

homogenousMap["one"] = 10;
homogenousMap.two = 20;

Removal

delete homogenousMap["one"];
delete homogenousMap.two;

Iteration

for (var key in heterogenousMap) {
    window.alert("Heterogenous map property \""
                 + key
                 + "\" = "
                 + heterogenousMap[key]);
}

Functions

var callable = function (message) { // <-- notice assignment
    window.alert("Callable called with message = "
                 + message);
}


function createClosure(initial) {
    var res = function () {
        initial = initial + 1;
        window.alert("Closure with modified state "
                     + initial);
    }
    return res;
}

function callCallable(f, x) {
    f(x);
}

function composeCallables(f, g, x) {
    f(g(x));
}

Functions are first-class objects. That means that they can be created dynamically, stored, passed and returned just like any other value.

Objects

function MyObject(name, value) {
    this.name = name;
    this.value = value;
}

Javascript supports prototype based object orientation. Not a class type but an object constructor is created for new objects with particular properties. In the example above the this keyword used to reference the ''current instance'' of the object. The this object is essentially a property map with members accessed (and initialized) in this example with the dot notation.
The object constructor, MyObject, is an object constructor not in how it's defined, which looks like any other Javascript function, but in how it's ''invoked''.

var my = new MyObject("foo", 5);

The new operator before the function invokes the function with a newly construced object as this and returns that the initialized object.

Object Prototype

Part of what makes a language object oriented is that data not only has properties but also ''behaviors''. Also known as: member functions; methods; and object messages. To implement a member function in Javascript one would be tempted to write something like what's below based on the member initialization exampled above.

function BadObject(data) {
    this.data = data
    this.memberFunction = function () {
        // ...functions on data...
    }
}

While the code above will work without error, it does create a new closure for each member function for each new instance of the object. What's really required is a class level function that works on instance data. But remember, Javascript objects aren't class based but prototype based. So how do we implement "class" level member functions? (Skip to Implementation) Better yet, how do we implement "class" level members functions in general?
Enter the prototype member.
The internal object member, prototype, has language defined significance in that it is used for resolving property names if the property isn't found in the current property map. It's considered internal because, while the instance'sprototype member is ''inherited'' from the ''constructor's'' prototype member, it cannot be accessed directly from the object instance itself. The defined prototype member is a property map itself which holds members for property name resolution. Consider the example below:

var parentPropertyMap = {"bar": "I'm the bar"};

 // Define the constructor with inheritable properties
 function ChildObject(foo) {
     this.foo = foo;
 }
 ChildObject.prototype = parentPropertyMap;

 childPropertyMap1 = new ChildObject("I'm the foo1");
 childPropertyMap2 = new ChildObject("I'm the foo2");

 // Prints "childPropertyMap1.foo = I'm the foo1"
 window.alert("childPropertyMap1.foo = " + childPropertyMap1.foo);

 // Prints "childPropertyMap2.foo = I'm the foo2"
 window.alert("childPropertyMap2.foo = " + childPropertyMap2.foo);

 // Prints "childPropertyMap1.bar = I'm the bar"
 window.alert("childPropertyMap1.bar = " + childPropertyMap1.bar);

 // Prints "childPropertyMap2.bar = I'm the bar"
 window.alert("childPropertyMap2.bar = " + childPropertyMap2.bar);

The member foo is an instance member added to the instance's property map during construction:

function ChildObject(foo) {
     this.foo = foo;
 }

while bar is in the constructor's prototype:

var parentPropertyMap = {"bar": "I'm the bar"};
 ...
 ChildObject.prototype = parentPropertyMap;

which is ''inherited'' during the new operation:

childPropertyMap1 = new ChildObject("I'm the foo1");
 childPropertyMap2 = new ChildObject("I'm the foo2");

In other words, the member, bar, is shared across all instances of ChildObject.
Therefore, by implementing the prototype member of the constructor function, we can think of the constructor function itself as the "class" object. Complete with static class functions:

function ClassObject() {}
 ClassObject.staticClassFunction = function(x) {
     return x * 2;
 }

static class variables:

function ClassObject() {}
 ClassObject.staticClassVariable = 5;

shared member variables:

function ClassObject() {}
 ClassObject.prototype.sharedMember = 5;

and of course, shared member functions:

function ClassObject(x) {
     this.x = x;
 }
 ClassObject.prototype.memberFunction = function(x) {
     return x * this.x;
 }

Member Function Implementation

function Message(message) {
    this.message = message;
}

Message.prototype.show = function() {
    window.alert("Message.show() with message = "
                 + this.message);
}

All About Stuff

quinta-feira, 2 de fevereiro de 2012

JavaScript Software Engineer Handbook