How to create constants in JavaScript?

Constants are immutable variables which value cannot be changed. Once, you have created a constant, its value cannot be changed.

image

While coding in JavaScript, many times you may have come across a requirement to create constants. Before ECMA Script 6, it was not very easy to create constants in JavaScript. In this post, I will show you to create constants in both ECMA Script 5 and ECMA Script 6.

Constants in ECMA 5

We can create a constant in ECMA Script 5 using Object.defineProperty(). First we need to find out, whether variable would be a global variable or part of the window object. Once that is determined, create variable by setting writable to false.

Object.defineProperty() function takes three parameters,

  1. Object for which variable should be created
  2. Name of the variable to be created
  3. Object to configure behavior of the variable.

Read full article on the Infragistics blog

How to print or enumerate properties of a JavaScript object?

I usually come across the following requirements,

  • How to print name of all the properties of an object?
  • How to print only the methods of an object?
  • How to print even non-enumerable properties of an object?

In this post, we will explore all the options to iterate and print properties of a JavaScript object. Let us consider the object cat, as shown in the listing below:

By default, for all properties of an object enumerable is set to true. So right now, if we print description of cat’s canRun and name properties using the Object.getOwnPropertyDescriptor, we will find enumerable value true for the both properties.

As you notice besides enumerable, configurable and writable are also set to true.

image

Let us start with printing all properties which enumerable is true.

Printing all enumerable properties using for..in loop

We can print all enumerable properties either own or inherited of cat object using JavaScript for..in loop.

Using the for..in loop, all enumerable properties can be iterated. Above for loop will print all the enumerable properties of cat object.

Read full article on the Infragistics blog

What are Closures in JavaScript?

Read full article on the Infragistics Blog

A JavaScript closure is a function which remembers the environment in which it was created. We can think of it as an object with one method and private variables. JavaScript closures are a special kind of object which contains the function and the local scope of the function with all the variables (environment) when the closure was created.

image

To understand closures, first we need to understand SCOPING in the JavaScript. We can create a variable or a function in three levels of scoping,

  1. Global Scope
  2. Function or local scope
  3. Lexical scope

I have written in details about scoping here, but let’s take a brief walkthrough of scoping before getting into closures.

Scopes in JavaScript

As soon as we create a variable, it is in a Global Scope. So, if we have created a variable which is not inside any function, it is in a global scope.

Read full article on the Infragistics Blog

Simplifying Objects, Inheritance and prototype in JavaScript

Although JavaScript is a Class-Free language, it supports objects creation, overriding properties/methods and inheritance. In this post, we will explore the concepts of object creation and inheritance.

In JavaScript, Objects can be created in three possible ways:

  1. An object as literal
  2. Using the function constructor
  3. Using the Object.Create method

Object as literal

A simple object Student – as an object literal – can be created as shown in the listing below:


var Student = {

    name: "dj",
    age: 32,
    Father: {
        'name': 'Ram',
        'occupation': 'service'
    },
    Subjects: [{

        name: "Physics",
        marks: 89
    },
	{

	    name: "Chemistry",
	    marks: 95
	}]
};

Above we have created an object called Student. There are three types of properties attached to Student: simple properties like name and age, complex properties like “Father”, and an array property called Subjects. We can read properties as shown in the listing below:


console.log(Student.Father.name);

for (var i in Student.Subjects) {
    console.log(Student.Subjects[i].name);
}

We can also have a function serve as the property of an object, which is known as the method. So let’s say we want to attach a method “Speak” to the Student object.  We can add the Speak method as shown in the listing below.


var Student = {

    name: "dj",
    age: 32,

};

Student.Speak = function (message) {

    var finalMessage = this.name + " has said :" + message;
    console.log(finalMessage);
};

Student.Speak("I am the best");

On calling Speak function as method, we will get output as shown in the image below:

There are some important points about the Speak method to remember:

  1. Properties can be added to an object at any time; a property can be added to an object after its creation too. For example, we added the Speak property later to Student object, rather than at the time of object creation.
  2. In the object’s method, the object is defined by value “this”. That is why we are able to print the name of the Student using this.name in the method.
  3. Calling a function as method is known as “Method Invocation Pattern”

In the above example, we are calling the Speak method on the object “Student”. So the value ofthis inside the Speak method is the Student object.

