Frontend_Questions_Answers

Specially refer:
https://github.com/darcyclarke/Front-end-Developer-Interview-Questions
(READ AT HOME) 
http://www.quirksmode.org/js/contents.html (FOR IN PERSON)
http://blog.sourcing.io/interview-questions 
http://www.careercup.com/page?pid=front-end-web-development-interview-questions

 
Javascript:
Good for reference: 
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide
(READ AT HOME)  (FOR IN PERSON)
http://www.programmerinterview.com/index.php/javascript/javascript-introduction/ (EXCELLENT)
http://blog.kevinchisholm.com/object-oriented-javascript/javascript-interview-questions-object-oriented-javascript/ (EXCELLENT) 
http://doppnet.com/2011/10/10-advanced-javascript-interview-questions/
http://stackoverflow.com/questions/2492123/pro-javascript-programmer-interview-questions-with-answers 
 
What is the difference between using var keyword in java script & without using it for a variable?
For example:
var x = 14;
And x = 14;
Are these same or when we declare var x, its a local variable & when it doesn't have var keyword, then its global?
If var is used within a function or other non-global scope then the variable is not a global variable. If var is not used before a variable name, then you have created a global variable.
When would you use var in your declaration and when you wouldn’t?
Always use var. Not using var for variable declaration will traverse scopes all the way up till the global scope. If variable with that name is not found it will declare it in the global scope. Therefore not using var implicitly declares variable in the global scope (which, let me remind you, is a bad practice).
(function() {
   baz = 5;
   var bar = 10;
})();
 
console.log(baz); // outputs 5
//console.log(bar); // error: bar is not defined
Try it: http://jsfiddle.net/tnajdek/AKxn9/
A common mistake is to not use var in loops (e.g. for(i=0; i<10; i++) when i has not been previously declared) which will pollute the global scope and in some cases might bear unexpected results.
What does the attribute defer/async do when added to the script tag?
The defer attribute will cause browser to execute script after the document has been parsed. This attribute was first implemented in Internet Explorer 4, then added to HTML 4 and more recently HTML 5 spec. You might not have heard of it as it has not been supported by other browsers (Firefox support came in version 3.5 - Gecko 1.9.2). Async is another attribute that can affect how a script is loaded and executed, here is a quote from HTML 5 spec on how this is expected to work:
There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.
Note: A somewhat (but not exactly) similar defer behavior can be achieved by placing your script tags at the end of the body tag and that's what is considered to be modern 'best practice'
What is the difference between == and ===? Which one would you use?
The equality (==) operator will compare for equality after doing necessary type casting, the identity operator (===) doesn't do any conversions. A good practice suggested by Douglas Crockford is to always use strict equality,  couple of examples from Douglas' book JavaScript: The Good Parts
'' == '0'          // false
0 == ''            // true
0 == '0'           // true
 
false == 'false'   // false
false == '0'       // true
 
false == undefined // false
false == null      // false
null == undefined  // true
How would you check if a variable is null/undefined?
//check if bar is null
bar === null
//check if bar is undefined
typeof bar === "undefined"
How do you check if a variable is an object
You can use typeof to determine if variable is an object, however bear in mind that null is actually an object! However null object is 'falsy' thus the following will work:
if(bar && typeof bar === "object") {
    console.log('bar is object and is not null');
}
Discuss  scoping in JavaScript.
JavaScript has lexical scoping based on functions but not blocks. Therefore:
//global scope
(function() {
    //anonymous function scope
    var foo = 1;
    function bar() {
        //bar function scope
        var foo = 2;
    }
    bar();
    console.log(foo); //outputs 1
    if(true) {
        var foo = 3; //redeclares foo
    }
    console.log(foo); //outputs 3
})();
Try it: http://jsfiddle.net/tnajdek/8y3XC/. Note: from within function scope everything in above scope(s) is available (see closures below)
Explain hoisting in JavaScript.
As some might not be familiar with the term 'hoisting' yet have the relevant experience this question could be asked indirectly
In JavaScript function declarations ( function foo() {} ) and variable declarations ( var bar  ) are 'hoisted' i.e. are silently moved to the very top of the scope. Consider the following code:
(function() {
    console.log(bar); //returns 'undefined'
    //console.log(baz) // error: baz is not defined
    foo(); // outputs 'aloha' to the console
 
    //function declaration AND its body is hoisted
    function foo() {
        console.log('aloha');
    }
    //variable declaration is hoisted but value assignment stays here
    var bar = 1;
    baz = 2; //defines baz in global scope
})();
See for yourself: http://jsfiddle.net/tnajdek/FxDrj/
What are closures?
(function() {
    function foo(x) {
        var baz = 3;
        return function (y) {
        console.log(x + y + (++baz));
        }
    }
var moo = foo(2); // moo is now a closure.
moo(1); // 7
moo(1); // 8!
})();
The inner function inside foo will close-over the variables of foo before leaving creating a closure.
Try it: http://jsfiddle.net/tnajdek/Rj6mK/
Explain prototypal/differential inheritance
Conceptually this is very simple: A new object can inherit properties of an old object.
(function() {
    var genericObject = {
        bar : "Hello World",
        get_bar : function() {
            return this.bar;
        }
    };
    var customObject = Object.create(genericObject);
    customObject.bar = "Aloha folks!";
    console.log(customObject.get_bar()); //outputs: "Aloha folks"
    delete customObject.bar;
    console.log(customObject.get_bar()); //fallbacks to the prototype's value, outputs: "Hello World"
})();
While JavaScript has always been a prototype-oriented language, tools to work with prototypes were somewhat missing. Object.create used in the code snipped above has been added in ECMAScript 5 and has not been supported prior to Firefox 4, Chrome 5, IE 9
What is Strict Mode in JavaScript
Strict Mode has been introduced as part of ECMAScript 5 and introduces new, restricted variant of JavaScript which has following aims:
•	Throws errors for actions that are rather silly but previously didn't throw an error
•	Throws errors for potentially unsafe actions
•	Disables functions that are poorly thought out
•	Potentially code in strict mode could run faster by eliminating mistakes that would make it difficult for JavaScript engines to perform optimizations
Strict mode can be enabled for the entire source file or on per function basis by adding a string literal "use strict" on top of the file/function i.e.
function foo(){
  "use strict";
  // ... your code ...
}
For more detailed information about the strict mode consult relevant article on MDN
Extra topics for discussion:
•	What's your favorite browser, framework, JavaScript book
•	How do you approach debugging in JavaScript
•	What do you think of JSLint?
•	Browser detection vs. feature sniffing
http://www.techrepublic.com/blog/software-engineer/javascript-interview-questions-and-answers/
http://ryanmorr.com/understanding-scope-and-context-in-javascript/
http://bonsaiden.github.io/JavaScript-Garden/
Objects
Object Usage and Properties
Everything in JavaScript acts like an object, with the only two exceptions being null and undefined.
false.toString(); // 'false'
[1, 2, 3].toString(); // '1,2,3'

function Foo(){}
Foo.bar = 1;
Foo.bar; // 1
A common misconception is that number literals cannot be used as objects. That is because a flaw in JavaScript's parser tries to parse the dot notation on a number as a floating point literal.
2.toString(); // raises SyntaxError
There are a couple of workarounds that can be used to make number literals act as objects too.
2..toString(); // the second point is correctly recognized
2 .toString(); // note the space left to the dot
(2).toString(); // 2 is evaluated first
Objects as a Data Type
Objects in JavaScript can also be used as Hashmaps; they mainly consist of named properties mapping to values.
Using an object literal - {} notation - it is possible to create a plain object. This new object inherits from Object.prototype and does not have own properties defined.
var foo = {}; // a new empty object

// a new object with a 'test' property with value 12
var bar = {test: 12}; 
Accessing Properties
The properties of an object can be accessed in two ways, via either the dot notation or the square bracket notation.
var foo = {name: 'kitten'}
foo.name; // kitten
foo['name']; // kitten

var get = 'name';
foo[get]; // kitten

foo.1234; // SyntaxError
foo['1234']; // works
The notations work almost identically, with the only difference being that the square bracket notation allows for dynamic setting of properties and the use of property names that would otherwise lead to a syntax error.
Deleting Properties
The only way to remove a property from an object is to use the deleteoperator; setting the property to undefined or null only removes the valueassociated with the property, but not the key.
var obj = {
    bar: 1,
    foo: 2,
    baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;

for(var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, '' + obj[i]);
    }
}
The above outputs both bar undefined and foo null - only baz was removed and is therefore missing from the output.
Notation of Keys
var test = {
    'case': 'I am a keyword, so I must be notated as a string',
    delete: 'I am a keyword, so me too' // raises SyntaxError
};
Object properties can be both notated as plain characters and as strings. Due to another mis-design in JavaScript's parser, the above will throw aSyntaxError prior to ECMAScript 5.
This error arises from the fact that delete is a keyword; therefore, it must be notated as a string literal to ensure that it will be correctly interpreted by older JavaScript engines.
The Prototype
JavaScript does not feature a classical inheritance model; instead, it uses aprototypal one.
While this is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model is in fact more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model, while the other way around is a far more difficult task.
JavaScript is the only widely used language that features prototypal inheritance, so it can take time to adjust to the differences between the two models.
The first major difference is that inheritance in JavaScript uses prototype chains.
Note: Simply usingBar.prototype = Foo.prototype will result in both objects sharing the sameprototype. Therefore, changes to either object's prototype will affect the prototype of the other as well, which in most cases is not the desired effect.
function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// Set Bar's prototype to a new instance of Foo
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// Make sure to list Bar as the actual constructor
Bar.prototype.constructor = Bar;

var test = new Bar(); // create a new bar instance

// The resulting prototype chain
test [instance of Bar]
    Bar.prototype [instance of Foo]
        { foo: 'Hello World' }
        Foo.prototype
            { method: ... }
            Object.prototype
                { toString: ... /* etc. */ }
