What are getters and setters in JavaScript

In JavaScript, you may have heard of getters and setters. Let’s take a look at what these things are.

First, a setter is used to set the value of a property. A setter gets called each time the value of the property is changed. In other words, it executes a function for each time a property used inside the setter function is changed. Take a look at the following code:

image

In the object foo, the setter cal will be called each time the property a is changed. As an output, you will get 13 printed. While creating a setter, you need to follow these rules:

  • A setter name could be either string or number.
  • A setter must have exactly one input parameter.
  • There should be only one setter with the same identifier in an object
  • You can remove a setter using the delete operator

For other examples of a setter, let’s take a look at the following code:

image

For the above code snippet as output, Hello Jason will be printed. You can also add the setter to an existing object using Object.defineProperty. Let’s say that you have an object foo:

image

Now to add a setter for the existing object foo , use Object.defineProperty.

image

Read full article on the Infragistics blog

JavaScript Object Property Descriptors

In JavaScript, you can create an object literal as shown in the listing below:

image

At first sight, it looks like the object cat has two properties with a string and number value. However, it’s much more than that to a JavaScript interpreter. In ES5, the concept of a Property Descriptor was introduced. Before we go ahead and discuss property descriptors, let’s try to answer a few questions:

  1. How do I create a read only property?
  2. How do I make an unenumerable property?
  3. How do I make property not configurable?
  4. How do I determine whether a property is read only?

You can answer all these questions when you understand Property Descriptors.

Let’s consider the code below:

image

Here, your output will be as follows:

As you can see here, there are four characteristics of a property:

  1. Value
  2. Writeable
  3. Enumerable
  4. Configurable

The value holds the data of the property, whereas writeable, enumerable, and configurable describe other characteristics of the property. Let’s take a closer look at each of these characteristics in the rest of this post.

Writable

Whether value of the property can be changed or not is decided by the writable characteristic. If writable is set to false, then the value of the property can’t be changed and JavaScript will ignore any changes in the property value. Consider the code below:

image

You can change the value of the writable, configurable, and enumerable characteristics using Object.defineProperty. We’ll talk more about Object.defineProperty later in this post, but as you see in the code snippet above, we have set the writable to false, thereby changing the value of the name property. JavaScript will ignore the reassignment, and the value of the name property would remain foo.

If you run the code in strict mode, for reassignment of the property value where writable is set to false, JavaScript will throw an exception. Consider the code below:

image

Here, JavaScript is running in strict mode, hence when you reassign the value for the name property, JavaScript will throw an exception as shown below:

The error message here says you cannot assign something to a read only property.  Here, aproperty acts as a read only property if the writable characteristic of the property is set to false.

Read full article on the Infragistics blog

Simplifying Content Projection in Angular

In Angular, content projection is used to project content in a component. Let’s take a closer look at how it works:

Content projection allows you to insert a shadow DOM in your component. To put it simply, if you want to insert HTML elements or other components in a component, then you do that using concept of content projection. In Angular, you achieve content projection using < ng-content >< /ng-content >.  You can make reusable components and scalable application by right use of content projection.

To understand content projection, let us consider GreetComponent as shown in the code listing below:

image

Now if you use GreetComponent in another component, and want to pass a greeting message from the parent component, then you should use the @Input() decorator. This way, a modified GreetComponnet will look like the listing below:

image

Using the @Input() decorator, you can pass a simple string to the GreetComponnet, but what if you need to pass different types of data to the GreetComponent such as:

  1. Inner HTML
  2. HTML Elements
  3. Styled HTML
  4. Another Component etc.

To pass or project styled HTML or another component, content projection is used. Let us modify the GreetComponent to use content projection in this code:

We are using to project content in the GreetComponent. When you use the GreetComponent, you’ll pass content as shown below:

Read full article on the Infragistics blog

Arrow functions in JavaScript

The JavaScript arrow function is a shorter way of writing a function expression that was introduced in ECMAScript 6. Usually in JavaScript, you can create a function in two ways:

  1. Function as statement
  2. Function as expression

A function statement can be created as shown below:

image

The same function can be created as a function expression as shown below:

image

ECMA 2015 (or ECMA Script 6) introduced shorter syntax to write a function expression called the arrow function. Using the arrow function, you can write the function expression above as seen here:

image

As you see, writing a function expression using the arrow function is shorter.

Basic syntax rules for arrow functions

First, parameters should be passed in the small parentheses. You can create an arrow function with two parameters as shown below:

Read full article on the Infragistics blog

Simplifying function hoisting in JavaScript

To understand function hoisting, let us start by considering the code listed below:

image

In any other programming language, the output here would be a reference error. However, in JavaScript you will get undefined as the output. Why? Because JavaScript hoists variables at the top of the execution context. An execution context could be the function in which a variable is declared, or a JavaScript file in which a variable is declared. So, let us rewrite the above code snippet using a function:

image

Here, the variable “foo” is hoisted at the top of function abc execution context; which means you can access foo before it is declared. To put it simply, whenever you declare a variable, the JavaScript interpreter breaks it into two statements:

  1. Declaration of variable
  2. Assignment

The declaration of a variable goes at the top of the execution context, and assignment happens where the variable is created. So the above code snippet is broken into two statements as shown in the image below:

The variable foo is hoisted at the top of the execution context of function abc, hence when you use it before its declaration, you get “undefined” as the output.

Keep in mind that a variable declared using the let statement does not get hoisted to the top of the execution context.

Now that you understand how variables are hoisted in JavaScript, let’s explore function hoisting in JavaScript. In JavaScript a function can be created in two ways:

Read full article on the Infragistics blog

What is the arguments object in a JavaScript function?

A JavaScript function has array-like objects called arguments which correspond to the arguments passed to the function. All arguments passed to a JavaScript function can be referred using the arguments object. 

Now as we get started, let’s consider the code listed here:

image

In the above function, num1 and num2 are two arguments.  You can refer to these arguments using the arguments named num1 and num2. Besides the arguments name, you can also refer to them using a JavaScript array like the object arguments. So, the above function can be rewritten as shown in the listing below:

image

In JavaScript functions, the arguments object is used to access or refer to all arguments passed to the function. The arguments object is a local variable available to the function. The length of the arguments object is equal to the number of arguments passed to the function.  Let us consider the code below, where you’ll get 2 as an output because two arguments have been passed to the function:

Read full article on the Infragistics blog

What is a Default Parameter in a JavaScript function?

A JavaScript function can have default parameters values. Using default function parameters, you can initialize formal parameters with default values. If you do not initialize a parameter with some value, then the default value of the parameter is undefined.

image

While calling function foo, you are not passing any parameter, so the default value of variable num1 is set to undefined. However, sometimes you may want to set a default value other than undefined. In the past, the best strategy was to test for the parameter value undefined and then assign a value. So, let us say that in the above example, you want to set the default value of num1 to 9. You can do that as shown in the code listed below:

image

ECMAScript 6 introduced default parameters for the function. Using the default parameters features of ECAMA 2015, you no longer have to check for an undefined parameter value. Now, you can put 9 as the default value in the parameter itself. You can rewrite the function above to use the default value as shown below:

image

For function foo, if num1 parameter’s value is not passed, then JavaScript will set 9 as the default value of num1.

Read full article on the Infragistics blog