If we want to pass some other object as the value of “this” in the method, we can use the apply or call function. For example, we have one more object called Parents and,

  1. We are calling the Speak method of the Student object directly and the value of “this” in the Speak method would be Student.
  2. We are passing Parent as the value of “this” in the Student object’s Speak method. We are using the apply function to call the Student object’s Speak method and passing the Parent object as the value of this.

Read full article on the Infragistics Blog

Getting started with TypeScript

TypeScript is superset of JavaScript created by Microsoft. TypeScript – according to its website – “lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript”.

Some features of TypeScript include:

  • Support standard JavaScript
  • Static typing
  • Encapsulation using the classes and the modules
  • Constructors, properties and functions supports
  • You can define interface
  • Lambda support Lambda support
  • Syntax checking
  • Type annotations
  • Static or dynamic loading of module contents

TypeScript can be summarized in the following points:

  • TypeScript is syntactic sugar for JavaScript
  • TypeScript syntax are the superset of ECMASCRIPT 5 syntax.
  • TypeScript compiler converts or compiles the TypeScript file into a JavaScript file locally.
  • TypeScript does not reorder the variable declaration
  • TypeScript syntax includes various proposed features of ECMASCRIPT 6
  • TypeScript complies with module codes generation which can by loaded statically or dynamically.
  • TypeScript works with type inference

This post will help you to get started with TypeScript, setting up the environment for TypeScript development in the Visual Studio and Sublime Text. At the end of the post we will create a simple TypeScript program in Visual Studio.

Read the full article on the Infragistics blog

How to create an Azure-based real time Chat Application using Firebase and jQuery

In this post, we’re going to show you step by step instructions on how to create a Chat application that’s similar to a group chat messenger where many people at any given time can read and send messages with the group. In this example we’re going to use the following technologies:

  1. Firebase
  2. HTML
  3. Bootstrap
  4. jQuery

Eventually we will host the application on the Microsoft Azure website, and we’ll use Visual Studio IDE to develop the application.

You can see the real time chat application we are going to build in this article live at: http://igchatapp.azurewebsites.net/chat.html . Feel free to chat with us at this URL!

Setting up Firebase

Register on https://www.firebase.com/ and login to access the Firebase portal. In the right hand side, you’ll find the option to create a new app. Give your app a name and the URL to create a new app in Firebase.

Read the full article on the Infragistics blog

Simplifying the JavaScript Callback function for .NET developers

In JavaScript, functions are objects, and they can:

  • Be passed as an argument to another function
  • Return as a value from a function
  • Be assigned to a variable

Let’s assume that you have a JavaScript function (let’s call it function A) with the following properties:

  • Function A takes another function (let’s call this one function CB) as one of the parameters.
  • Function A executes the function CB in its body

In the above scenario, function CB is known as the Callback function. Let’s learn more about it using the following code:

Read full article on the Infragistics blog

Objects in JavaScript for .NET developers – Part 1

Read full article on the Infragistics blog

Here are some fun facts for you: JavaScript is not an object oriented language, but almost everything in JavaScript is an object. JavaScript does not have classes, and we can create an object from an object. A function can be used as a constructor, and returns a newly created object. Every object in JavaScript contains a second object called a prototype object.

If you’re coming from a .NET background, the sentences you just read probably don’t make any sense. But these are all true statements about JavaScript. And in this post we will focus on different ways to create objects in JavaScript

  1. Object as literal
  2. Creating an object using the new operator and constructors
  3. Creating an object using the Object.create() static method
Object creation as literal

The simplest way to create an object is by creating an object using the object literal. We can create a simple object as shown in the listing below:

Read full article on the Infragistics blog

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

Read full article on the Infragistics blog

This is the second part of the series in 11 Things about JavaScript Functions that .NET Developers Should Know . In part 1 we discussed the following topics,

  1. JavaScript functions as an expression
  2. JavaScript functions as a statement
  3. Return statements in JavaScript functions
  4. Parameters in JavaScript functions
  5. The Arguments object in JavaScript functions
  6. Varargs JavaScript functions

In this part we will discuss the following topics,

  1. Scopes in functions
  2. Nested functions and Lexical scoping
  3. Functions’s this keyword
  4. Function as constructor
  5. The call() and the apply() methods

Scopes in function

Scoping stands for current context of code execution. Either a variable o expression can be executed in the context of the function they are created or in the global context of the JavaScript. JavaScript does not have the block scoping. It only supports scoping at the function level or global level.

Any variable defined anywhere in the function can be used everywhere in the function but not outside the function.

Read full article on the Infragistics blog