A Brief on Web applications
Let's simply say that anything that runs from a browser with a URL is a web application, and complexity can vary based on the content that the browser presents to the user. HTML / CSS helps creative teams design beautiful static content whereas Javascript helps UI programmers manipulate the DOM to create dynamic content & behavior. JS Engine is a runtime that interprets the Javascript code and can be a part of browser as V8 in chrome or other runtime server environment like NodeJS
Basic Notion
a) JS Engine creates a global execution context, along with a global object referenced by this variable, which in case of browser happens to be a window object. At a global execution context, reference to Outer Environment is null.
b) Execution Context has a creation phase before the execution phase, and hoisting, a part of creation phase, allocates memory space for the variables & functions, so that they are available in the execution phase irrespective of where they are written lexically in an execution context.
c) Each invocation of a function creates an execution context, and execution stack controls the layering of execution context with global execution context as the base of the stack.
d) Each execution context has its own variable environment, and can uniquely assigned a value irrespective of the same variable name.Though, when variable is not declared in the function context, it goes down the scope chain referenced by outer environment of execution context. Scope chain depends upon the lexical environment, which means where the function physically written in the JS file.
b) Execution Context has a creation phase before the execution phase, and hoisting, a part of creation phase, allocates memory space for the variables & functions, so that they are available in the execution phase irrespective of where they are written lexically in an execution context.
c) Each invocation of a function creates an execution context, and execution stack controls the layering of execution context with global execution context as the base of the stack.
d) Each execution context has its own variable environment, and can uniquely assigned a value irrespective of the same variable name.Though, when variable is not declared in the function context, it goes down the scope chain referenced by outer environment of execution context. Scope chain depends upon the lexical environment, which means where the function physically written in the JS file.
Objects
a) Objects are collections of name/value pairs and names can again be collection of name/value pairs. Objects have properties [primitive types, objects] & methods [function] and you can access the them with the dot operator.
b) Object Literals is a preferred way of creating objects. [var person = { firstname: John, lastname: Doe };]
c) Javascript Object Notiation (JSON), a ubiquitous data exchange standard over the internet for webapps can be easily converted to object literal & vice-versa in Javascript.
var jsonString = JSON.stringify(jsObjectLiteral);
var jsObjectLiteral = JSON.parse(jsonString);
d) Objects are being passed as reference & all primitives types are passed by value. When you mutate an object by adding a property, all references to that object will able to access the new property.
b) Object Literals is a preferred way of creating objects. [var person = { firstname: John, lastname: Doe };]
c) Javascript Object Notiation (JSON), a ubiquitous data exchange standard over the internet for webapps can be easily converted to object literal & vice-versa in Javascript.
var jsonString = JSON.stringify(jsObjectLiteral);
var jsObjectLiteral = JSON.parse(jsonString);
d) Objects are being passed as reference & all primitives types are passed by value. When you mutate an object by adding a property, all references to that object will able to access the new property.
Functions
a) In Javascript, functions are a special type of objects, with optional property: 'name' & invocable property: 'code as the function body.
b) Functions are first class in Javascript, which means they can be assigned to variables, created on the fly, passed as parameters, just like other Javascript types.
c) Usually 'this' variable references the global object inside a function but when function is defined as a property method of an object, 'this' variable references the object that contains the method definition rather than global object. A common pattern is that you can mutate the object in function by using the this variable and best practice is to assign this to a self variable.
d) Immediately Invoked Function Expression (IIFE) is an anonymous function expression wrapped in parentheses, and created & invoked on the fly as first class function.
(function(name) {var greeting = "Inside IIFE: Hello "; console.log(greeting + ' ' + name); }('John'));
b) Functions are first class in Javascript, which means they can be assigned to variables, created on the fly, passed as parameters, just like other Javascript types.
c) Usually 'this' variable references the global object inside a function but when function is defined as a property method of an object, 'this' variable references the object that contains the method definition rather than global object. A common pattern is that you can mutate the object in function by using the this variable and best practice is to assign this to a self variable.
d) Immediately Invoked Function Expression (IIFE) is an anonymous function expression wrapped in parentheses, and created & invoked on the fly as first class function.
(function(name) {var greeting = "Inside IIFE: Hello "; console.log(greeting + ' ' + name); }('John'));
Closures
As functions can be passed around & can be returned from another function in Javascript, Closures, a feature of JS language, allows the returned function to close in the variables during its execution. For eg:
function parentClosure(varClosure) {
return function () {
console.log("Closing in on " + varClosure + " created in parent function and claimed in child");
}
}
var childClosure = parentClosure('patang');
childClosure();
When the anonymous function returned by the parentClosure('patang') function, patang / kite was created in parentClosure function variable environment and even though parentClosure function was done executing, JS engine provided patang assigned to varClosure variable to the childClosure function when it was invoked.
This phenomenon of keeping the scope chain intact until execution context closed in all of the variables is termed as closures.
function parentClosure(varClosure) {
return function () {
console.log("Closing in on " + varClosure + " created in parent function and claimed in child");
}
}
var childClosure = parentClosure('patang');
childClosure();
When the anonymous function returned by the parentClosure('patang') function, patang / kite was created in parentClosure function variable environment and even though parentClosure function was done executing, JS engine provided patang assigned to varClosure variable to the childClosure function when it was invoked.
This phenomenon of keeping the scope chain intact until execution context closed in all of the variables is termed as closures.
Callback
A process of passing first-class function as a parameter to function and invocation of a parameter function after the complete execution of a function is called a callback. For eg: Timeout function will output "Hello Callback" after 3 sec by invoking an anonymous function passed as its parameter.
setTimeout(function() {console.log("Hello Callback")}, 3000);
setTimeout(function() {console.log("Hello Callback")}, 3000);
Prototypal Inheritance
Inheritance, in object oriented languages like Java, is an approach with derived class gets access to properties and methods of the base class. Every object in Javascript has a proto object and automatically gets access to the properties & method attached to its proto object. It also goes down in the prototype chain if the property or method is attached to its immediate proto object.
No comments:
Post a Comment