In the code above, the object test will inherit from both Bar.prototype andFoo.prototype; hence, it will have access to the function method that was defined on Foo. It will also have access to the property value of the oneFoo instance that is its prototype. It is important to note that new Bar()does not create a new Foo instance, but reuses the one assigned to its prototype; thus, all Bar instances will share the same value property.
Note: Do not useBar.prototype = Foo, since it will not point to the prototype of Foo but rather to the function object Foo. So the prototype chain will go overFunction.prototype and notFoo.prototype; therefore,method will not be on the prototype chain.
Property Lookup
When accessing the properties of an object, JavaScript will traverse the prototype chain upwards until it finds a property with the requested name.
If it reaches the top of the chain - namely Object.prototype - and still hasn't found the specified property, it will return the value undefined instead.
The Prototype Property
While the prototype property is used by the language to build the prototype chains, it is still possible to assign any given value to it. However, primitives will simply get ignored when assigned as a prototype.
function Foo() {}
Foo.prototype = 1; // no effect
Assigning objects, as shown in the example above, will work, and allows for dynamic creation of prototype chains.
Performance
The lookup time for properties that are high up on the prototype chain can have a negative impact on performance, and this may be significant in code where performance is critical. Additionally, trying to access non-existent properties will always traverse the full prototype chain.
Also, when iterating over the properties of an object every property that is on the prototype chain will be enumerated.
Extension of Native Prototypes
One mis-feature that is often used is to extend Object.prototype or one of the other built in prototypes.
This technique is called monkey patching and breaks encapsulation. While used by popular frameworks such as Prototype, there is still no good reason for cluttering built-in types with additional non-standard functionality.
The only good reason for extending a built-in prototype is to backport the features of newer JavaScript engines; for example, Array.forEach.
In Conclusion
It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should neverbe extended unless it is for the sake of compatibility with newer JavaScript features.
hasOwnProperty
To check whether an object has a property defined on itself and not somewhere on its prototype chain, it is necessary to use the hasOwnPropertymethod which all objects inherit from Object.prototype.
Note: It is not enough to check whether a property isundefined. The property might very well exist, but its value just happens to be set toundefined.
hasOwnProperty is the only thing in JavaScript which deals with properties and does not traverse the prototype chain.
// Poisoning Object.prototype
Object.prototype.bar = 1;
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true
Only hasOwnProperty will give the correct and expected result; this is essential when iterating over the properties of any object. There is no other way to exclude properties that are not defined on the object itself, but somewhere on its prototype chain.
hasOwnProperty as a Property
JavaScript does not protect the property name hasOwnProperty; thus, if the possibility exists that an object might have a property with this name, it is necessary to use an external hasOwnProperty to get correct results.
var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // always returns false

// Use another Object's hasOwnProperty and call it with 'this' set to foo
({}).hasOwnProperty.call(foo, 'bar'); // true

// It's also possible to use hasOwnProperty from the Object
// prototype for this purpose
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
In Conclusion
Using hasOwnProperty is the only reliable method to check for the existence of a property on an object. It is recommended that hasOwnProperty is used inevery for in loop to avoid errors from extended native prototypes.
The for in Loop
Just like the in operator, the for in loop traverses the prototype chain when iterating over the properties of an object.
Note: The for in loop will notiterate over any properties that have their enumerable attribute set to false; for example, thelength property of an array.
// Poisoning Object.prototype
Object.prototype.bar = 1;

var foo = {moo: 2};
for(var i in foo) {
    console.log(i); // prints both bar and moo
}
Since it is not possible to change the behavior of the for in loop itself, it is necessary to filter out the unwanted properties inside the loop body; this is done using the hasOwnProperty method of Object.prototype.
Note: Since for in always traverses the complete prototype chain, it will get slower with each additional layer of inheritance added to an object.
Using hasOwnProperty for Filtering
// still the foo from above
for(var i in foo) {
    if (foo.hasOwnProperty(i)) {
        console.log(i);
    }
}
This version is the only correct one to use. Due to the use of hasOwnProperty, it will only print out moo. When hasOwnProperty is left out, the code is prone to errors in cases where the native prototypes - e.g. Object.prototype - have been extended.
One widely used framework that extends Object.prototype is Prototype. When this framework is included, for in loops that do not usehasOwnProperty are guaranteed to break.
In Conclusion
It is recommended to always use hasOwnProperty. Assumptions should never be made about the environment the code is running in, or whether the native prototypes have been extended or not.
Functions
Function Declarations and Expressions
Functions in JavaScript are first class objects. That means they can be passed around like any other value. One common use of this feature is to pass ananonymous function as a callback to another, possibly an asynchronous function.
The function Declaration
function foo() {}
The above function gets hoisted before the execution of the program starts; thus, it is available everywhere in the scope it was defined, even if called before the actual definition in the source.
foo(); // Works because foo was created before this code runs
function foo() {}
The function Expression
var foo = function() {};
This example assigns the unnamed and anonymous function to the variablefoo.
foo; // 'undefined'
foo(); // this raises a TypeError
var foo = function() {};
Due to the fact that var is a declaration that hoists the variable name foobefore the actual execution of the code starts, foo is already declared when the script gets executed.
But since assignments only happen at runtime, the value of foo will default toundefined before the corresponding code is executed.
Named Function Expression
Another special case is the assignment of named functions.
var foo = function bar() {
    bar(); // Works
}
bar(); // ReferenceError
Here, bar is not available in the outer scope, since the function only gets assigned to foo; however, inside of bar, it is available. This is due to howname resolution in JavaScript works, the name of the function is always made available in the local scope of the function itself.
How this Works
JavaScript has a different concept of what the special name this refers to than most other programming languages. There are exactly five different ways in which the value of this can be bound in the language.
The Global Scope
this;
When using this in global scope, it will simply refer to the global object.
Calling a Function
foo();
Here, this will again refer to the global object.
ES5 Note: In strict mode, the global case no longer exists.this will instead have the value of undefined in that case.
Calling a Method
test.foo(); 
In this example, this will refer to test.
Calling a Constructor
new foo(); 
A function call that is preceded by the new keyword acts as a constructor. Inside the function, this will refer to a newly created Object.
Explicit Setting of this
function foo(a, b, c) {}

var bar = {};
foo.apply(bar, [1, 2, 3]); // array will expand to the below
foo.call(bar, 1, 2, 3); // results in a = 1, b = 2, c = 3
When using the call or apply methods of Function.prototype, the value of this inside the called function gets explicitly set to the first argument of the corresponding function call.
As a result, in the above example the method case does not apply, and thisinside of foo will be set to bar.
Note: this cannot be used to refer to the object inside of an Object literal. So var obj = {me: this} will not result inme referring to obj, sincethis only gets bound by one of the five listed cases.
Common Pitfalls
While most of these cases make sense, the first can be considered another mis-design of the language because it never has any practical use.
Foo.method = function() {
    function test() {
        // this is set to the global object
    }
    test();
}
A common misconception is that this inside of test refers to Foo; while in fact, it does not.
In order to gain access to Foo from within test, it is necessary to create a local variable inside of method that refers to Foo.
Foo.method = function() {
    var that = this;
    function test() {
        // Use that instead of this here
    }
    test();
}
that is just a normal variable name, but it is commonly used for the reference to an outer this. In combination with closures, it can also be used to pass this values around.
Assigning Methods
Another thing that does not work in JavaScript is function aliasing, which isassigning a method to a variable.
var test = someObject.methodTest;
test();
Due to the first case, test now acts like a plain function call; therefore, thisinside it will no longer refer to someObject.
While the late binding of this might seem like a bad idea at first, in fact, it is what makes prototypal inheritance work.
function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();
When method gets called on an instance of Bar, this will now refer to that very instance.
Closures and References
One of JavaScript's most powerful features is the availability of closures. With closures, scopes always keep access to the outer scope, in which they were defined. Since the only scoping that JavaScript has is function scope, all functions, by default, act as closures.
Emulating private variables
function Counter(start) {
    var count = start;
    return {
        increment: function() {
            count++;
        },

        get: function() {
            return count;
        }
    }
}

var foo = Counter(4);
foo.increment();
foo.get(); // 5
Here, Counter returns two closures: the function increment as well as the function get. Both of these functions keep a reference to the scope ofCounter and, therefore, always keep access to the count variable that was defined in that scope.
Why Private Variables Work
Since it is not possible to reference or assign scopes in JavaScript, there is noway of accessing the variable count from the outside. The only way to interact with it is via the two closures.
var foo = new Counter(4);
foo.hack = function() {
    count = 1337;
};
The above code will not change the variable count in the scope of Counter, since foo.hack was not defined in that scope. It will instead create - or override - the global variable count.
Closures Inside Loops
One often made mistake is to use closures inside of loops, as if they were copying the value of the loop's index variable.
for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}
The above will not output the numbers 0 through 9, but will simply print the number 10 ten times.
The anonymous function keeps a reference to i. At the time console.loggets called, the for loop has already finished, and the value of i has been set to 10.
In order to get the desired behavior, it is necessary to create a copy of the value of i.
Avoiding the Reference Problem
In order to copy the value of the loop's index variable, it is best to use ananonymous wrapper.
for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}
The anonymous outer function gets called immediately with i as its first argument and will receive a copy of the value of i as its parameter e.
The anonymous function that gets passed to setTimeout now has a reference to e, whose value does not get changed by the loop.
There is another possible way of achieving this, which is to return a function from the anonymous wrapper that will then have the same behavior as the code above.
for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}
There's yet another way to accomplish this by using .bind, which can bind athis context and arguments to function. It behaves identially to the code above
for(var i = 0; i < 10; i++) {
    setTimeout(console.log.bind(console, i), 1000);
}
The arguments Object
Every function scope in JavaScript can access the special variable arguments. This variable holds a list of all the arguments that were passed to the function.
Note: In case arguments has already been defined inside the function's scope either via avar statement or being the name of a formal parameter, the arguments object will not be created.
The arguments object is not an Array. While it has some of the semantics of an array - namely the length property - it does not inherit fromArray.prototype and is in fact an Object.
Due to this, it is not possible to use standard array methods like push, popor slice on arguments. While iteration with a plain for loop works just fine, it is necessary to convert it to a real Array in order to use the standardArray methods on it.
Converting to an Array
The code below will return a new Array containing all the elements of thearguments object.
Array.prototype.slice.call(arguments);
Because this conversion is slow, it is not recommended to use it in performance-critical sections of code.
Passing Arguments
The following is the recommended way of passing arguments from one function to another.
function foo() {
    bar.apply(null, arguments);
}
function bar(a, b, c) {
    // do stuff here
}
Another trick is to use both call and apply together to create fast, unbound wrappers.
function Foo() {}

Foo.prototype.method = function(a, b, c) {
    console.log(this, a, b, c);
};

