Javascript: {} vs new Object() performance

Question

I want to understand why is the difference in performance when both does same thing?

Benchmark

Answer 1

Performance of {} can be explained as :

1. {} is the literal for object in Javascript, and literals are evaluated faster.
2. As an added bonus, literals take up less space in your code, so the overall file size is
   smaller.
3. The end result of literal code is the same as the new Object() code, but it is executed faster in almost all browsers (Firefox 3.5 shows almost no difference).
4. As the number of object properties and array items increases, so too does the benefit of using literals.

Object Literals {} are executed faster because of scope managing mechanism in Javascript

When JavaScript code is being executed, an execution context is created. The execution context (also sometimes called the scope) defines the environment in which code is to be executed.

A global execution context is created upon page load, and additional execution contexts are created as functions are executed, ultimately creating an execution context stack where the topmost context is the active one.

Each execution context has a scope chain associated with it, which is used for identifier resolution. The scope chain contains one or more variable objects that define in-scope identifiers for the execution context.

The global execution context has only one variable object in its scope chain, and this object defines all of the global variables and functions available in JavaScript.

When a function is created (but not executed), its internal [[Scope]] property is assigned to contain the scope chain of the execution context in which it was created (internal properties cannot be accessed through JavaScript, so you cannot access this property directly).

Later, when execution flows into a function, an activation object is created and initialized with values for this, arguments, named arguments, and any variables local to the function. The activation object appears first in the execution context’s scope chain and is followed by the objects contained in the function’s [[Scope]] property.

During code execution, identifiers such as variable and function names are resolved by searching the scope chain of the execution context.

Identifier resolution begins at the front of the scope chain and proceeds toward the back. Consider the following code:

function Add(n1, n2) {
  this.n1 = n1;
  this.n2 = n2;
  this.val = this.n1 + this.n2;
}

var result = new Add(5, 10);

When this code is executed, the add function has a [[Scope]] property that contains only the global variable object.

As execution flows into the add function, a new execution context is created, and an activation object containing this, arguments, n1, and n2 is placed into the scope chain.

Below Figure , “Relationship of execution context and scope chain” illustrates the behind-the-scenes object relationships that occur while the add function is being executed.

Inside the add function, the identifiers num1 and num2 need to be resolved when the function is executing.

This resolution is performed by inspecting each object in the scope chain until the specific identifier is found.

The search begins at the first object in the scope chain, which is the activation object containing the local variables for the function.

If the identifier isn’t found there, the next object in the scope chain is inspected for the identifier. When the identifier is found, the search stops.

In the case of this example, the identifiers num1 and num2 exist in the local activation object and so the search never goes on to the global object.

Understanding scopes and scope chain management in JavaScript is important because identifier resolution performance is directly related to the number of objects to search in the scope chain.

The farther up the scope chain an identifier exists, the longer the search goes on and the longer it takes to access that variable; if scopes aren’t managed properly, they can negatively affect the execution time of your script.