Aditya Singh

Technology is familiar and fun to all

[aditya-singh]

Memory management in JavaScript

JavaScript as a language does not perform Garbage collection but this task is handled by browser. Whenever a webpage has some stuck-up effect, the reason behind is the browser performing Garbage collection behind the scene. 

Since garbage collection in JavaScript is implicit and the algorithm for same is categorized as undecidable problem , we can write our code in optimized way to perform optimized memory management. Some of the ways which can help in memory management in JavaScript are listed below:

Reuse objects as much as possible: Changing the properties of same object instead of allocating a new object helps in reducing the garbage collection time

Reuse existing arrays: Emptying an array by assigning it to [] creates a new array instead of emptying existing one. To reuse an array, use array.length = 0 instead.

Reuse existing function: Functions which are being called again and again can be allocated memory by assigning to variable and then using the variable. E.g.:

setInterval(function(){ alert("a");}, 1000);

          can be rewritten as 

      var func = function(){ alert("a");};

setInterval(func, 1000);

  Garbage Collection:. As already mentioned, the problem to decide for garbage collection is categorized as undecidable problem, there are some constraints imposed to implement the same in browsers, as explained below:

References: An object is said to reference other object if former has access to latter either explicitly or implicitly(via prototypes)

Reference-counting garbage collection: This is the most naive Garbage collection algorithm and states that an object is garbage collectable if there are no objects referencing it. E.g

 // object 'obj' created with 1 attribute

var obj = { a: 'value1' };

// 'obj2' refers 'obj'. Hence 'obj' cannot be Garbage collected yet

var obj2 = obj; obj = 0;

// 'obja' has reference to attribute 'a' of 'obj'

var obja = obj.a;

// here 'obj' can be garbage collected but since 'obja' still has reference to 'obj.a', garbage collection cannot be done on 'obj' 

obj2 = null;

// Now 'obj' becomes a candidate for garbage collection

obja = null;

[aditya-singh]

ES6: Introduction to new features

Better String Support:

The new addition to deck of ES 6 string methods are described as below:

Contains() – returns true if given text is found anywhere inside the string else false  

StartsWith() –    returns true if given text is found at the beginning of the string else false

EndsWith() –    returns true if given text is found at the end of the string else false

var msg = ”Hello world!”;

console.log(msg.startsWith(“Hello”));       // true 

console.log(msg.endsWith(”!”));             // true 

console.log(msg.contains(“w”));             // true

Repeat() – Accepts a single integer argument for the no f times to repeat the string

var msg = "Hello world!"; console.log(msg.repeat(2));       // Hello World!Hello World!

  Comparison using Object.is():

            It avoids the inaccuracy in the identically equals operator (===) for below scenarios:

(===) considers +0 and -0 as equal while Object.is() does not

(===) returns (NaN === NaN) as false while Object.is treats all NaN as same and returns true

console.log(+0 == -0);              // true console.log(+0 === -0);             // true console.log(Object.is(+0, -0));     // false console.log(NaN == NaN);            // false console.log(NaN === NaN);           // false console.log(Object.is(NaN, NaN));   // true

Block Bindings using let:

In most languages variables are created when declared while in JavaScript variables are hoisted at the top of function regardless of declaration. variable hoisting in JavaScript causes in bugs if we don’t understand the underlying logic of hoisting.

To avoid this scenario and introduce the block level scope, ES 6 has introduced the let keyword.

The let keyword scopes the variable to current code block.

var:

function getValue(condition) {     if (condition) {         var value = "blue";         // other code         return value;     } else {         // variable value is accessible in else section         // even though declared in if section due to variabe hoisting         return null;     } }

let:

function getValue(condition) {     if (condition) {         let value = "blue";         // other code         return value;     } else {         // variable value is not accessible in else block         return null;     } }

The most important application of let can be observed in for loops where the loop control variable persists, even after the loop ends.

[aditya-singh]

JavaScript: Key notes on Best Practices

Objects: 

Except primitive types i.e. Numbers, strings, boolean, null and undefined , everything in JavaScript is object.

Numbers, strings and booleans are like objects as they have methods but they are not mutable

Objects in JavaScript are always passed by reference and never copied

Prototype:

The prototype linkage is used only  for retrieval

When a looked up property is not found in prototype chain, undefined is returned. this is called delegation

Prototype relation is dynamic i.e. updates to prototype are immediately reflected to all child objects

The for inoperator enumerates through all properties of an object including those from prototype chain and there is no guarantee on order of properties 

Global Abatement: Create a single global variable to remove pollution of global scope

A detailed content for JavaScript best practices can be found in Christian Heilmann’s slide here

[aditya-singh]

JavaScript closures

What is a closure?

A closure is a function within the scope of another function. Closure can access the variables and parameters of outer function as well as global variables if any. 

An easy way to understand closure is to consider it analogous to a stack-frame malloc'ed instead of being kept on stack frame. Due to this closure retainns values of outer function even if it returns.

Closure solves 2 basic scenarios specific to JavaScript:

1. scope in javascript is at function level and not at block level unlike other functional programming languages

2. function can be assigned as call back to events in asynchronous way

Example: http://jsfiddle.net/PL3g2/

Closures are used extensively in Node.js and jQuery libraries

Properties of closures:

Closures have access to outer function variables even when outer function returns. This feature is useful in implementing asynchronous, even driven callbacks in JavaScript

Closures store reference to outer function variables and hence change in value within closure is reflected in outer fuction as well

We should be cautious while using for loop within closure to reference outer functions variable as the values are updated based on references.

Refrences: http://javascriptissexy.com/understand-javascript-closures-with-ease/

[aditya-singh]

AngularJS: Directives

HTML is a document format comprising of Elements, Tags and Attributes at its core. Detail about each of them can be gathered from here

Directives  are Angular's way of creating new custom elements and there attributes. For example, we can use directives to create a custom figure element with fig-image and fig-caption attributes simialr to HTML5 semantic <figure> tag and to work across browsers as:

<my-fig fig-image="image url here" fig-caption="image caption here"></my-fig>

The major native directives provided as part of the Angular library are listed below:

ng-app

ng-controller

ng-include

Similar to this many other directives are shipped as part of the core Angular library which can be listed over here

Sample directive:

In order to illustrate directives we will create our first <my-fig> directive as mentioned above to encapsulate the behaviour of a <figure> element. Below is the Directive definition for the required directive:

var myDirectives = angular.module('myDirectives', []);

myDirectives.directive('myFig', function(){    return {        restrict: 'E',        template: "<figure><img src={{figImage}}/> <figcaption>{{figCaption}}</figcaption>     </figure>",        replace: true,        scope: {          figImage: "@",          figCaption: "@"        }    } });

Above code  demystified:

The directive method accepts 2 parameters, first is the name of the directive in camel case for '-' text (Replace every hyphen in directive declaration with Capital letter of next word) and second is the function to be executed whenever a directive is encountered in the DOM. The above directive definition has myFig as the first parameter. The second parameter function returns an object with properties as explained.

restrict: This property tells Angular about expected value of directive in DOM. Here 

'A' - only matches attribute name

'E' - only matches element name

'C' - only matches class name

'M'   - only commments

template: html template for the directive. Can be a  string or generator function

scope: This can be a boolean value or an object and provides very important feature of isolated scope

The detailed property list options are listed below and definition of each is mentioned here:

angular.module('myApp', [])  .directive('myDirective', function() {      return {         restrict: String,         priority: Number,         terminal: Boolean,         template: String or Template Function:            function(tElement, tAttrs) (...},         templateUrl: String,         replace: Boolean or String,         scope: Boolean or Object,         transclude: Boolean,         controller: String or           function(scope, elem, attrs, transclude, otherInjectables) { ... },         controllerAs: String,         require: String,         link: function(scope, iElement, iAttrs) { ... },         compile: // return an Object OR the link function                  // as in below:         function(tElement, tAttrs, transclude) {           return {             pre: function(scope, iElement, iAttrs, controller) { ... },             post: function(scope, iElement, iAttrs, controller) { ... }         }         // or         return function postLink(...) { ... }        }      };  });

[aditya-singh]

Server side communication in Angular

Server-side communication in angular is done via the below modes:

Using built in $http service

Using $resource service

Using the Restangular library

 $http service: Simply stating $http service is a wrapper around browsers native XMLHttpRequest (XHR) object or may use the JSONP (JSON padding) mode for interacting using HTTP. It is a function which expects single object parameter for configuration and returns a Promise.

A typical example of a $http function to interact with server is as below:

$http({       method : ‘GET’,       url : ‘/api/users.json’ }).success(function (data, status, headers, config) {       // This is called for successful response }).error(function (data, status, headers, config) {       // This is called when the erroneous response });

Normally the $http method won’t execute until the next digest loop runs. To force the $http method to run outside of the digest loop explicitly, we may use the $apply block as below:

$scope.$apply(function () {      $http({           method : 'GET',           url : '/api/users.json'      }); });  

$http shortcut methods: The $http service also provides shortcut methods, the complete list of which is given below: [Reference: $http]

$http.get

$http.head

$http.post

$http.put

$http.delete

$http.jsonp

$http.patch

Configuration object parameter: The configuration object parameter passed to the $http service method has the following set of possible parameters:

method (string): The HTTP method on server being called. Expected values are ‘GET’, ‘DELETE’ , ‘HEAD’ , ‘JSONP’, ‘POST’, ‘PUT’

url (string): The url of the server resource being requested

params: This iseither astring combination which is converted into query string or an object which is JSONified to be sent to server.E.g.

$http({        params: {'key': 'value'}    });

data: the data that will be POSTed

Along with the above, there are other options which are used less frequently

headers

xsrfHeaderName

xsrfCookieName

transformResponse

transformRequest

cache

withCredentials

responseType

We will see the $resource and Restangular in the next part along with other server side communication tricks available as part of Angular

[aditya-singh]

AngularJS: Dependency Injection

 A large client side application comprises of multiple modules or components, wherein every module/ component is dependent on others. This is integral as it allows for on-demand loading of components. AngularJS has provided this through means of Dependency Injection (DI).

What is Dependency Injection and why we need it?

Dependency Injection is a design pattern which explains how components get hold of their dependencies.

The scenario of an application dependent on a REST api service for data can be used to explain Dependency Injection in Angular framework. Then, for the application module to use this api service through Dependency Injection can be demonstrated through below code:

var app = angular.module('app', []); app.factory('Service', function service() {     this.getList() = function () { };     this.getListById() = function () { };     this.update() = function () { }; }); app.controller('AppController', function ($scope, Service) {     // Use the factory to get list data     $scope.list = Service.getList(); });

Analysis of above code:

In the first line we have created an angular module named app

In the second line we have created a service named Service, using angular's factory, which exposes 3 methods getList, getListById, update

In the 3rd line we have created a controller named AppController, which has 2 dependecies $scope and Service. 

In the 3rd line of our code, when we create the controller to bind with our view, we have used Dependency Injection by injecting the 2 dependencies $scope (The $scope is used to create the scope between view and the controller. It can be thought of as the viewModel of the MVVM pattern) and Service.

Whenever a dependency is loaded in Angular, the $inject property of the component is updated. The $inject property should be an array of strings:

AppController['$inject'] = ['$scope', 'Service'];

Once the dependency is injected into our module, we may use the dependency name in the callback for the module e.g. Service for the Service factory in our example.

References:

https://docs.angularjs.org/guide/di