Data types

JavaScript has six primitive data types,

undefined - A variable that has not been assigned a value is of type undefined.

null - A special keyword denoting a null value.

Boolean - A logical entity that consists of either a true or false value.

Number - A set of numerical digits that represent a number.

String - A set of zero or more characters.

Symbol - It is a new feature in ECMAScript 2015 (ES6). Symbols are tokens that serve as unique IDs.

Variables

You can use variables as symbolic names for values in application. The names of variables, is called identifiers. Variables can be declared with keyword var.

Variable scope

When you declare variables outside of function , its called global variable. When you declare within a function, its called local variable. JavaScript does not have block statement scope.

Hoisting

You can refer to variable declared later without getting exception. This concept is called “Hoisting”, variables in JavaScript are in a sense “hoisted” or lifted to the top of the function.

Constants

You can create read-only, named constant with const keyword.  A constant cannot change value through assignment.

Literals

These are fixed values, not variables, that you literally provide in you script.

• Array Literals

var coffees = ["French Roast","Colombian","Kona"];

• Boolean Literals

The boolean type has two literal values true, false.

• Object Literals

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces.

var solarSystem = { 
    planets: ['mercury', 'venus', 'neptune', 'mars', 'earth', 'jupiter', 'saturn', 'uranus']
};

• String literals

A string literal is zero or more characters enclosed in double or single quotation marks.

'foo'
"baz"

• Template literals

EcmaScript2015(ES6) introduced Template literals. They are text enclosed in back ticks instead of double or single quotes.

`Hello world!`

References

• Data and Structure types
• Symbols in ECMAScript 6
• Grammar and types
• Data types

In JavaScript, binding is always explicit, and can be easily lost, so a method using “this” will not refer to the proper object in all situations,  unless you force it to. JavaScript provides two options to do explicit binding “apply” and “call”.

Apply

Every JavaScript function is equipped with “apply” method that allows you to call the function with specific binding. I takes two arguments, the binding object and an array of arguments to be passed to the function.

fun.apply(thisArg[, argsArray])

Call

“Call” method is similar to “apply”, but it takes the arguments themselves not an array.

fun.call(thisArg[, arg1[, arg2[, ...]]])

References

• http://www.alistapart.com/articles/getoutbindingsituations
• https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply
• https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call
• http://stackoverflow.com/questions/962033/what-underlies-this-javascript-idiom-var-self-this

JavaScript event delegation is a simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements.

Event capturing

Netscape defined an approach called event capturing, where events occur on the highest object in the DOM tree and then work down to the deepest element affected by the event.

Event bubbling

IE defined event bubbling. The deepest element affected by the event should receive the event first , then its parent, etc., until the document object finally receives the event.

W3C DOM level 2 events specification defines both event bubbling and capturing. First the document receives the event, then the capturing phase commences to the most specific element affected by the event. Once the event is handled by the element, it bubbles back up to the document.

Advantages

• Less event handlers to setup and reside in memory.
• No need to re-attach handlers after a DOM update.

References:

• http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/
• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/

Public

The members of an object are all public members. There are two ways for putting members in a new object.

In Constructor

function Container(param) {
    this.member = param;
}

In the prototype

This technique is used to add public methods.

Container.prototype.stamp = function (string) {
    return this.member + string;
}

Private

Private members are made by the constructor. Ordinary vars and parameters of the constructor become the private members.

function Container(param) {
    this.member = param;
    var secret = 3;
    var that = this;
}

Privileged

A privileged method is able to access private methods, variables and is itself accessible to the public method and the outside.  Privileged methods are assigned with “this” within the constructor.

function Container(param) {
    this.member = param;

    this.service = function () {
        return this.member;
    };
}

References:

• http://javascript.crockford.com/private.html
• http://phrogz.net/JS/classes/OOPinJS.html
• https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain
• https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

Function declaration

function name([param[, param[, ... param]]]) {
   statements
}

Example

function sum(a, b)
{
    return a + b;
}

name - The function name

param - The name of the argument to be passed to the function. A function can have up to 255 arguments.

statements - The body of the function

Function expression

function [name]([param] [, param] [..., param]) {
   statements
}

Example

var sum = function(a, b) { return a + b; }

Anonymous function

The name can be omitted in which case it becomes anonymous function. Anonymous functions can help make code more concise when declaring a function that will only be used in one place.

Example

var ar = [1,2,3];
var newAr = ar.map(function(e) { return e * 2});
console.log(newAr); //[2,4,6]

Function constructor

Function objects can be created with new operator

new Function (arg1, arg2, ... argN, functionBody)

Example

var sum = new Function('a','b', 'return a + b;');

arg1, arg2, … argN - zero or more names to be used by the function as argument names

functionBody - A string containing JavaScript statements forming the function body.

References

• Functions
• Why do you need to invoke an anonymous function on the same line?