Technology Works

Thursday, November 8, 2018

TypeScript - ES6 - Template Literals

In JavaScript, if we want to write multi-line statements - we must use backticks. In the following example:

let myFavoriteCity = "Visakhapatnam";

console.log(`Last year I have been to a beautiful city.

It had several beaches. One of them was Rushikonda beach.

The city name is ${myFavoriteCity}`);

Console Output:
Last year I have been to a beautiful city.
It had several beaches. One of them was Rushikonda beach.
The city name is Visakhapatnam

In this example, while typing multi-line string using backticks we wanted to print the myFavoriteCity variable. For this, we have used the template literal. A template literal is variable enclosed within curly braces which is preceded by dollar sign.

TypeScript - ES6 - arrays and objects destructuring

Consider we have an array of 3 elements. Now, if we want to extract the 3 elements into 3 separate variables simultaneously - then we can use the array destructuring functionality provided by ES6.

Destructuring of Arrays:

const cricketStars = ["Virat Kohli","Ajinkya Rahane","Rohit Sharma"];

let [cricketStar1, cricketStar2, cricketStar3] = cricketStars;

console.log(cricketStar1);

console.log(cricketStar2);

console.log(cricketStar3);

Observe the second line where we are extracting the elements of the array into 3 separate variables. This is destructuring of arrays.

Now, destructuring may also be used for objects.

Destructuring of Objects:
Now, we may apply the same concept to objects in JavaScript. Consider the following Example:

const myCityObj = {myCityName:"Hyderabad",myCityElevation:505}

const {myCityName, myCityElevation} = myCityObj;

console.log(myCityName);

console.log(myCityElevation);

Now, the important thing to note in second line: the name of the variables is the same as the the object keys. This is because in JavaScript Objects - the objects keys are not ordered. Hence, for us to destructure correctly - we need to specify the key names as the variable names to hold the values. In case, we wish to reassign to new variables, we can do it as follows:

const myCityObj = {myCityName:"Hyderabad",myCityElevation:505}

const {myCityName: newCityName, myCityElevation:newCityElevation} = myCityObj;

console.log(newCityName);

console.log(newCityElevation);

Reference:

TypeScript - ES6 - rest and spread operators

The Rest and the spread operators are some new additions in TypeScript 2.1. These operators help us to work with arrays and list of numbers.

SPREAD operator:

Arrays are numbers separated by commas within square brackets. But, to functions like Math.max() and Math.min() - the input required is a list of numbers. Consider the following example:

// reset and spread operator usage

const myNumberSet = [1,10,99,-5];

console.log(Math.min(33,99,10,-3));

console.log(Math.min(...myNumberSet));

Since, we have an array and we want to convert it to a list of numbers so that we can provide it as an input to the function Math.min(). We can prepend 3 dots to the arrayName. This is called the spread operator. This is what we have used in the below:

console.log(Math.min(...myNumberSet)); 

Spread opearator is very useful as it allows us to flexibly transform the arrays without writing any complicated loops.

REST Operator:

If we want to convert a list of numbers to a number array - we can use the REST operator in the function input argument as follows.

function change2Array(...inputArgs:number[]){

    return inputArgs;

};

console.log(change2Array(1,2,3,4,5,6,7,8,9));

Really, the difference, between REST and SPREAD operator is the location of the usage.

Reference:

Wednesday, November 7, 2018

TypeScript - ES6 - providing default parameters to functions

We can set default parameters to functions in TypeScript. Consider the following function:

const myCountFunc = (begin:number = 10): void => {

    console.log("begin = "+begin);

    for (let i=begin; i > 0; i--){

        begin--;

        console.log("begin = "+begin);

    }

    console.log("Finished");

}

myCountFunc();

During the function call, since, we have not provided any input parameter number. It will start from the default parameters, which is 10.

Console Output is as follows:

begin = 10
city-App.ts:46 begin = 9
city-App.ts:46 begin = 8
city-App.ts:46 begin = 7
city-App.ts:46 begin = 6
city-App.ts:46 begin = 5
city-App.ts:46 begin = 4
city-App.ts:46 begin = 3
city-App.ts:46 begin = 2
city-App.ts:46 begin = 1
city-App.ts:46 begin = 0
city-App.ts:49 Finished

Tuesday, November 6, 2018

TypeScript - ES6 - arrow functions variations

arrow function without arguments:

const walkFunc = () => {

console.log("walk to Tadipatri");

};

walkFunc();

Console Output:
walk to Tadipatri

arrow function with a single argument:

const singFunc = (songName:string) => console.log(songName);

singFunc("Vande Mataram!");

Console Output:
Vande Mataram!

TypeScript - ES6 - arrow functions

In ES6, arrow functions were introduced.

Consider the following function to multiply two numbers.

console.log("Arrow functions Demo");

console.log("+++++++++++++++++++++");

const multNumbers = function(number1:number, number2:number): number {

return number1 * number2;

}

this is the traditional method to define functions.

Now, the ES6 way of defining arrow functions are as follows:

console.log("Add Numbers:");

const addMyNumbers = (number1:number, number2:number) => (number1+number2);

console.log("addMyNumbers(4,5) == "+addMyNumbers(4,5));

This is called arrow functions because we use the arrow operator to point to the function body.

Reference:
https://www.typescriptlang.org/docs/handbook/functions.html

TypeScript - ES6 - block scope

To understand block scope, Consider the following code:

let var4reset = "hello";

// Block Scope test

function resetMyVariable (){

    console.log("before == "+var4reset);

    let var4reset = null;

    console.log("after == "+var4reset);

}

console.log("variable out before call == "+var4reset);

resetMyVariable();

console.log("variable out after call == "+var4reset);

Its console output is generated as:
variable out before call == hello
city-App.ts:10 before == undefined
city-App.ts:12 after == null
city-App.ts:17 variable out after call == hello

We can see that the variable which is defined outside the function, does not hold the same value inside the function during the call. This is because, function has its own scope. Scope defines where a variable lives. It is the jurisdiction in which the variable operates.

If you want the variable value to be available inside the function, then you need to pass to the function using function arguments. Also, the function defined inside the function does not live outside it. This is block scope of the variable.

Refer: