TypeScript – How to Add Items to Array

An array in TypeScript, once initialized, cannot be resized. The items in an array can be modified but cannot be removed (or added) without creating a new array.

So there are essentially two approaches to removing an item from an array:

  • Setting the element null/undefined without resizing the array.
  • Remove the element and create a new array of remaining elements.

Add, append, or push new items into an array in TypeScript. Also, learn to append or merge an array into a specified array with examples.

let array: number[] = [1, 2, 3];

//Append at the end
array.push(4);  //[1, 2, 3, 4]

//Append at the beginning
array.unshift(0);  //[0, 1, 2, 3, 4]

//Append at specified index
array.splice(0, 0, -1, -2);  //[-1, -2, 0, 1, 2, 3, 4]

//Append a new array
let newArray = array.concat([5, 6]); //[-1, -2, 0, 1, 2, 3, 4, 5, 6]

//Merge arrays using spread operator
let mergedArray = [...array, ...[5, 6]]; //[-1, -2, 0, 1, 2, 3, 4, 5, 6]

1. TypeScript Arrays

In TypeScript, like JavaScript, arrays are homogenous collections of values. We can define an array in the following ways. First, we can declare and initialize the array in the same line:

let array: number[] = [1, 2, 3];

let array: Array<number> = [1, 2, 3];

let array:number[] = new Array(1, 2, 3);

Or, we can declare an array and populate it later.

let array:number[] = new Array(3);

for(let i = 0;i<array.length;i++) { 
   array[i] = i + 1
}

2. Add Items at End using array.push()

The array.push() method appends the given items in the last of the array and returns the length of the new array.

newLen = array.push(item1, ..., itemN);

Let us see an example of adding new items to the array.

let array: Array<number> = [1, 2, 3];

let newLength = array.push(4, 5, 6);

console.log(newLength);     //6
console.log(array);         //[1, 2, 3, 4, 5, 6] 

3. Add Items at Start using array.unshift()

The array.unshift() method appends the specified items at the beginning of the array and shifts the existing items to the right.

array.unshift(item1, ..., itemN);

Let us see an example of unshifting the array items.

let array: Array<number> = [1, 2, 3];

let newLength = array.unshift(-1, 0);

console.log(newLength);     //5
console.log(array);         //[-1, 0, 1, 2, 3] 

4. Merging Two Arrays into a New Array

If we have two arrays and want to combine them into a new array containing items from both arrays in a similar order, then we can merge the arrays in the following ways.

The first method uses the spread operator (…). The spread operator is used to expand or spread an iterable or an array.

let array1: number[] = [1, 2];
let array2: number[] = [3, 4];

let mergedArray: number[] = [...array1, ...array2];

console.log(mergedArray); // [1, 2, 3, 4]

Another way to merge two arrays is by using the array.concat() method. The concat() method returns a new array comprised of given array joined with other specified array(s) and/or value(s).

let array1: number[] = [1, 2];
let array2: number[] = [3, 4];

let mergedArray: number[] = array1.concat(array2);

console.log(mergedArray); // [1, 2, 3, 4]

5. Adding Items at Specified Index Position

Sometimes, we will need to add the new items in an array at the specified index position. We can use the array.splice() method for this purpose. The syntax of splice() method is:

array.splice(index, countOfElemsToDelete, [element1 ..., elementN]);
  • index − Index at which to start changing the array.
  • countOfElemsToDelete − An integer indicating the number of elements to remove. Pass 0 not to remove any of the existing elements.
  • [element1, ..., elementN] − An optional list of elements to add to the array from the index location passed as the first argument.

In the following example, we are adding new elements from index location 2.

let array: number[] = [0, 1, 4, 5];

array.splice(2, 0, 2, 3);

console.log(array); //[0, 1, 2, 3, 4, 5]

6. Conclusion

This typescript array tutorial taught us to add new items to an array using different methods. We learned to add items at the beginning, at the end and at any specified index location. We also learned to merge two arrays to produce a new array of combined items from both arrays.

Happy Learning !!

Comments

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

About Us

HowToDoInJava provides tutorials and how-to guides on Java and related technologies.

It also shares the best practices, algorithms & solutions and frequently asked interview questions.

Our Blogs

REST API Tutorial

Dark Mode

Dark Mode