20 JavaScript articles to brush up your JavaScript language

I have been evangelist of JavaScript and Angular for some time now. Below, I am consolidating 20 JavaScript articles written by me. These articles will help you in understanding basic language construct of JavaScript. Topics like objects, hoisting, functions etc. are covered in these articles. Let me know how you find them.

clip_image002

1. How to Count the Number of Properties of the JavaScript Object

https://www.infragistics.com/community/blogs/b/infragistics/posts/how-to-count-the-number-of-properties-of-the-javascript-object

2. Four Ways to Create Objects in JavaScript https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-13-four-ways-to-create-objects-in-javascript

3. What are the Call and Apply Methods? https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-12-what-are-the-call-and-apply-methods

4. Simplifying function expressions and the function statement https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-11-simplifying-function-expressions-and-the-function-statement

5. Class in JavaScript

https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-10-class-in-javascript

6. What are Template Literals?

https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-9-what-are-template-literals

7. What are getters and setters?

https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-8-what-are-getters-and-setters

8. Arrow functions in JavaScript https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-6-arrow-functions-in-javascript

9. Simplifying function hoisting

https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-5-simplifying-function-hoisting

10. What is the arguments object in a function

https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-4-what-is-the-arguments-object-in-a-function

11. What is a Default Parameter in a Function?

https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-3-what-is-a-default-parameter-in-a-function

12. Learn the “let” Statement

https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-1-_2d00_-learn-the-let-statement

13. How to create constants in JavaScript?

https://www.infragistics.com/community/blogs/b/dhananjay_kumar/posts/how-to-create-constants-in-javascript

14. How to print or enumerate properties of a JavaScript object?

https://www.infragistics.com/community/blogs/b/dhananjay_kumar/posts/how-to-print-or-enumerate-properties-of-a-javascript-object

15. How to locate a particular object in a JavaScript Array

https://www.infragistics.com/community/blogs/b/dhananjay_kumar/posts/how-to-locate-a-particular-object-in-a-javascript-array

16. What are Closures in JavaScript?

https://www.infragistics.com/community/blogs/b/dhananjay_kumar/posts/what-are-closures-in-javascript

17. Simplifying Objects, Inheritance and prototype in JavaScript

https://www.infragistics.com/community/blogs/b/dhananjay_kumar/posts/simplifying-objects-inheritance-and-prototype-in-javascript

18. 11 Things About JavaScript Functions that .NET Developers Should Know: Part 1

https://www.infragistics.com/community/blogs/b/dhananjay_kumar/posts/all-about-javascript-functions

19. 11 things about JavaScript functions that .NET developers should know: Part 2

https://www.infragistics.com/community/blogs/b/dhananjay_kumar/posts/11-things-about-javascript-functions-that-net-developers-should-know-part-2

20. Objects in JavaScript for .NET developers

https://www.infragistics.com/community/blogs/b/dhananjay_kumar/posts/objects-in-javascript-for-net-developers-part-1

I hope these two articles will help you in getting along with JavaScript. Have comment or feedback tweet me at @debug_mode.

High Performance Angular Grid with Web Sockets

 

Read full article on the Infragistics blog

You may have come across the requirement to push data in real time to an Angular Grid. To push data to the browser, you need a technology called WebSocket. You can implement that using NodeJS or ASP.NET SignalR. For the purpose of this article, we will use Web Sockets with NodeJS.

In the first half of this article, we will create an API which will use Web Sockets to push data to the client, and, in second half of the article, we will create an Angular application to consume that. In the Angular application, we will use Ignite UI for Angular Grid.  However, you can also use a simple HTML table to consume data in real time from web socket. In this article, we will learn to consume data in real time from NodeJS Web Socket in a HTML table as well as Ignite UI Angular Data Grid. We will witness difference in performance in these two approaches.

You can learn more about Ignite UI for Angular: here

NodeJS API

Let us start with creating NodeJS API. Create a blank folder and add a file called package.json. In package.json, add dependencies of

  • Core-js
  • Express
  • io

