Javascript Hacks {}

A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain. The closure has access to variables in three scopes; specifically: (1) variable in its own scope, (2) variables in the enclosing function’s scope, and (3) global variables. Here is an example : var globalVar = "xyz"; (function outerFunc(outerArg) { var outerVar = 'a'; (function innerFunc(innerArg) { var innerVar = 'b'; console.log( "outerArg = " + outerArg + "\n" + "innerArg = " + innerArg + "\n" + "outerVar = " + outerVar + "\n" + "innerVar = " + innerVar + "\n" + "globalVar = " + globalVar); })(456); })(123); In the above example, variables from innerFunc , outerFunc , and the global namespace are all in scope in the innerFunc . The above code will therefore produce the following output: out

An  IIFE  is an anonymous function that is created and then immediately invoked. It's not called from anywhere else (hence why it's anonymous), but runs just after being created. It has nothing to do with any event-handler for any events (such as  document.onload ). The first pair of parentheses  ( function(){...} )  turns the code within (in this case, a function) into an expression, and the second pair of parentheses  (function(){...}) ()  calls the function that results from that evaluated expression. This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other  normal  function) are not visible outside its scope. ( function (){ // all your code here // ... })(); // foo is unreachable here (it’s undefined)

Prior to javascript ES6, there was no way to define constants, so one have to write their own custom way to write constants. So, here are two ways to define constant that are mutable i.e, which can'nt be reassigned. 1. Using Const (ES6) : - const MAX_NUM = 10; This  const  means that you can't reassign it to any other value. Check the  compatibility notes  to see if your targeted browsers are supported. 2. Using defineProperty And we can use throughout our application. (function() {     var locarVar;     Object.defineProperty(window, ' MAX_NUM ', {         get: function() {             return locarVar;         },         set: function(val) {             locarVar = window. MAX_NUM  || val;         }     }); }()); MAX_NUM = 10; MAX_NUM = 12; //  Cannot redefine property: MAX_NUM console.log(MAX_NUM); // 10

We create immutable objects, so that no one can change during the app's lifecycle. By default, all Javascript types, except objects, define immutable values Now what happen, when you copy an object obj1 into another object obj2 , & then when you change/add/remove property from obj1 , it also affected original object obj1 . E.g : var obj1 = { a : 5, b :  7 }; var obj2 = obj1; obj2.a  = 7; //console.log(obj1); => { a : 7, b : 7} For overcoming these javascript behaviour or to create Immutable objects which doesn't mutate cloning, we have following ways : - 1. This Simple Hack : - var obj2 = JSON.parse(JSON.stringify(obj1)); Now, obj2.a  = 7; //console.log(obj1); => { a : 5, b : 7} 2.  Object.definePropety()   Using Javascript's defineProperty we can create non configurable and/or hidden properties inside objects. This way we can be sure that a developer can't mess with our code or hide from them info about our structures that they don'