// Create an unbound version of "method" 
// It takes the parameters: this, arg1, arg2...argN
Foo.method = function() {

    // Result: Foo.prototype.method.call(this, arg1, arg2... argN)
    Function.call.apply(Foo.prototype.method, arguments);
};
Formal Parameters and Arguments Indices
The arguments object creates getter and setter functions for both its properties, as well as the function's formal parameters.
As a result, changing the value of a formal parameter will also change the value of the corresponding property on the arguments object, and the other way around.
function foo(a, b, c) {
    arguments[0] = 2;
    a; // 2

    b = 4;
    arguments[1]; // 4

    var d = c;
    d = 9;
    c; // 3
}
foo(1, 2, 3);
Performance Myths and Truths
The only time the arguments object is not created is where it is declared as a name inside of a function or one of its formal parameters. It does not matter whether it is used or not.
Both getters and setters are always created; thus, using it has nearly no performance impact at all, especially not in real world code where there is more than a simple access to the arguments object's properties.
ES5 Note: These getters andsetters are not created in strict mode.
However, there is one case which will drastically reduce the performance in modern JavaScript engines. That case is the use of arguments.callee.
function foo() {
    arguments.callee; // do something with this function object
    arguments.callee.caller; // and the calling function object
}

function bigLoop() {
    for(var i = 0; i < 100000; i++) {
        foo(); // Would normally be inlined...
    }
}
In the above code, foo can no longer be a subject to inlining since it needs to know about both itself and its caller. This not only defeats possible performance gains that would arise from inlining, but it also breaks encapsulation because the function may now be dependent on a specific calling context.
Making use of arguments.callee or any of its properties is highly discouraged.
ES5 Note: In strict mode,arguments.callee will throw aTypeError since its use has been deprecated.
Constructors
Constructors in JavaScript are yet again different from many other languages. Any function call that is preceded by the new keyword acts as a constructor.
Inside the constructor - the called function - the value of this refers to a newly created object. The prototype of this new object is set to theprototype of the function object that was invoked as the constructor.
If the function that was called has no explicit return statement, then it implicitly returns the value of this - the new object.
function Foo() {
    this.bla = 1;
}

Foo.prototype.test = function() {
    console.log(this.bla);
};

var test = new Foo();
The above calls Foo as constructor and sets the prototype of the newly created object to Foo.prototype.
In case of an explicit return statement, the function returns the value specified by that statement, but only if the return value is an Object.
function Bar() {
    return 2;
}
new Bar(); // a new object

function Test() {
    this.value = 2;

    return {
        foo: 1
    };
}
new Test(); // the returned object
When the new keyword is omitted, the function will not return a new object.
function Foo() {
    this.bla = 1; // gets set on the global object
}
Foo(); // undefined
While the above example might still appear to work in some cases, due to the workings of this in JavaScript, it will use the global object as the value ofthis.
Factories
In order to be able to omit the new keyword, the constructor function has to explicitly return a value.
function Bar() {
    var value = 1;
    return {
        method: function() {
            return value;
        }
    }
}
Bar.prototype = {
    foo: function() {}
};

new Bar();
Bar();
Both calls to Bar return the same thing, a newly create object that has a property called method, which is a Closure.
It should also be noted that the call new Bar() does not affect the prototype of the returned object. While the prototype will be set on the newly created object, Bar never returns that new object.
In the above example, there is no functional difference between using and not using the new keyword.
Creating New Objects via Factories
It is often recommended to not use new because forgetting its use may lead to bugs.
In order to create a new object, one should rather use a factory and construct a new object inside of that factory.
function Foo() {
    var obj = {};
    obj.value = 'blub';

    var private = 2;
    obj.someMethod = function(value) {
        this.value = value;
    }

    obj.getPrivate = function() {
        return private;
    }
    return obj;
}
While the above is robust against a missing new keyword and certainly makes the use of private variables easier, it comes with some downsides.
1.	It uses more memory since the created objects do not share the methods on a prototype.
2.	In order to inherit, the factory needs to copy all the methods from another object or put that object on the prototype of the new object.
3.	Dropping the prototype chain just because of a left out new keyword is contrary to the spirit of the language.
In Conclusion
While omitting the new keyword might lead to bugs, it is certainly not a reason to drop the use of prototypes altogether. In the end it comes down to which solution is better suited for the needs of the application. It is especially important to choose a specific style of object creation and use it consistently.
Scopes and Namespaces
Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope.
function test() { // a scope
    for(var i = 0; i < 10; i++) { // not a scope
        // count
    }
    console.log(i); // 10
}
Note: When not used in an assignment, return statement or as a function argument, the{...} notation will get interpreted as a block statement and not as an object literal. This, in conjunction with automatic insertion of semicolons, can lead to subtle errors.
There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace.
Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError.
The Bane of Global Variables
// script A
foo = '42';

// script B
var foo = '42'
The above two scripts do not have the same effect. Script A defines a variable called foo in the global scope, and script B defines a foo in the currentscope.
Again, that is not at all the same effect: not using var can have major implications.
// global scope
var foo = 42;
function test() {
    // local scope
    foo = 21;
}
test();
foo; // 21
Leaving out the var statement inside the function test will override the value of foo. While this might not seem like a big deal at first, having thousands of lines of JavaScript and not using var will introduce horrible, hard-to-track-down bugs.
// global scope
var items = [/* some list */];
for(var i = 0; i < 10; i++) {
    subLoop();
}

function subLoop() {
    // scope of subLoop
    for(i = 0; i < 10; i++) { // missing var statement
        // do amazing stuff!
    }
}
The outer loop will terminate after the first call to subLoop, since subLoopoverwrites the global value of i. Using a var for the second for loop would have easily avoided this error. The var statement should never be left out unless the desired effect is to affect the outer scope.
Local Variables
The only source for local variables in JavaScript are function parameters and variables declared via the var statement.
// global scope
var foo = 1;
var bar = 2;
var i = 2;

function test(i) {
    // local scope of the function test
    i = 5;

    var foo = 3;
    bar = 4;
}
test(10);
While foo and i are local variables inside the scope of the function test, the assignment of bar will override the global variable with the same name.
Hoisting
JavaScript hoists declarations. This means that both var statements andfunction declarations will be moved to the top of their enclosing scope.
bar();
var bar = function() {};
var someValue = 42;

test();
function test(data) {
    if (false) {
        goo = 1;

    } else {
        var goo = 2;
    }
    for(var i = 0; i < 100; i++) {
        var e = data[i];
    }
}
The above code gets transformed before execution starts. JavaScript moves the var statements, as well as function declarations, to the top of the nearest surrounding scope.
// var statements got moved here
var bar, someValue; // default to 'undefined'

// the function declaration got moved up too
function test(data) {
    var goo, i, e; // missing block scope moves these here
    if (false) {
        goo = 1;

    } else {
        goo = 2;
    }
    for(i = 0; i < 100; i++) {
        e = data[i];
    }
}

bar(); // fails with a TypeError since bar is still 'undefined'
someValue = 42; // assignments are not affected by hoisting
bar = function() {};

test();
Missing block scoping will not only move var statements out of loops and their bodies, it will also make the results of certain if constructs non-intuitive.
In the original code, although the if statement seemed to modify the global variable goo, it actually modifies the local variable - after hoisting has been applied.
Without knowledge of hoisting, one might suspect the code below would raise a ReferenceError.
// check whether SomeImportantThing has been initialized
if (!SomeImportantThing) {
    var SomeImportantThing = {};
}
But of course, this works due to the fact that the var statement is being moved to the top of the global scope.
var SomeImportantThing;

// other code might initialize SomeImportantThing here, or not

// make sure it's there
if (!SomeImportantThing) {
    SomeImportantThing = {};
}
Name Resolution Order
All scopes in JavaScript, including the global scope, have the special namethis, defined in them, which refers to the current object.
Function scopes also have the name arguments, defined in them, which contains the arguments that were passed to the function.
For example, when trying to access a variable named foo inside the scope of a function, JavaScript will look up the name in the following order:
1.	In case there is a var foo statement in the current scope, use that.
2.	If one of the function parameters is named foo, use that.
3.	If the function itself is called foo, use that.
4.	Go to the next outer scope, and start with #1 again.
Note: Having a parameter called arguments will preventthe creation of the defaultarguments object.
Namespaces
A common problem associated with having only one global namespace is the likelihood of running into problems where variable names clash. In JavaScript, this problem can easily be avoided with the help of anonymous wrappers.
(function() {
    // a self contained "namespace"

    window.foo = function() {
        // an exposed closure
    };

})(); // execute the function immediately
Unnamed functions are considered expressions; so in order to be callable, they must first be evaluated.
( // evaluate the function inside the parentheses
function() {}
) // and return the function object
() // call the result of the evaluation
There are other ways to evaluate and directly call the function expression which, while different in syntax, behave the same way.
// A few other styles for directly invoking the 
!function(){}()
+function(){}()
(function(){}());
// and so on...
In Conclusion
It is recommended to always use an anonymous wrapper to encapsulate code in its own namespace. This does not only protect code against name clashes, but it also allows for better modularization of programs.
Additionally, the use of global variables is considered bad practice. Any use of them indicates badly written code that is prone to errors and hard to maintain.
Arrays
Array Iteration and Properties
Although arrays in JavaScript are objects, there are no good reasons to use the for in loop. In fact, there are a number of good reasons against the use of for in on arrays.
Note: JavaScript arrays arenot associative arrays. JavaScript only has objects for mapping keys to values. And while associative arrayspreserve order, objects do not.
Because the for in loop enumerates all the properties that are on the prototype chain and because the only way to exclude those properties is to use hasOwnProperty, it is already up to twenty times slower than a normalfor loop.
Iteration
In order to achieve the best performance when iterating over arrays, it is best to use the classic for loop.
var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
    console.log(list[i]);
}
There is one extra catch in the above example, which is the caching of the length of the array via l = list.length.
Although the length property is defined on the array itself, there is still an overhead for doing the lookup on each iteration of the loop. And while recent JavaScript engines may apply optimization in this case, there is no way of telling whether the code will run on one of these newer engines or not.
In fact, leaving out the caching may result in the loop being only half as fastas with the cached length.
The length Property
While the getter of the length property simply returns the number of elements that are contained in the array, the setter can be used to truncatethe array.
var foo = [1, 2, 3, 4, 5, 6];
foo.length = 3;
foo; // [1, 2, 3]

foo.length = 6;
foo.push(4);
foo; // [1, 2, 3, undefined, undefined, undefined, 4]
Assigning a smaller length truncates the array. Increasing it creates a sparse array.
In Conclusion
For the best performance, it is recommended to always use the plain for loop and cache the length property. The use of for in on an array is a sign of badly written code that is prone to bugs and bad performance.
The Array Constructor
Since the Array constructor is ambiguous in how it deals with its parameters, it is highly recommended to use the array literal - [] notation - when creating new arrays.
[1, 2, 3]; // Result: [1, 2, 3]
new Array(1, 2, 3); // Result: [1, 2, 3]

