let and const are two new keywords introduced in the ECMAScript 6 (ES6, a.k.a. ES 2015) . Since TypeScript is the superscript of JavaScript the uses of let and const are already accessible in the language.

let is similar to var but it helps to avoid some of the common problems with var

const is similar to let plus is prevents the re-assignment of any variables.

var conundrum

var in JavaScript has some odd scoping rules when compared to other languages. var declarations are accessible within their containing function, module, namespace or global scope regardless of the containing block.

In other words JavaScript doesn’t have the concept of block scoping.

function callvalue(init) {
 if (init) {
 var x = 10;
 return x;
 }
 return x;
}

callvalue(true); //returns 10

callvalue(false); //returns undefined

Other quirks with vars

Allows multiple declarations of the same variable in same scope

Variable Capturing :  JavaScript always captures variables, not values

let

As we pointed our in the above section var have some problems which is why we should use let.

 let x = 10; 

As you can see let are declared in the same way as var’s, but the difference is not in the syntax but in semantics.

Block Scoping

Unlike var’s let uses block scoping or lexical scoping. For example the below code sample will throw error

function callvalue(init) {
 if (init) {
 var x = 10;
 return x;
 }
 // Error x doesnt exist here
 return x;
}

Note: You can use variables before its declared in TypeScript but the catch is that it is illegal to use variables before declaring in TypeScript. If we are targetting ES6 compatible runtime this will throw a run time error.

let x = 10;
let x = 20; // error: can't re-declare 'x' in the same scope

var allows for re-declaration of variables TypeScript wont

function some() {
 let x = 100;
 var x = 100; // error: can't have both declarations of 'x'
}

const

const declarations are similar to let but their value cannot be changed once its declared but all the scope rules that applies to let applies const too.

One catch to const though is its not immutable, its mutable. i.e you can’t reassign them but you can change the values.

const obj = {
 name: "Uma"
};

// left hand side cannot be a constant
obj = {
 name: "Mahes"
}

// valid assignment
obj.name = "Mahes";

Destructuring

The destructuring assignment statement is used to extract data from arrays or objects into distinct variables.

Array Destructuring

let fullname = ["Umamaheswaran","Manivannan"];

let [firstname, lastname] = fullname;

console.log(firstname); // outputs Umamaheswaran

console.log(lastname); // outputs Manivannan

 

Object Destructuring

let fullname = {
 firstname: "Uma",
 middlename: "M",
 lastname: "Mani"
}

let {firstname, lastname} = fullname;

Property renaming

let {firstname: givenname, lastname: surname} = fullname;

the above line is equal to

let givenname = fullname.firstname;
let surname = fullname.lastname;

Default Values

This feature allows us to assign a default value if a value is undefined

function myfunction(input: { a: string, b?: number }) {
 let {a, b = 100} = input;
}

In the above function in the input parameter v is declared as optional. If there are no values passed to b let keyword assigns them a default value of 100.

Function declarations

Destructuring also works for functions

function f({a, b} = {a: "", b: 0}): void {
// ...
}
f();

 

Conclusion

In the blog we have seen about variable declarations and its related features in the next blog we will look into interfaces and classes