Category: JavaScript
-
Make all properties optional using Partial in TypeScript
The utility type Partial<Type> makes all properties of a type optional. Using a scenario, let us try to understand Partial<T> in TypeScript. So, you have a type called Product, that is created as below: export interface Product { Id: string; Title: string; Price: number; inStock: boolean; Quantity: number; } And there is a function to update the price of a product as shown […]
-
Video – Master JavaScript ‘this’ in 30 Mins
Do you know, there are four ways to calculate the value of ‘this’ inside a JavaScript function? Some pointers about ‘this’ Every function has it’s own ‘this’ An arrow function does not have it’s own ‘this’ The value of ‘this’ depends on, how that function is called. The value of ‘this does not depend on […]
-
JavaScript function is also a constructor?
JavaScript function is also a “constructor.” You must have heard it many times, haven’t you? Well, that is a wrong way of interpreting the JavaScript function; even though you can create an object using a function, it does not mean you can call it a constructor. Let us discuss it: There are four ways to […]
-
Union and Intersection of types in TypeScript
Do you know, TypeScript allows union and Intersection of types? Why you need that? Let us assume you need to create a function that checks whether the passed value is boolean true and returns true, otherwise returns null. That function may look like below, function trueOrNull(foo: any): any { if (foo === true) { return true; } return undefined; } console.log(trueOrNull(88)); // null As you see, the […]
-
Master RxJS: Part 2 – What is an observer
This is the second post in the Master RxJS series. The first post is a video tutorial that explains, why RxJS Watch it here: In this post, we will discuss an observer in RxJS. An observer is an object with three call-back functions to subscribe to the notifications from an Observable. Too much technical jargon? […]
-
How to make the length of an Array read-only in JavaScript
Sometimes, you may come across a requirement that once the array is created, its length should not be changed. In this blog post, let us explore how you can achieve that. Let us say you have an array as shown below, let foo = ['1', '11']; console.log(foo.length); // 2 console.log(foo[1]); //11 As you see, the length of the array is 2, and […]
-
Link Constructors prototypes to create Inheritance in JavaScript
In JavaScript, there are multiple ways to create an object. However, among all the most popular is using a function as a constructor. A function returns a newly created object if it is called using the new, which is also known as Constructor Invocation Pattern. You can create a function constructor like any other […]
-
How Object.entries work internally in JavaScript
In JavaScript, the Object.entries method returns an array of object’s own enumerable properties. It returns properties as a [key, value] pair, where the key is a string. You can read enumerable properties as an array of key-value pairs using the Object.entries method as shown below, let Product = { Title: ‘Book’, Price: 120, Author: undefined, inStock: true } console.log(Object.entries(Product)); Since it returns […]
-
Working with objects in a JavaScript Arrow Function
The JavaScript Arrow function is a shorter way of writing a function expression. Let us say you have a function expression as below, var add = function (num1, num2) { return num1 + num2; } The above function can refactor for a shorter syntax using the arrow function as below, var add = (num1, num2) => num1 + num2; So, as you see, the arrow function provides a convenient and short syntax […]
-
Why use new.target inside a function in JavaScript – Simplified
There are four invocation patterns in JavaScript, which means you can call a function in four possible ways. They are, Function Invocation Pattern Constructor Invocation Pattern Method Invocation Pattern Indirect Invocation Pattern Essentially, these four-invocation patterns determine the value of ‘this’ object inside a function. Let us consider the function created below, function add(num1, num2) { console.log(this); // global object } […]