[3]; // Result: [3]
new Array(3); // Result: []
new Array('3') // Result: ['3']
In cases when there is only one argument passed to the Array constructor and when that argument is a Number, the constructor will return a newsparse array with the length property set to the value of the argument. It should be noted that only the length property of the new array will be set this way; the actual indexes of the array will not be initialized.
var arr = new Array(3);
arr[1]; // undefined
1 in arr; // false, the index was not set
Being able to set the length of the array in advance is only useful in a few cases, like repeating a string, in which it avoids the use of a loop.
new Array(count + 1).join(stringToRepeat);
In Conclusion
Literals are preferred to the Array constructor. They are shorter, have a clearer syntax, and increase code readability.
Types
Equality and Comparisons
JavaScript has two different ways of comparing the values of objects for equality.
The Equality Operator
The equality operator consists of two equal signs: ==
JavaScript features weak typing. This means that the equality operatorcoerces types in order to compare them.
""           ==   "0"           // false
0            ==   ""            // true
0            ==   "0"           // true
false        ==   "false"       // false
false        ==   "0"           // true
false        ==   undefined     // false
false        ==   null          // false
null         ==   undefined     // true
" \t\r\n"    ==   0             // true
The above table shows the results of the type coercion, and it is the main reason why the use of == is widely regarded as bad practice. It introduces hard-to-track-down bugs due to its complicated conversion rules.
Additionally, there is also a performance impact when type coercion is in play; for example, a string has to be converted to a number before it can be compared to another number.
The Strict Equality Operator
The strict equality operator consists of three equal signs: ===.
It works like the normal equality operator, except that strict equality operator does not perform type coercion between its operands.
""           ===   "0"           // false
0            ===   ""            // false
0            ===   "0"           // false
false        ===   "false"       // false
false        ===   "0"           // false
false        ===   undefined     // false
false        ===   null          // false
null         ===   undefined     // false
" \t\r\n"    ===   0             // false
The above results are a lot clearer and allow for early breakage of code. This hardens code to a certain degree and also gives performance improvements in case the operands are of different types.
Comparing Objects
While both == and === are called equality operators, they behave differently when at least one of their operands is an Object.
{} === {};                   // false
new String('foo') === 'foo'; // false
new Number(10) === 10;       // false
var foo = {};
foo === foo;                 // true
Here, both operators compare for identity and not equality; that is, they will compare for the same instance of the object, much like is in Python and pointer comparison in C.
In Conclusion
It is highly recommended to only use the strict equality operator. In cases where types need to be coerced, it should be done explicitly and not left to the language's complicated coercion rules.
The typeof Operator
The typeof operator (together with instanceof) is probably the biggest design flaw of JavaScript, as it is almost completely broken.
Although instanceof still has limited uses, typeof really has only one practical use case, which does not happen to be checking the type of an object.
Note: While typeof can also be called with a function like syntax, i.e. typeof(obj), this is not a function call. The parentheses behave as normal and the return value will be used as the operand of thetypeof operator. There is notypeof function.
The JavaScript Type Table
Value               Class      Type
-------------------------------------
"foo"               String     string
new String("foo")   String     object
1.2                 Number     number
new Number(1.2)     Number     object
true                Boolean    boolean
new Boolean(true)   Boolean    object
new Date()          Date       object
new Error()         Error      object
[1,2,3]             Array      object
new Array(1, 2, 3)  Array      object
new Function("")    Function   function
/abc/g              RegExp     object (function in Nitro/V8)
new RegExp("meow")  RegExp     object (function in Nitro/V8)
{}                  Object     object
new Object()        Object     object
In the above table, Type refers to the value that the typeof operator returns. As can be clearly seen, this value is anything but consistent.
The Class refers to the value of the internal [[Class]] property of an object.
From the Specification: The value of [[Class]] can be one of the following strings.Arguments, Array, Boolean,Date, Error, Function,JSON, Math, Number, Object,RegExp, String.
In order to retrieve the value of [[Class]], one has to make use of thetoString method of Object.prototype.
The Class of an Object
The specification gives exactly one way of accessing the [[Class]] value, with the use of Object.prototype.toString.
function is(type, obj) {
    var clas = Object.prototype.toString.call(obj).slice(8, -1);
    return obj !== undefined && obj !== null && clas === type;
}

is('String', 'test'); // true
is('String', new String('test')); // true
In the above example, Object.prototype.toString gets called with the value of this being set to the object whose [[Class]] value should be retrieved.
ES5 Note: For convenience the return value ofObject.prototype.toString for both null and undefined waschanged from Object toNull and Undefined in ECMAScript 5.
Testing for Undefined Variables
typeof foo !== 'undefined'
The above will check whether foo was actually declared or not; just referencing it would result in a ReferenceError. This is the only thingtypeof is actually useful for.
In Conclusion
In order to check the type of an object, it is highly recommended to useObject.prototype.toString because this is the only reliable way of doing so. As shown in the above type table, some return values of typeof are not defined in the specification; thus, they can differ between implementations.
Unless checking whether a variable is defined, typeof should be avoided.
The instanceof Operator
The instanceof operator compares the constructors of its two operands. It is only useful when comparing custom made objects. Used on built-in types, it is nearly as useless as the typeof operator.
Comparing Custom Objects
function Foo() {}
function Bar() {}
Bar.prototype = new Foo();

new Bar() instanceof Bar; // true
new Bar() instanceof Foo; // true

// This just sets Bar.prototype to the function object Foo,
// but not to an actual instance of Foo
Bar.prototype = Foo;
new Bar() instanceof Foo; // false
Using instanceof with Native Types
new String('foo') instanceof String; // true
new String('foo') instanceof Object; // true

'foo' instanceof String; // false
'foo' instanceof Object; // false
One important thing to note here is that instanceof does not work on objects that originate from different JavaScript contexts (e.g. different documents in a web browser), since their constructors will not be the exact same object.
In Conclusion
The instanceof operator should only be used when dealing with custom made objects that originate from the same JavaScript context. Just like thetypeof operator, every other use of it should be avoided.
Type Casting
JavaScript is a weakly typed language, so it will apply type coercionwherever possible.
// These are true
new Number(10) == 10; // Number.toString() is converted
                      // back to a number

10 == '10';           // Strings gets converted to Number
10 == '+10 ';         // More string madness
10 == '010';          // And more 
isNaN(null) == false; // null converts to 0
                      // which of course is not NaN

// These are false
10 == 010;
10 == '-10';
ES5 Note: Number literals that start with a 0 are interpreted as octal (Base 8). Octal support for these has beenremoved in ECMAScript 5 strict mode.
To avoid the issues above, use of the strict equal operator is highlyrecommended. Although this avoids a lot of common pitfalls, there are still many further issues that arise from JavaScript's weak typing system.
Constructors of Built-In Types
The constructors of the built in types like Number and String behave differently when being used with the new keyword and without it.
new Number(10) === 10;     // False, Object and Number
Number(10) === 10;         // True, Number and Number
new Number(10) + 0 === 10; // True, due to implicit conversion
Using a built-in type like Number as a constructor will create a new Numberobject, but leaving out the new keyword will make the Number function behave like a converter.
In addition, passing literals or non-object values will result in even more type coercion.
The best option is to cast to one of the three possible types explicitly.
Casting to a String
'' + 10 === '10'; // true
By prepending an empty string, a value can easily be cast to a string.
Casting to a Number
+'10' === 10; // true
Using the unary plus operator, it is possible to cast to a number.
Casting to a Boolean
By using the not operator twice, a value can be converted a boolean.
!!'foo';   // true
!!'';      // false
!!'0';     // true
!!'1';     // true
!!'-1'     // true
!!{};      // true
!!true;    // true
Core
Why Not to Use eval
The eval function will execute a string of JavaScript code in the local scope.
var foo = 1;
function test() {
    var foo = 2;
    eval('foo = 3');
    return foo;
}
test(); // 3
foo; // 1
However, eval only executes in the local scope when it is being called directlyand when the name of the called function is actually eval.
var foo = 1;
function test() {
    var foo = 2;
    var bar = eval;
    bar('foo = 3');
    return foo;
}
test(); // 2
foo; // 3
The use of eval should be avoided. 99.9% of its "uses" can be achievedwithout it.
eval in Disguise
The timeout functions setTimeout and setInterval can both take a string as their first argument. This string will always get executed in the global scope since eval is not being called directly in that case.
Security Issues
eval also is a security problem, because it executes any code given to it. It should never be used with strings of unknown or untrusted origins.
In Conclusion
eval should never be used. Any code that makes use of it should be questioned in its workings, performance and security. If something requireseval in order to work, it should not be used in the first place. A better designshould be used, that does not require the use of eval.
undefined and null
JavaScript has two distinct values for nothing, null and undefined, with the latter being more useful.
The Value undefined
undefined is a type with exactly one value: undefined.
The language also defines a global variable that has the value of undefined; this variable is also called undefined. However, this variable is neither a constant nor a keyword of the language. This means that its value can be easily overwritten.
ES5 Note: undefined in ECMAScript 5 is no longerwritable in strict mode, but its name can still be shadowed by for example a function with the name undefined.
Here are some examples of when the value undefined is returned:
	Accessing the (unmodified) global variable undefined.
	Accessing a declared but not yet initialized variable.
	Implicit returns of functions due to missing return statements.
	return statements that do not explicitly return anything.
	Lookups of non-existent properties.
	Function parameters that do not have any explicit value passed.
	Anything that has been set to the value of undefined.
	Any expression in the form of void(expression)
Handling Changes to the Value of undefined
Since the global variable undefined only holds a copy of the actual value ofundefined, assigning a new value to it does not change the value of the typeundefined.
Still, in order to compare something against the value of undefined, it is necessary to retrieve the value of undefined first.
To protect code against a possible overwritten undefined variable, a common technique used is to add an additional parameter to an anonymous wrapperthat gets no argument passed to it.
var undefined = 123;
(function(something, foo, undefined) {
    // undefined in the local scope does 
    // now again refer to the value `undefined`

})('Hello World', 42);
Another way to achieve the same effect would be to use a declaration inside the wrapper.
var undefined = 123;
(function(something, foo) {
    var undefined;
    ...

})('Hello World', 42);
The only difference here is that this version results in 4 more bytes being used in case it is minified, and there is no other var statement inside the anonymous wrapper.
Uses of null
While undefined in the context of the JavaScript language is mostly used in the sense of a traditional null, the actual null (both a literal and a type) is more or less just another data type.
It is used in some JavaScript internals (like declaring the end of the prototype chain by setting Foo.prototype = null), but in almost all cases, it can be replaced by undefined.
Automatic Semicolon Insertion
Although JavaScript has C style syntax, it does not enforce the use of semicolons in the source code, so it is possible to omit them.
JavaScript is not a semicolon-less language. In fact, it needs the semicolons in order to understand the source code. Therefore, the JavaScript parserautomatically inserts them whenever it encounters a parse error due to a missing semicolon.
var foo = function() {
} // parse error, semicolon expected
test()
Insertion happens, and the parser tries again.
var foo = function() {
}; // no error, parser continues
test()
The automatic insertion of semicolon is considered to be one of biggest design flaws in the language because it can change the behavior of code.
How it Works
The code below has no semicolons in it, so it is up to the parser to decide where to insert them.
(function(window, undefined) {
    function test(options) {
        log('testing!')

        (options.list || []).forEach(function(i) {

        })

        options.value.test(
            'long string to pass here',
            'and another long string to pass'
        )

        return
        {
            foo: function() {}
        }
    }
    window.test = test

})(window)

