JavaScript Syntax

• Case sensitivity
• Whitespace
• Semicolons
• Comments
• Identifiers
• Keywords
• Data Types
  • numbers
  • boolean
  • string
  • object
  • functions

JavaScript Syntax

Special mention:

• undefined, NaN and null
• "use strict";
• isNaN
• === vs ==

//Method 1
function f(x) {
"use strict";
var arguments = []; // error: redefinition of arguments
// ...
}
//Method 2
"use strict";
function f1(x) {
var arguments = [];
// ...
}
function f2(x) {
var arguments = []; // error: redefinition of arguments
// ...
}

Objects

• Collection of property-value.
• A property name can be any string, including the empty string.
• Value can have any defined Datatype of Javascript including other objects.
• Objects in JavaScript are class-free.

var empty_object = {};
var stooge = {
"first-name": "Jerome",
"last-name": "Howard"
};

Objects

Three common ways to create new objects

// Each of the following options will create a new empty object:
var newObject = {}; // or
var newObject = Object.create(null); // or
var newObject = new Object();

Objects

Four common ways to create new properties of objects

// ECMAScript 3 compatible approaches
// 1. Dot syntax
newObject.someKey = 'Hello World'; // Write properties
var key = newObject.someKey; // Access properties
// 2. Square bracket syntax
newObject['someKey'] = 'Hello World'; // Write properties
var key = newObject['someKey']; // Access properties

Objects

Four common ways to create new properties of objects

// ECMAScript 5 only compatible approaches
// For more information see: http://kangax.github.com/es5-compat-table/
// 3. Object.defineProperty
Object.defineProperty(newObject, "someKey", {
value: "for more control of the property's behavior",
writable: true,
enumerable: true,
configurable: true
});
// 4. Object.defineProperties
Object.defineProperties(newObject, {
"someKey": {
value: "Hello World",
writable: true
},
"anotherKey": {
value: "Foo bar",
writable: false
}
});

Refer defineProperties and defineProperty.

Objects

Few common things to note:

• Prototype
  • Delegation / Prototype Chain
• Reflection
  • typeof
  • hasOwnProperty

Functions

• Encloses the set of statements
• Functions are objects
• Functions Calling

Functions

Scoping in Javascript

var foo = 20;
function bar() {
    var foo = 30;
    if (true) {
        var foo = 10;
    }
    alert(foo);
}
bar();

Function-level scope

Functions

SIFE(Self Invoking Function Expression)

Functions

Function Declaration vs Function Expression

//Function Declaration
function bar() {
    return 3;
}
//anonymous function expression
var a = function() {
    return 3;
}

//named function expression
var a = function bar() {
    return 3;
}

//self invoking function expression
(function sayHello() {
    alert("hello!");
})();

Functions

Hoisted

//Question 1:
function foo(){
    function bar() {
        return 3;
    }
    return bar();
    function bar() {
        return 8;
    }
}
alert(foo());

//Question 2:
function foo(){
    var bar = function() {
        return 3;
    };
    return bar();
    var bar = function() {
        return 8;
    };
}
alert(foo());

//Question 3:
alert(foo());
function foo(){
    var bar = function() {
        return 3;
    };
    return bar();
    var bar = function() {
        return 8;
    };
}

//Question 4:

function foo(){
    return bar();
    var bar = function() {
        return 3;
    };
    var bar = function() {
        return 8;
    };
}
alert(foo());

Refer

Functions

Closure

A closure—unlike a plain function pointer—enables a function to access those non-local variables even when invoked outside its immediate lexical scope.

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}

var myFunc = makeFunc();
myFunc();

Create Calculator Like this Sum(5)(10) should return 10

Functions

Singleton class

Singleton class

Method 1

var Singleton = function(){
    if(Singleton.__instance) {
        return Singleton.__instance;
    }
    Singleton.__instance = this;
};

Singleton class

Method 2

var Singleton = function()
{
    // the cached instance
    var instance;

    // rewrite the constructor
    Singleton = function() {
    return instance;
    };

    // carry over the prototype
    Singleton.prototype = this;

    // the instance
    instance = new Singleton();

    // reset the constructor pointer
    instance.constructor = Singleton;

    return instance;
};