More or less your package.json file should look like below:

You can pull data from any type of database such as relational data base, No SQL database, etc. However, for purpose of this post, I am going to keep it simple and have hardcoded data in the data.js file. This file will export a JSON array, which we will push using web socket and timer.

Add a file in folder called data.js and add the following code in it.

data.js

You can find data with 1200 rows here.

 

From data.js file, we are returning TradeBlotter data. Now in your project folder, you should have two files: package.json and data.js

At this point in time, run the command, npm install, to install all dependencies mentioned in package.json file. After running command, you will have the node_modules folder in your project folder.  Also, add server.js file in the project.  After all these steps, your project structure should have following files and folders.

  • data dot js
  • server dot js
  • Node_modules folder

In server.js, we will start with first importing required modules,

Once required modules are imported, add route-using express as below:

app.use(express.static(__dirname + ‘/dist’));

On connecting the socket, we are performing following tasks:

  1. Fetching data
  2. Starting timer(We will talk about this function later in the post)
  3. On disconnect event deleting the socket

Next we have to implement, startTimer() function. In this function, we are using JavaScript setInterval() function and emitting data in each 10 millisecond time frame.

We are calling a function updateData() which will update data. In this function, we are looping through local data and updating two properties, Coupon and Notional, with random number between ranges.

Read full article on the Infragistics blog

Understanding ViewEncapsulation in Angular

To understand ViewEncapsulation in Angular, first we should understand about Shadow DOM.  You can learn in detail about Shadow DOM here. Putting it in simple words, Shadow DOM brings Encapsulation in HTML Elements. Using the Shadow DOM , markup, styles, and behaviors are scoped to the element and do not clash with other nodes of the DOM. Shadow DOM is part of Web Components, which encapsulates styles and login of element.

Angular Components are made up of three things:

  1. Component class
  2. Template
  3. Style

Combination of these three makes an Angular component reusable across application. Theoretically, when you create a component, in some way you create a web component (Theoretically, Angular Components are not web components) to take advantage of Shadow DOM. You can also use Angular with browsers, which does not support Shadow DOM because Angular has its own emulation and it can emulate Shadow DOM.

To emulate Shadow DOM and encapsulate styles, Angular provides there types of ViewEncapsulation. They are as follows:

 

Let us try to understand it using an example. I have created a component, as shown below:

app.component.ts

app.component.html

app.component.css

We are setting the style of h1 in the component CSS. We have also created another component:

In AppChildComponent, we are also using h1 tag. To understand different ViewEncapsulation options, we will change the metadata of AppComponent.

Let us start with ViewEncapsulation.None, in this option,

  1. There is no shadow DOM
  2. Style is not scoped to component

 

As you run the application, you will find h1 style has applied to both components, even though we set style only in AppComponent. It happened because in AppComponent we have set encapsulation property to ViewEncapsulation.None.

In the browser when you examine source code, you will find h1 style has been declared in the head section of the DOM.

Therefore, in ViewEncapsulation.None, style gets move to the DOM head section and is not scoped to the component.  There is no Shadow DOM for the component and component style can affect all nodes of the DOM.

Next, let us explore ViewEncapsulation.Native, in this option:

  1. Angular will create Shadow DOM for the component.
  2. Style is scoped to component

 

As you run the application, you will find h1 style has applied to both components, even though we set style only in AppComponent. It happened because in AppComponent we have set encapsulation property to ViewEncapsulation.Native, and we are using AppChildComponnet as child inside template of AppComponent.

Read full article on the Infragistics blog

Understating Angular Change Detection with example

Change Detection means updating the DOM whenever data is changed. Angular provides two strategies for Change Detection.

  1. Default strategy
  2. onPush strategy

In default strategy, whenever any data is mutated or changed, Angular will run change detector to update the DOM. In onPush strategy, Angular will only run change detector only when new reference is passed to @Input() data.