(function(window) {
    window.someLibrary = {}

})(window)
Below is the result of the parser's "guessing" game.
(function(window, undefined) {
    function test(options) {

        // Not inserted, lines got merged
        log('testing!')(options.list || []).forEach(function(i) {

        }); // <- inserted

        options.value.test(
            'long string to pass here',
            'and another long string to pass'
        ); // <- inserted

        return; // <- inserted, breaks the return statement
        { // treated as a block

            // a label and a single expression statement
            foo: function() {} 
        }; // <- inserted
    }
    window.test = test; // <- inserted

// The lines got merged again
})(window)(function(window) {
    window.someLibrary = {}; // <- inserted

})(window); //<- inserted
Note: The JavaScript parser does not "correctly" handle return statements that are followed by a new line. While this is not necessarily the fault of the automatic semicolon insertion, it can still be an unwanted side-effect.
The parser drastically changed the behavior of the code above. In certain cases, it does the wrong thing.
Leading Parenthesis
In case of a leading parenthesis, the parser will not insert a semicolon.
log('testing!')
(options.list || []).forEach(function(i) {})
This code gets transformed into one line.
log('testing!')(options.list || []).forEach(function(i) {})
Chances are very high that log does not return a function; therefore, the above will yield a TypeError stating that undefined is not a function.
In Conclusion
It is highly recommended to never omit semicolons. It is also recommended that braces be kept on the same line as their corresponding statements and to never omit them for single-line if / else statements. These measures will not only improve the consistency of the code, but they will also prevent the JavaScript parser from changing code behavior.
The delete Operator
In short, it's impossible to delete global variables, functions and some other stuff in JavaScript which have a DontDelete attribute set.
Global code and Function code
When a variable or a function is defined in a global or a function scope it is a property of either the Activation object or the Global object. Such properties have a set of attributes, one of which is DontDelete. Variable and function declarations in global and function code always create properties withDontDelete, and therefore cannot be deleted.
// global variable:
var a = 1; // DontDelete is set
delete a; // false
a; // 1

// normal function:
function f() {} // DontDelete is set
delete f; // false
typeof f; // "function"

// reassigning doesn't help:
f = 1;
delete f; // false
f; // 1
Explicit properties
Explicitly set properties can be deleted normally.
// explicitly set property:
var obj = {x: 1};
obj.y = 2;
delete obj.x; // true
delete obj.y; // true
obj.x; // undefined
obj.y; // undefined
In the example above, obj.x and obj.y can be deleted because they have no DontDelete atribute. That's why the example below works too.
// this works fine, except for IE:
var GLOBAL_OBJECT = this;
GLOBAL_OBJECT.a = 1;
a === GLOBAL_OBJECT.a; // true - just a global var
delete GLOBAL_OBJECT.a; // true
GLOBAL_OBJECT.a; // undefined
Here we use a trick to delete a. this here refers to the Global object and we explicitly declare variable a as its property which allows us to delete it.
IE (at least 6-8) has some bugs, so the code above doesn't work.
Function arguments and built-ins
Functions' normal arguments, arguments objects and built-in properties also have DontDelete set.
// function arguments and properties:
(function (x) {

  delete arguments; // false
  typeof arguments; // "object"

  delete x; // false
  x; // 1

  function f(){}
  delete f.length; // false
  typeof f.length; // "number"

})(1);
Host objects
The behaviour of delete operator can be unpredictable for hosted objects. Due to the specification, host objects are allowed to implement any kind of behavior.
In conclusion
The delete operator often has unexpected behaviour and can only be safely used to delete explicitly set properties on normal objects.
Other
setTimeout and setInterval
Since JavaScript is asynchronous, it is possible to schedule the execution of a function using the setTimeout and setInterval functions.
Note: Timeouts are not part of the ECMAScript Standard. They are implemented as part of the DOM.
function foo() {}
var id = setTimeout(foo, 1000); // returns a Number > 0
When setTimeout is called, it returns the ID of the timeout and schedule footo run approximately one thousand milliseconds in the future. foo will then be executed once.
Depending on the timer resolution of the JavaScript engine running the code, as well as the fact that JavaScript is single threaded and other code that gets executed might block the thread, it is by no means a safe bet that one will get the exact delay specified in the setTimeout call.
The function that was passed as the first parameter will get called by theglobal object, which means that this inside the called function refers to the global object.
function Foo() {
    this.value = 42;
    this.method = function() {
        // this refers to the global object
        console.log(this.value); // will log undefined
    };
    setTimeout(this.method, 500);
}
new Foo();
Note: As setTimeout takes afunction object as its first parameter, a common mistake is to use setTimeout(foo(), 1000), which will use thereturn value of the call fooand not foo. This is, most of the time, a silent error, since when the function returnsundefined setTimeout will notraise any error.
Stacking Calls with setInterval
While setTimeout only runs the function once, setInterval - as the name suggests - will execute the function every X milliseconds, but its use is discouraged.
When code that is being executed blocks the timeout call, setInterval will still issue more calls to the specified function. This can, especially with small intervals, result in function calls stacking up.
function foo(){
    // something that blocks for 1 second
}
setInterval(foo, 1000);
In the above code, foo will get called once and will then block for one second.
While foo blocks the code, setInterval will still schedule further calls to it. Now, when foo has finished, there will already be ten further calls to it waiting for execution.
Dealing with Possible Blocking Code
The easiest solution, as well as most controllable solution, is to usesetTimeout within the function itself.
function foo(){
    // something that blocks for 1 second
    setTimeout(foo, 1000);
}
foo();
Not only does this encapsulate the setTimeout call, but it also prevents the stacking of calls and gives additional control. foo itself can now decide whether it wants to run again or not.
Manually Clearing Timeouts
Clearing timeouts and intervals works by passing the respective ID toclearTimeout or clearInterval, depending on which set function was used in the first place.
var id = setTimeout(foo, 1000);
clearTimeout(id);
Clearing All Timeouts
As there is no built-in method for clearing all timeouts and/or intervals, it is necessary to use brute force in order to achieve this functionality.
// clear "all" timeouts
for(var i = 1; i < 1000; i++) {
    clearTimeout(i);
}
But there might still be timeouts that are unaffected by this arbitrary number. Another way of doing this is to consider that the ID given to a timeout is incremented by one every time you call setTimeout.
// clear "all" timeouts
var biggestTimeoutId = window.setTimeout(function(){}, 1),
i;
for(i = 1; i <= biggestTimeoutId; i++) {
    clearTimeout(i);
}
Even though this works on all major browsers today, it isn't specified that the IDs should be ordered that way and it may change. Therefore, it is instead recommended to keep track of all the timeout IDs, so they can be cleared specifically.
Hidden Use of eval
setTimeout and setInterval can also take a string as their first parameter. This feature should never be used because it internally makes use of eval.
Note: Since the timeout functions are not specified by the ECMAScript standard, the exact workings when a string is passed to them might differ in various JavaScript implementations. For example, Microsoft's JScript uses theFunction constructor in place of eval.
function foo() {
    // will get called
}

function bar() {
    function foo() {
        // never gets called
    }
    setTimeout('foo()', 1000);
}
bar();
Since eval is not getting called directly in this case, the string passed tosetTimeout will be executed in the global scope; thus, it will not use the local variable foo from the scope of bar.
It is further recommended to not use a string to pass arguments to the function that will get called by either of the timeout functions.
function foo(a, b, c) {}

// NEVER use this
setTimeout('foo(1, 2, 3)', 1000)

// Instead use an anonymous function
setTimeout(function() {
    foo(a, b, c);
}, 1000)
Note: While it is also possible to use the syntax setTimeout(foo, 1000, a, b, c), it is not recommended, as its use may lead to subtle errors when used with methods.
In Conclusion
A string should never be used as the parameter of setTimeout or setInterval. It is a clear sign of really bad code, when arguments need to be supplied to the function that gets called. An anonymous function should be passed that then takes care of the actual call.
Furthermore, the use of setInterval should be avoided because its scheduler is not blocked by executing JavaScript.

http://javascript.about.com/od/byexample/a/objectoriented-call-apply-example.htm
Difference between call and apply javascript:

The main difference is that apply lets you invoke the function with arguments as an array; callrequires the parameters be listed explicitly.
See here and here.
Pseudo syntax:
theFunction.apply(valueForThis, arrayOfArgs)
theFunction.call(valueForThis, arg1, arg2, ...)
Sample code:
function theFunction(name, profession) {
    alert("My name is " + name + " and I am a " + profession + ".");
}
theFunction("John", "fireman");
theFunction.apply(undefined, ["Susan", "school teacher"]);
theFunction.call(undefined, "Claude", "mathematician");

Constructor:
http://www.w3schools.com/jsref/jsref_constructor_math.asp
Associative array:
http://www.quirksmode.org/js/associative.html







 
jQuery:
http://www.jquerybyexample.net/2013/07/latest-jquery-interview-questions-answers.html
http://careerride.com/jQuery-Interview-Questions.aspx#jquery1

html:
http://www.skilledup.com/learn/programming/html-html5-interview-questions-answers/
CSS:
http://www.careerride.com/Interview-Questions-CSS-7.aspx
Javascript:
http://www.careerride.com/Interview-Questions-JavaScript-6.aspx

 
Cross site scripting: 
Dynamically generated HTML pages can introduce security risks if inputs are not validated either on the way in or on the way out. Malicious script can be embedded within input that is submitted to Web pages and appear to browsers as originating from a trusted source. This problem is referred to as a cross-site scripting security issue. This article discusses cross-site scripting security issues, the ramifications, and prevention. 
The problem
The underlying problem is that many Web pages display input that is not validated. If input is not validated, malicious script can be embedded within the input. If a server-side script then displays this non-validated input, the script runs on the browser as though the trusted site generated it.
Ramifications
If input to your dynamic Web pages is not validated, you may encounter the following problems:
•	Data integrity can be compromised.
•	Cookies can be set and read.
•	User input can be intercepted.
•	Malicious scripts can be executed by the client in the context of the trusted source.
Which Web pages are at risk? Essentially, the problem affects dynamic page creation based on input that was not validated. Typical examples include the following types of Web pages:
•	Search engines that return results pages based on user input.
•	Login pages that store user accounts in databases, cookies, and so forth and later write the user name out to the client.
•	Web forms that process credit card information.
Prevention
This section presents a few approaches to preventing cross-site scripting security attacks. Evaluate your specific situation to determine which techniques will work best for you. It is important to note that in all techniques, you are validating data that you receive from input and not your trusted script. Essentially, prevention means that you follow good coding practice by running sanity checks on your input to your routines. 

