Course Banner


TypeScript Array

So, what is an Array?

Array is a group of elements which has common name. Array objects are identified by its index. And index always start from 0.

Typescript offers array. An array is a same type of collection of values. In another word, we can say an array is a collection of values of the same data type. It is a user defined data type.

Declaring an Array

To declare an initialize an array in Typescript use the following syntax

Syntax

var colors[:datatype];        //declaration
colors= [val1,val2,valn..]   //initialization

In the above code we have declared an array whose data type we can put what we like. If we declare an array without data type, TypeScript considers it as any data type.

Example :

var colors:string[] = ['red','blue','green','yellow'] ;


Showing Array Elements

The array name followed by the subscript is used refer to an array element. Its syntax is as follows −

As you know Array elements start from 0 . So, we can either show the elements individually or through for loop.


console.log(colors[0]);

Output : Red;


Showing the array elements through for loop.


var colors:string[] = ['red','blue','green','yellow'] ;

for(let color of colors){

  console.log(color);

}

Array as an Object

Apart from above what we have seen, we can also create array object using array constructor.

Inside the constructor we can pass :

  • Numeric data

  • String comma separated values

The following example shows how to create an array using this method.

Example

On compiling, it will generate following JavaScript code.

1
2
3
4
5
var list:number[] = new Array(10) 
for(var i = 0;i<list.length;i++) {
   list[i] = i * 2;  
  console.log(list[i])
}

Example: In side array constructor we can put comma separated value also.

1
2
3
4
var courses:string[] = new Array("Java","Mean Stack","PHP","JSP");
for(var i = 0;i<courses.length;i++) {
  console.log(courses[i])
}

On compiling, it will generate following JavaScript code −

1
2
3
4
var courses = new Array("Java", "Mean Stack", "PHP", "JSP");
for (var i = 0; i < courses.length; i++) {
   console.log(courses[i]);
}

Its output is as follows −

Mary
Tom
Jack
Jill

Array Methods

A list of the methods of the Array object along with their description is given below.

S.No.

Method & Description

1.

concat()

Returns a new array comprised of this array joined with other array(s) and/or value(s).

Example

var alpha = ["a", "b", "c"];
var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric);
console.log("alphaNumeric : " + alphaNumeric );




3.

filter()

Creates a new array with all of the elements of this array for which the provided filtering function returns true.
Return Value

Returns created array.

Example

function isBigEnough(element, index, array) {
  return (element >= 10);
}
         
var passed = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log("Test Value : " + passed );

On compiling, it will generate the same code in JavaScript.

Its output is as follows −

Test Value :12,130,44


4.

forEach()

Calls a function for each element in the array.

Example

let num = [7, 8, 9];
num.forEach(function (value) {
 console.log(value);
});

On compiling, it will generate the following JavaScript code −

var num = [7, 8, 9];
num.forEach(function (value) {
   console.log(value);
});

Its output is as follows −

1
2
3


5.

indexOf()

Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
Example

var index = [12, 5, 8, 130, 44].indexOf(8);
console.log("index is : " + index );

On compiling, it will generate the same code in JavaScript.

Its output is as follows −

index is : 2


6.

join()

Joins all elements of an array into a string.
var arr = new Array("First","Second","Third");
         
var str = arr.join();
console.log("str : " + str );  
         
var str = arr.join(", ");
console.log("str : " + str );  
         
var str = arr.join(" + ");
console.log("str : " + str );

7.

lastIndexOf()

Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.

8.

map()

Creates a new array with the results of calling a provided function on every element in this array.

9.

pop()

Removes the last element from an array and returns that element.

10.

push()

Adds one or more elements to the end of an array and returns the new length of the array.

11.

reduce()

Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.

12.

reduceRight()

Apply a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.

13.

reverse()

Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.

14.

shift()

Removes the first element from an array and returns that element.

15.

slice()

Extracts a section of an array and returns a new array.

16.

some()

Returns true if at least one element in this array satisfies the provided testing function.

17.

sort()

Sorts the elements of an array.

18.

splice()

Adds and/or removes elements from an array.

19.

toString()

Returns a string representing the array and its elements.

20.

unshift()

Adds one or more elements to the front of an array and returns the new length of the array.

Array Destructuring

Array destruction is a way of breaking up the array into two or more parts.

Let's see example how that works.

Example

1
2
3
4
5
var list:number[] = [200,400,600]
var[a,b,c] = list
console.log(a)
console.log(b)
console.log(c)

Output :


Array Looping through using for…in loop

We can apply for in loop to loop through the array and show its results.

1
2
3
4
5
6
var i:number; 
var list:number[] = [100,200,300,400] 

for(i in list) { 
   console.log(nums[i]) 
}

The loop performs an index based array traversal.

Output :



Ad Image