To update the DOM with updated data, Angular provides its own change detector to each component, which is responsible to detect change and update the DOM.

Let us say we have a MessageComponent as listed below:

In addition, we are using MessageComponent inside AppComponent as below,

Let us talk through the code: all we are doing is using MessageComponent as child inside AppComponent and setting value of person using the property binding. At this point on running the application, you will get name printed as output.

Next, let us go ahead and update firstname property on the button click in AppComponent class below:

As soon as we changed the property of mutable object P, Angular fires the change detector to make sure that the DOM (or view) is in sync with the model (in this case object p). For each property changes, Angular change detector will traverse the component tree and update the DOM.

Let us start with understanding about component tree. An Angular application can be seen as a component tree. It starts with a root component and then go through to child components. In Angular, data flows from top to bottom in the component tree.

Whenever @Input type property will be changed, Angular change detector will start form the root component and traverse all child components to update the DOM. Any changes in primitive type’s property will cause Angular change detection to detect the change and update the DOM.

In above code snippet, you will find that on click of the button, the first name in the model will be changed. Then, change detection will be fired to traverse from root to bottom to update the view in MessageComponent.

There could be various reasons of Angular change detector to come into action and start traversing the component tree. They are:

  1. Events fired such as button click, etc.
  2. AJAX call or XHR requests
  3. Use of JavaScript timer functions such as setTimeOut , SetInterval

Now, as you see,  a single property change can cause change detector to traverse through the whole component tree. Traversing and change detection is a heavy process, which may cause performance degradation of application. Imagine that there are thousands of components in the tree and mutation of any data property can cause change detector to traverse all thousand components to update the DOM. To avoid this, there could be scenario when you may want to instruct Angular that when change detector should run for a component and its subtree, you can instruct a component’s change detector to run only when object references changes instead of mutation of any property by choosing onPush ChangeDetection strategy.

You may wish to instruct Angular to run change detection on components and their sub-tree only when new references are passed to them versus when data is simply mutated by setting change detection strategy to onPush.

Let us go back to our example where we are passing object to MessageComponent. In the last example, we just changed firstname property and that causes change detector to run and to update the view of MessageComponent. However, now we want change detector to only run when reference of passed object is changed instead of just a property value. To do that let us modify MessageComponent to use OnPush ChangeDetection strategy. To do this set changeDetectionproperty of @Component decorator to ChangeDetectionStrategy.OnPush as shown in listing below:

At this point when you run the application, on click event of the button in AppComponent change detector will not run for MessageComponent, as only a property is being changed and reference is not changing. Since change detection strategy is set to onPush, now change detector will only run when reference of @Input property is changed.

In the above code snippet, we are changing reference of object instead of just mutating just one property. Now when you run application, you will find on the click of the button that the DOM is being updated with new value.

By using onPush Change Detection, Angular will only check the tree if the reference passed to the component is changed instead of some property changed in the object. We can summarize that, and Use Immutable Object with onPush Change Detection to improve performance and run the change detector for component tree when object reference is changed.

We can further improve performance by using RxJS Observables because they emit new values without changing the reference of the object. We can subscribe to the observable for new value and then manually run ChangeDetector.

Read full article on the Infragistics blog

How to Count the Number of Properties of the JavaScript Object

While working with JavaScript, I come across a requirement to count a number of properties in a JavaScript object.  I found two ways to find the number of properties in an object. They are as follows:

  1. Using for loop
  2. Using Object.keys

Consider an object, “cat”, as demonstrated below:

You can find a number of properties by iterating in a for loop and update counter, as shown in the below listing:

Above code will print “2” as output.

The above approach not only prints the object’s own enumerable properties, but it also prints properties of objects to chich it is linked.  To further understand it, let us consider listing:

There are two objects, cat and animal, and the cat object is linked to an animal object using __proto__ property.  Now, when you use for loop to iterate and count a number of properties, it will also count enumerable properties of the animal object. Therefore, the code listing below will print “3”.

Read full article on the Infragistics blog