The following list outlines the general approaches to prevent cross-site scripting attacks:
•	Encode output based on input parameters.
•	Filter input parameters for special characters.
•	Filter output based on input parameters for special characters.
When you filter or encode, you must specify a character set for your Web pages to ensure that your filter is checking for the appropriate special characters. The data that is inserted into your Web pages should filter out byte sequences that are considered special based on the specific character set. A popular charset is ISO 8859-1, which was the default in early versions of HTML and HTTP. You must take into account localization issues when you change these parameters.

Encode output based on input parameters for special characters
Encode data that is received as input when you write it out as HTML. This technique is effective on data that was not validated for some reason during input. By using techniques such as URLEncode and HTMLEncode, you can prevent malicious script from executing. 

The following code snippets demonstrate how to use URLEncode and HTMLEncode from Active Server Pages (ASP) pages:
<%
      var BaseURL = http://www.mysite.com/search2.asp?searchagain=;
      Response.write("<a href=\"" + BaseUrl +
      Server.URLEncode(Request.QueryString("SearchString")) +
      "\">click-me</a>");
%>
<% Response.Write("Hello visitor <I>" +
      Server.HTMLEncode(Request.Form("UserName")) +
      "</I>");
%>
				
If you encode the HTML and URLs, you may need to specify the code page as you would if you were to filter data. 

It is important to note that calling HTMLEncode on the string that is about to be displayed will prevent any script in it from being executed and thus prevents the problem.
Filter input parameters for special characters
Filtering input works by removing some or all special characters from your input. Special characters are characters that enable script to be generated within an HTML stream. Special characters include the following:
< > " ' % ; ) ( & + -
				
Note that your individual situation may warrant the filtering of additional characters or strings beyond the special characters.

While filtering can be an effective technique, there are a few caveats:
•	Filtering may not be appropriate for some input. For example, in scenarios where you are receiving <TEXT> input from an HTML form, you may instead choose a method such as encoding (see below).
•	Some filtered characters may actually be required input to server-side script.
The following sample filter, which is written in JavaScript, demonstrates how to remove special characters:
function RemoveBad(strTemp) { 
    strTemp = strTemp.replace(/\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-/g,""); 
    return strTemp;
} 
				
The following code processes user input before storing it for later use.
<% Session("StoredPreference") = RemoveBad(Request.Cookies("UserColor"));
         var TempStr = RemoveBad(Request.QueryString("UserName"));				
Filter output based on input parameters for special characters
This technique is similar to filtering input except that you filter characters that are written out to the client. While this can be an effective technique, it may present a problem for Web pages that write out HTML elements.

For example, on a page that writes out <TABLE> elements, a generic function that removes the special characters would strip the < and > characters, which ruins the <TABLE> tag. Therefore, in order for this technique to be useful, you would only filter data passed in or data that was previously entered by a user and stored in a database.
Possible sources of malicious data
While the problem applies to any page that uses input to dynamically generate HTML, the following are some possible sources of malicious data to help you spot check for potential security risks:
•	Query String
•	Cookies
•	Posted data
•	URLs and pieces of URLs, such as PATH_INFO
•	Data retrieved from users that is persisted in some fashion such as in a database
Conclusion
In conclusion, the following are key points to remember regarding the cross-site scripting security problem:
•	The problem affects dynamic page creation based on input that was not validated.
•	Omission of a sanity check on input data can have unexpected security implications. The problem is preventable through good development standards such as input validation.
•	You need to evaluate solutions on a per site, page, and even field basis and use a technique that makes sense.

An example of different rendering in IE. How was it fixed?
The IE7 display: inline-block; hack is as follows:
display: inline-block;
*display: inline;
zoom: 1;
By default, IE7 only supports inline-block on naturally inline elements (Quirksmode Compatibility Table), so you only need this hack for other elements.
zoom: 1 is there to trigger hasLayout behaviour, and we use the star property hack for setting the display to inline only in IE7 and lower (newer browsers won't apply that). hasLayout and inline together will basically trigger inline-block behaviour in IE7, so we are happy.
This CSS will not validate, and can make your stylesheet messed up anyways, so using an IE7-only stylesheet through conditional comments could be a good idea.
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

Use of zoom:1 in IE6/7 : This provides an internal property known as hasLayout(sets it to true) in Internet Explorer versions 7 and lower.
What is hasLayout:
hasLayout — A Definition
“Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.
This quality can be irreversibly triggered by some CSS properties. Some HTML elements have “layout” by default.
Microsoft developers decided that elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to ashasLayout, which is set to true when this rendering concept takes effect.
Difference between Inline vs Inline-block
Inline elements:
1.	respect left & right margins and padding, but not top & bottom
2.	cannot have a width and height set
3.	allow other elements to sit to their left and right.

Block elements:
1.	respect all of those
2.	force a line break after the block element
3.	
Inline-block elements:
1.	allow other elements to sit to their left and right
2.	respect top & bottom margins and padding
3.	respect height and width

What happens when you click on a link and get the web page? 
In an rough and simplified sketch, assuming the simplest possible HTTP request, no proxies and IPv4: 

1. Checks link's URL part. If not empty take that URL to be feteched. 
2. browser checks cache; if requested object is in cache and is fresh, skip to #9 
3. browser asks OS for server's IP address 
4. OS makes a DNS lookup and replies the IP address to the browser 
5. browser opens a TCP connection to server (this step is much more complex with HTTPS) 
6. browser sends the HTTP request through TCP connection 
7. browser receives HTTP response and may close the TCP connection, or reuse it for another request 
8. browser checks if the response is a redirect (3xx result status codes), authorization request (401), error (4xx and 5xx), etc.; these are handled differently from normal responses (2xx) 
9. if cacheable, response is stored in cache 
10. browser decodes response (e.g. if it's gzipped) 
11. browser determines what to do with response (e.g. is it a HTML page, is it an image, is it a sound clip?) 
12. browser renders response, or offers a download dialog for unrecognized types 
Given an input array and another array that describes a new index for each element, mutate the input array so that each element ends up in their new index. Discuss the runtime of the algorithm and how you can be sure there won't be any infinite loops.
Javascript Version:

function mutate(input, specArr) {
  var visited = [];
  specArr.forEach(function(newIdx, i) {
    var tmp;

    visited.push(newIdx);
    if (visited.indexOf(i) < 0) {
      tmp = input[i];
      input[i] = input[newIdx];
      input[newIdx] = tmp;
    }
  });
}

Trick is to keep track of visited indices and make sure you're not performing unecessary replacements. Run time is THETA(n) as indexOf is a constant-time operation since an array in javascript is simply an object (see http://es5.github.io/#x15.4.4.14 ).
 In JavaScript, write a function that takes an array as input that can contain both ints and more arrays (which can also contain an array or int) and return the flattened array.

ex. [1, [2, [ [3, 4], 5], 6]] => [1, 2, 3, 4, 5, 6]

Using HTML and CSS, show how you would create an image that would display another image (aligned to the bottom, right) when the user hovers over the image.
 
Difference between function expression and function declaration
FUNCTION EXPRESSION:
var product = iMultiply(10,20);
var iMultiply = function(x , y){
  return x * y;
}
 
FUNCTION DECLARATION:
var product = iMultiply(10,20);
function iMultiply(x , y){
  return x * y;
}
In the first instance (i.e. function expression), an error will be returned. In the function declaration example, our code will still work. While javascript usually executes code on a line by line basis, functions are handled slightly differently. Before the code starts to execute, functions are usually pulled to the execution context, a process called function declaration hoisting. Function declarations make the respective functions available for execution regardless of their position. Function expression, on the other hand, limits the scope of the function until the line has been executed. This means the function is useless when called before function has been declared.
EVENTS:
http://www.quirksmode.org/js/events_order.html
http://www.quirksmode.org/js/events_advanced.html
http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/


 
Local Storage, Session storage, Web storage, web database and cookies in HTML5
•	HTML5 web storage = generic umbrella term for the new client-side data storage options:
•	Local Storage = persistant and scoped to the domain. At the moment two flavors are usually mentioned:
•	'default' = stores things in name/value pairs
•	Web SQL (aka Web Database) = uses a SQL database
•	Session Storage = non persistent and scoped only to the current window
•	Cookies = the old school way of doing all of the above. Stores name/value pairs per domain.

10 Tips for Decreasing Web Page Load Times
1. Check the Current Speed of the Website
The first thing you will want to do is to analyze your current page speed. This allows you to track your improvement and ensure that any changes you make positively improves your page load times.
There are many free tools out there for checking how long it takes to load your website. Here are a few of them:
•	Pingdom offers an easy-to-use site speed test that mimics that way a page is loaded in a web browser.
•	Page Speed is an open source Firefox add-on that helps you assess the performance of your web pages. It also provides suggestions on how to fix performance issues.
•	Web Page Test is another great tool that shows you the speed and performance of your website in different browsers.
2. Optimize Your Images
Know when to use the appropriate file format for your images. Changing to a different file format can dramatically decrease the file size of an image.
•	GIF is ideal for images with few colors like logos.
•	JPEG is great for images with lots of colors and details like photographs.
•	PNG is the choice when you need high quality transparent images.
Check out these resources to learn more about optimizing images:
•	The Comprehensive Guide to Saving Images for the Web
•	JPEG 101: A Crash Course Guide on JPEG
•	Web Designer’s Guide to PNG Image Format
•	8 Excellent Tools for Optimizing Your Images
3. Don’t Scale Down Images
Avoid using a larger image than you need just because you can set the width andheight attributes of <img> elements in HTML.
If you need a 100x100px image and you have a 700x700px image, use an image editor like Photoshop or one of these web-based image editors to resize the image to the needed dimensions. This lowers the file size of the image, thus helping to decrease page loading times.
4. Compress and Optimize Your Content
The task of compressing your website content can have a huge impact on reducing load times. When using HTTP compression, all of your web page data is sent in a single smaller file instead of a request that is full of many different files. For more information, see this Wikipedia article on HTTP Compression.
You can also optimize and compress your JavaScript and CSS files by combining them and minifying the source code.
5. Put Stylesheet References at the Top
Moving your stylesheet references to the <head> of your HTML document helps your pages feel like it is loading faster because doing so allows your pages to render the styles progressively. In addition, it doesn’t hurt that it’s the W3C standard.
6. Put Script References at the Bottom
Browsers can only download two components per hostname at the same time. If you add your scripts towards the top, it would block anything else below it on the initial loading of the page. This makes it feel like the page is loading slower.
To avoid this situation, place script references as far down the HTML document as possible, preferably right before the closing <body> tag.
7. Place JavaScript and CSS in External Files
If your JavaScript and CSS are directly in your HTML document, they are downloaded every time an HTML document is requested. This, then, doesn’t take advantage of browser caching and increases the size of the HTML document.
Always place your CSS and JavaScript in external files; it’s a best practice and makes your site easier to maintain and update.
8. Minimize HTTP Requests
When visiting a new web page, most of the page-loading time is spent downloading components of that page (e.g. images, stylesheets, and scripts).
By minimizing the number of requests a web page needs to make, it will load faster. To reduce HTTP requests for images, one thing you can do is to use CSS sprites to combine multiple images.
If you have multiple stylesheets and JavaScript libraries, consider combining them to reduce the number of HTTP requests.
9. Cache Your Web Pages
If you use a content management system that dynamically generates your web pages, you should statically cache your web pages and database queries so that you can decrease the strain on your server as well as speed up page rendering times.
When you cache your page, it saves a static version of it to be presented to the user instead of recreating it every time it’s requested.
For WordPress, check out WP Super Cache and W3 Total Cache (also read thisWordPress codex entry on optimizing/caching WordPress). Drupal core has native caching.
10. Reduce 301 Redirects
Every time a 301 redirect is used, it forces the browser to a new URL which increases page-loading times. If possible, avoid using 301 redirects.
What to use for code quality test?
JSLint
Anonymous functions benefits:
1.	If no name is needed, why add a name to whatever namespace you're in.
2.	Anonymous functions are declared inline and inline functions have advantages in that they can access variables in the parent scopes. Yes, you can put a name on an anonymous function, but that's usually pointless if it's declared inline. So inline has a significant advantage and if you're doing inline, there's little reason to put a name on it.
3.	The code seems more self-contained and readable when handlers are defined right inside the code that's calling them. You can read the code in almost sequential fashion rather than having to go find the function with that name.
Benefits of closures:
But they are very usable for making code more clear and readable. You can maintain visibility of the variables(privacy)
Host objects vs Native objects
The native objects are sometimes referred to as “global objects” since they are the objects that JavaScript has made natively available for use and they are a part of the ECMASCRIPT implementation. Do not confuse the term global object with the “head” global object that is the topmost level of the scope chain, for example, the ‘window’ object(head) in all web browsers
Below find the list of 9 native object constructors that come pre-packaged with JavaScript:
✴ Number() ✴ String() ✴ Boolean() ✴ Object() ✴ Array() ✴ Function() ✴ Date() ✴ RegExp() ✴ Error()
Host objects are not part of the ECMAScript implementation, but are available as objects during execution. Of course, the availability and behavior of a host object depends completely on what the host environment provides. For example, in the web browser environment the window/head object and all of its containing objects (excluding what JavaScript provides) are considered host objects. We examine the properties of the window object below.
 
Function.prototype.bind
The bind() function creates a new function (a bound function) with the same function body (internal call property in ECMAScript 5 terms) as the function it is being called on (the bound function's target function) with the this value bound to the first argument of bind(), which cannot be overridden. bind() also accepts leading default arguments to provide to the target function when the bound function is called. A bound function may also be constructed using the new operator: doing so acts as though the target function had instead been constructed. The provided this value is ignored, while prepended arguments are provided to the emulated function.

The simplest use of bind() is to make a function that, no matter how it is called, is called with a particular this value. A common mistake for new JavaScript programmers is to extract a method from an object, then to later call that function and expect it to use the original object as its this (e.g. by using that method in callback-based code). Without special care, however, the original object is usually lost. Creating a bound function from the function, using the original object, neatly solves this problem:
this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var getX = module.getX;
getX(); // 9, because in this case, "this" refers to the global object

// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
boundGetX(); // 81

What is FOUC?
A flash of unstyled content (FOUC) is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved.
Just one LINK element or SCRIPT element inside a document's HEAD element will prevent a flash of unstyled content.
Attributes vs Property
What is an attribute?
Attributes carry additional information about an HTML element and come in name=”value” pairs. Example:<div class=”my-class”></div>. Here we have a div tag and it has a class attribute with a value ofmy-class.
What is a property?
Property is a representation of an attribute in the HTML DOM tree. So the attribute in the example above would have a property named className with a value of my-class.
Window.onload and document.ready difference
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. 

Memiozation
When we say 'remember', we mean utilizing a form of cache to store a record of the computed output of such specific inputs so that if a particular function is subsequently re-queried with the same input, the remembered result is returned rather than a recalculation being necessary. A lot of the time, a simple array is employed for the cache table, but a hash or map could be just as easily used.
Ternary operator:
Shortcut for if/else statements
(IsChecked == true) ? removeItem($this) : addItem($this);

Arity of a function
The number of formal parameters defined for a function
// For IE, and ES5 strict mode (named function)
function foo(x, y, z) {
    return foo.length; // Will return 3
}

Description
length is a property of a function object, and indicates how many arguments the function expects, i.e. the number of formal parameters. This number does not include the rest parameter. By contrast,arguments.length is local to a function and provides the number of arguments actually passed to the function.
Data property of the Function constructor
The Function constructor is itself a Function object. It's length data property has a value of 1. The property attributes are: Writable: false, Enumerable: false, Configurable: true.
Function.prototype.length is similar to arguments.length

IIFE:
http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

Immediately-Invoked Function Expression (IIFE)
By "Cowboy" Ben Alman on November 15, 2010 4:33 PM | 0 Comments
In case you hadn’t noticed, I’m a bit of a stickler for terminology. So, after hearing the popular, yet misleading, JavaScript term “self-executing anonymous function” (or self-invoked anonymous function) one too many times, I’ve finally decided to organize my thoughts into an article.
In addition to providing some very thorough information about how this pattern actually works, I’ve actually made a recommendation on what we should call it, moving forward. Also, If you want to skip ahead, you can just check out some actual Immediately-Invoked Function Expressions, but I recommend reading the entire article.
Please understand that this article isn’t intended to be an “I’m right, you’re wrong” kind of thing. I’m genuinely interested in helping people understand potentially complex concepts, and feel that using consistent and accurate terminology is one of the easiest things that people can do to facilitate understanding.
So, what’s this all about, anyways?
In JavaScript, every function, when invoked, creates a new execution context. Because variables and functions defined within a function may only be accessed inside, but not outside, that context, invoking a function provides a very easy way to create privacy.
01.// Because this function returns another function that has access to the
02.// "private" var i, the returned function is, effectively, "privileged."
03. 
04.function makeCounter() {
05.// `i` is only accessible inside `makeCounter`.
06.var i = 0;
07. 
08.return function() {
09.console.log( ++i );
10.};
11.}
12. 
13.// Note that `counter` and `counter2` each have their own scoped `i`.
14. 
15.var counter = makeCounter();
16.counter(); // logs: 1
17.counter(); // logs: 2
18. 
19.var counter2 = makeCounter();
20.counter2(); // logs: 1
21.counter2(); // logs: 2
22. 
23.i; // ReferenceError: i is not defined (it only exists inside makeCounter)
In many cases, you won’t need multiple “instances” of whatever your makeWhatever function returns, and can make do with just a single instance, and in other cases, you’re not even explicitly returning a value.
The heart of the matter
Now, whether you define a function like function foo(){} or var foo = function(){}, what you end up with is an identifier for a function, that you can invoke by putting parens (parentheses, ()) after it, like foo().
01.// Because a function defined like so can be invoked by putting () after
02.// the function name, like foo(), and because foo is just a reference to
03.// the function expression `function() { /* code */ }`...
04. 
05.var foo = function(){ /* code */ }
06. 
07.// ...doesn't it stand to reason that the function expression itself can
08.// be invoked, just by putting () after it?
09. 
10.function(){ /* code */ }(); // SyntaxError: Unexpected token (
As you can see, there’s a catch. When the parser encounters the function keyword in the global scope or inside a function, it treats it as a function declaration (statement), and not as a function expression, by default. If you don’t explicitly tell the parser to expect an expression, it sees what it thinks to be a function declaration without a name and throws a SyntaxError exception because function declarations require a name.
An aside: functions, parens, and SyntaxErrors
Interestingly enough, if you were to specify a name for that function and put parens immediately after it, the parser would also throw a SyntaxError, but for a different reason. While parens placed after an expression indicate that the expression is a function to be invoked, parens placed after a statement are totally separate from the preceding statment, and are simply a grouping operator (used as a means to control precedence of evaluation).
01.// While this function declaration is now syntactically valid, it's still
02.// a statement, and the following set of parens is invalid because the
03.// grouping operator needs to contain an expression.
04. 
05.function foo(){ /* code */ }(); // SyntaxError: Unexpected token )
06. 
07.// Now, if you put an expression in the parens, no exception is thrown...
08.// but the function isn't executed either, because this:
09. 
10.function foo(){ /* code */ }( 1 );
11. 
12.// Is really just equivalent to this, a function declaration followed by a
13.// completely unrelated expression:
14. 
15.function foo(){ /* code */ }
16. 
17.( 1 );
You can read more about this in Dmitry A. Soshnikov’s highly informative article, ECMA-262-3 in detail. Chapter 5. Functions.
Immediately-Invoked Function Expression (IIFE)
Fortunately, the SyntaxError “fix” is simple. The most widely accepted way to tell the parser to expect a function expression is just to wrap in in parens, because in JavaScript, parens can’t contain statements. At this point, when the parser encounters the function keyword, it knows to parse it as a function expression and not a function declaration.
01.// Either of the following two patterns can be used to immediately invoke
02.// a function expression, utilizing the function's execution context to
03.// create "privacy."
04. 
05.(function(){ /* code */ }()); // Crockford recommends this one
06.(function(){ /* code */ })(); // But this one works just as well
07. 
08.// Because the point of the parens or coercing operators is to disambiguate
09.// between function expressions and function declarations, they can be
10.// omitted when the parser already expects an expression (but please see the
11.// "important note" below).
12. 
13.var i = function(){ return 10; }();
14.true && function(){ /* code */ }();
15.0, function(){ /* code */ }();
16. 
17.// If you don't care about the return value, or the possibility of making
18.// your code slightly harder to read, you can save a byte by just prefixing
19.// the function with a unary operator.
20. 
21.!function(){ /* code */ }();
22.~function(){ /* code */ }();
23.-function(){ /* code */ }();
24.+function(){ /* code */ }();
25. 
26.// Here's another variation, from @kuvos - I'm not sure of the performance
27.// implications, if any, of using the `new` keyword, but it works.
28.// http://twitter.com/kuvos/status/18209252090847232
29. 
30.new function(){ /* code */ }
31.new function(){ /* code */ }() // Only need parens if passing arguments
An important note about those parens
In cases where the extra “disambiguation” parens surrounding the function expression are unnecessary (because the parser already expects an expression), it’s still a good idea to use them when making an assignment, as a matter of convention.
Such parens typically indicate that the function expression will be immediately invoked, and the variable will contain the result of the function, not the function itself. This can save someone reading your code the trouble of having to scroll down to the bottom of what might be a very long function expression to see if it has been invoked or not.
As a rule of thumb, while writing unambiguous code might be technically necessary to keep the JavaScript parser from throwing SyntaxError exceptions, writing unambiguous code is also fairly necessary to keep other developers from throwing “WTFError” exceptions at you!
Saving state with closures
Just like when arguments may be passed when functions are invoked by their named identifier, they may also be passed when immediately invoking a function expression. And because any function defined inside another function can access the outer function’s passed-in arguments and variables (this relationship is known as a closure), an Immediately-Invoked Function Expression can be used to “lock in” values and effectively save state.
If you want to learn more about closures, read Closures explained with JavaScript.
01.// This doesn't work like you might think, because the value of `i` never
02.// gets locked in. Instead, every link, when clicked (well after the loop
03.// has finished executing), alerts the total number of elements, because
04.// that's what the value of `i` actually is at that point.
05. 
06.var elems = document.getElementsByTagName( 'a' );
07. 
08.for ( var i = 0; i < elems.length; i++ ) {
09. 
10.elems[ i ].addEventListener( 'click', function(e){
11.e.preventDefault();
12.alert( 'I am link #' + i );
13.}, 'false' );
14. 
15.}
16. 
17.// This works, because inside the IIFE, the value of `i` is locked in as
18.// `lockedInIndex`. After the loop has finished executing, even though the
19.// value of `i` is the total number of elements, inside the IIFE the value
20.// of `lockedInIndex` is whatever the value passed into it (`i`) was when
21.// the function expression was invoked, so when a link is clicked, the
22.// correct value is alerted.
23. 
24.var elems = document.getElementsByTagName( 'a' );
25. 
26.for ( var i = 0; i < elems.length; i++ ) {
27. 
28.(function( lockedInIndex ){
29. 
30.elems[ i ].addEventListener( 'click', function(e){
31.e.preventDefault();
32.alert( 'I am link #' + lockedInIndex );
33.}, 'false' );
34. 
35.})( i );
36. 
37.}
38. 
39.// You could also use an IIFE like this, encompassing (and returning) only
40.// the click handler function, and not the entire `addEventListener`
41.// assignment. Either way, while both examples lock in the value using an
42.// IIFE, I find the previous example to be more readable.
43. 
44.var elems = document.getElementsByTagName( 'a' );
45. 
46.for ( var i = 0; i < elems.length; i++ ) {
47. 
48.elems[ i ].addEventListener( 'click', (function( lockedInIndex ){
49.return function(e){
50.e.preventDefault();
51.alert( 'I am link #' + lockedInIndex );
52.};
53.})( i ), 'false' );
54. 
55.}
Note that in the last two examples, lockedInIndex could have just been called i without any issue, but using a differently named identifier as a function argument makes the concept significantly easier to explain.
One of the most advantageous side effects of Immediately-Invoked Function Expressions is that, because this unnamed, or anonymous, function expression is invoked immediately, without using an identifier, a closure can be used without polluting the current scope.
What’s wrong with “Self-executing anonymous function?”
You’ve already seen it mentioned a few times, but in case it wasn’t clear, I’m proposing the term “Immediately-Invoked Function Expression”, and “IIFE” if you like acronyms. The pronunciation “iffy”was suggested to me, and I like it, so let’s go with that.
What is an Immediately-Invoked Function Expression? It’s a function expression that gets invoked immediately. Just like the name would lead you to believe.
I’d like to see JavaScript community members adopt the term “Immediately-Invoked Function Expression” and “IIFE” in their articles and presentations, because I feel it makes understanding this concept a little easier, and because the term “self-executing anonymous function” isn’t really even accurate:
01.// This is a self-executing function. It's a function that executes (or
02.// invokes) itself, recursively:
03. 
04.function foo() { foo(); }
05. 
06.// This is a self-executing anonymous function. Because it has no
07.// identifier, it must use the  the `arguments.callee` property (which
08.// specifies the currently executing function) to execute itself.
09. 
10.var foo = function() { arguments.callee(); };
11. 
12.// This *might* be a self-executing anonymous function, but only while the
13.// `foo` identifier actually references it. If you were to change `foo` to
14.// something else, you'd have a "used-to-self-execute" anonymous function.
15. 
16.var foo = function() { foo(); };
17. 
18.// Some people call this a "self-executing anonymous function" even though
19.// it's not self-executing, because it doesn't invoke itself. It is
20.// immediately invoked, however.
21. 
22.(function(){ /* code */ }());
23. 
24.// Adding an identifier to a function expression (thus creating a named
25.// function expression) can be extremely helpful when debugging. Once named,
26.// however, the function is no longer anonymous.
27. 
28.(function foo(){ /* code */ }());
29. 
30.// IIFEs can also be self-executing, although this is, perhaps, not the most
31.// useful pattern.
32. 
33.(function(){ arguments.callee(); }());
34.(function foo(){ foo(); }());
35. 
36.// One last thing to note: this will cause an error in BlackBerry 5, because
37.// inside a named function expression, that name is undefined. Awesome, huh?
38. 
39.(function foo(){ foo(); }());
Hopefully these examples have made it clear that the term “self-executing” is somewhat misleading, because it’s not the function that’s executing itself, even though the function is being executed. Also, “anonymous” is unnecessarily specific, since an Immediately Invoked Function Expression can be either anonymous or named. And as for my preferring “invoked” over “executed,” it’s a simple matter ofalliteration; I think “IIFE” looks and sounds nicer than “IEFE.”
So, that’s it. That’s my big idea.
Fun fact: because arguments.callee is deprecated in ECMAScript 5 strict mode it’s actually technically impossible to create a “self-executing anonymous function” in ECMAScript 5 strict mode.
A final aside: The Module Pattern
While I’m invoking function expressions, I’d be remiss if I didn’t at least mention the Module Pattern. If you’re not familiar with the Module Pattern in JavaScript, it’s similar to my first example, but with an Object being returned instead of a Function (and is generally implemented as a singleton, as in this example).
01.// Create an anonymous function expression that gets invoked immediately,
02.// and assign its *return value* to a variable. This approach "cuts out the
03.// middleman" of the named `makeWhatever` function reference.
04.//
05.// As explained in the above "important note," even though parens are not
06.// required around this function expression, they should still be used as a
07.// matter of convention to help clarify that the variable is being set to
08.// the function's *result* and not the function itself.
09. 
10.var counter = (function(){
11.var i = 0;
12. 
13.return {
14.get: function(){
15.return i;
16.},
17.set: function( val ){
18.i = val;
19.},
20.increment: function() {
21.return ++i;
22.}
23.};
24.}());
25. 
26.// `counter` is an object with properties, which in this case happen to be
27.// methods.
28. 
29.counter.get(); // 0
30.counter.set( 3 );
31.counter.increment(); // 4
32.counter.increment(); // 5
33. 
34.counter.i; // undefined (`i` is not a property of the returned object)
35.i; // ReferenceError: i is not defined (it only exists inside the closure)
The Module Pattern approach is not only incredibly powerful, but incredibly simple. With very little code, you can effectively namespace related methods and properties, organizing entire modules of code in a way that both minimizes global scope pollution and creates privacy.
stopPropagation vs preventDefault 
stopPropagation is used to make sure the event doesn't bubble up the chain. eg. a click on a <td>tag would also fire click events on it's parent <tr>, and then its parent <table>, etc. stopPropagation prevents this from happening.
preventDefault is used to stop the normal action of an element, eg. preventDefault in a click handler on a link would stop the link being followed, or on a submit button would stop the form being submitted.
return false; does both
javascript pass by value vs pass by reference
A variable can hold one of two types of values: primitive values and reference values.
•	Primitive values are data that are stored on the stack.
•	Primitive value is stored directly in the location that the variable accesses.
•	Reference values are objects that are stored in the heap.
•	Reference value stored in the variable location is a pointer to a location in memory where the object is stored.
•	Primitive types inlcude Undefined, Null, Boolean, Number, or String.
The basics
Objects are aggregations of properties. A property can reference an object or a primitive. Primitives are values, they have no properties.
http://docstore.mik.ua/orelly/webprog/jscript/ch11_02.htm
CSS positioning:
static
An element with position: static always has the position the normal flow of the page gives it. It cannot be moved from this position; a static element ignores any top, bottom, left, or right declarations.
relative
An element with position: relative initially has the position the normal flow of the page gives it, but it is subsequently offset by the amount the top, bottom, left, and/or right declarations give. Therefore, in combination with such a declaration it appears slightly skewed. The space the element originally took remains empty.
By themselves, relatively positioned elements are uninteresting, since you almost never want to skew an element by a few pixels. However, a relatively positioned element serves as a containing block; and this is the usual reason to use position: relative.
absolute
An element with position: absolute is taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block.
Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.
fixed
An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.
GET vs POST:
HTTP POST requests supply additional data from the client (browser) to the server in the message body. In contrast, GET requests include all required data in the URL. Forms in HTML can use either method by specifyingmethod="POST" or method="GET" (default) in the <form> element. The method specified determines how form data is submitted to the server. When the method is GET, all form data is encoded into the URL, appended to the actionURL as query string parameters. With POST, form data appears within the message body of the HTTP request.
GET method: The get method is mostly used for non destructive operations. These operations get data from the server and does not change the data on it. A good example of the application of the search query to a server. In most of the cases GET will send all of the data to be sent in the form of a query string.
POST method: The POST method is primarily used for destructive operations. These operations can change the data on a server. A good example is a user saving an entry on a site will get the POST request. These requests are not cached by the browser. A query can be a part of a url but any data that is to be sent is done separately as post data.