How to push an element at the beginning of an array in TypeScript?

In this tutorial, we will learn to push the elements at the start of the array in TypeScript. There are different ways to push single or multiple elements at the start of the array in TypeScript.

Here, we will learn three different methods to push array elements at the array's starting index.

Using the Array.unshift() Method

The Array.unshift() method of TypeScript allows us to add the element into the array at the beginning. Also, we can add multiple elements at the start of the array using the Array.unshift() method.

Syntax

Users can follow the syntax below to use the array.unshift() method to insert the element at the start of the array.

var nums : Array<number> = [2, 3, 4, 5];
nums.unshift(element);

In the above syntax, we have inserted the ‘element’ at the start of the array.

Parameters

• element − It is an element to add to the array at the start. Users can add multiple comma-separated elements as a parameter.

Example

var nums : Array<number> = [2, 3, 4, 5];
// add single element at the start of the number array.
nums.unshift(1);
console.log("After adding single elements to the starting of the nums array: " + nums);
// creating array of strings
var welcome : Array<string> = ["TutorialsPoint", "!"];
// Add multiple string elements at the start of the array.
welcome.unshift("Welcome","To");
console.log("After adding multiple elements to the starting of the Welcome array: " + welcome);

On compiling, it will generate the following JavaScript code −

var nums = [2, 3, 4, 5];
// add single element at the start of the number array.
nums.unshift(1);
console.log("After adding single elements to the starting of the nums array: " + nums);
// creating array of strings
var welcome = ["TutorialsPoint", "!"];
// Add multiple string elements at the start of the array.
welcome.unshift("Welcome", "To");
console.log("After adding multiple elements to the starting of the Welcome array: " + welcome);

Output

The above code will produce the following output −

After adding single elements to the starting of the nums array: 1,2,3,4,5
After adding multiple elements to the starting of the Welcome array: Welcome,To,TutorialsPoint,!

In the output of the above example, users can observe that 1 is inserted at the start of the ‘nums’ array, and [‘welcome’, ’ To’] is added to the starting of the ‘welcome’ array.

Use the Array.splice() Method

The Array.splice() method allows us to insert the element at any array position. Also, we can insert multiple elements in the array in the particular range of the position.

Syntax

Users can follow the syntax below to use the Array.splice() method to insert the array at the start.

var strings: Array<string> = ["Two", "Three", "four", "five"];
strings.splice(start_index, end_index, element);

In the above syntax, we have created the array of strings and used the array.unshift() method to insert element in the array.

Parameters

• start_index − In our case, we will use 0 as a value of start_index to insert the element at the start.

• end_index − For end_index, also we will use 0, as we want to insert the element in the range from 0 to 0.

• element − It is an element that needs to insert at the start

Example

In the example below, we have created the ‘nums’ array of strings. After that, we used the Array.unshift() method to insert the element at the 0th index of the array. In the output, users can see that ‘one’ is added at the starting of the array.

// creating array of strings
var strings: Array<string> = ["Two", "Three", "four", "five"];
// Add element at 0th index of the array using the array.splice
strings.splice(0, 0, "one");
console.log("After adding one to the starting of the strings array: " + strings);

On compiling, it will generate the following JavaScript code −

// creating array of strings
var strings = ["Two", "Three", "four", "five"];
// Add element at 0th index of the array using the array.splice
strings.splice(0, 0, "one");
console.log("After adding one to the starting of the strings array: " + strings);

Output

The above code will produce the following output −

After adding one to the starting of the strings array: one,Two,Three,four,five

Use the Array.push() Method

The array.push() method allows us to insert the element in the array at last, but we can create some custom algorithm that can shift the last element to the start of the array.

Syntax

Users can follow the syntax below to insert the element at the start using the array.push() method.

var arr: Array<number> = [3, 4, 5, 6, 7, 8];
arr.push(element);
for (let i = arr.length-1; i > 0; i--) {
   let temp = arr[i];
   arr[i] = arr[i - 1];
   arr[i - 1] = temp;
}

In the above syntax, we used the array.push() method to add an element at last in the array and shifted it to the first.

Algorithm

Users should follow the below algorithm to insert the element at the start of the array.

Step 1 − Insert the element at the end of the array using the array.push() method.

Step 2 − After that, swap the nth element with the n-1th element, swap the n-1th element with the n-2th element, and so on. Users can use the for loop and swap the first n-1 element with the last element to shift it to the first position.

Example

In the example below, we have created the array of numbers. The ‘insertAtStart()’ function implemented the above algorithm to insert the array element at the start. We call the ‘insertAtStart()’ function two times by passing 2 and 1 as an argument, respectively, and users can see the results in the output.

var arr: Array<number> = [3, 4, 5, 6, 7, 8];

function insertAtStart(element: number) {
   // push element at the last of the array
   arr.push(element);
   //   Move last element to the first by swapping the values of the array.
   for (let i = arr.length-1; i > 0; i--) {
      let temp = arr[i];
      arr[i] = arr[i - 1];
      arr[i - 1] = temp;
   }
   console.log("After adding " + element + " to the start of array: " + arr);
}

insertAtStart(2);
insertAtStart(2);

On compiling, it will generate the following JavaScript code −

var arr = [3, 4, 5, 6, 7, 8];
function insertAtStart(element) {
   // push element at the last of the array
   arr.push(element);
   //   Move last element to the first by swapping the values of the array.
   for (var i = arr.length - 1; i > 0; i--) {
      var temp = arr[i];
      arr[i] = arr[i - 1];
      arr[i - 1] = temp;
   }
   console.log("After adding " + element + " to the start of array: " + arr);
}
insertAtStart(2);
insertAtStart(2);

Output

The above code will produce the following output −

After adding 2 to the start of array: 2,3,4,5,6,7,8
After adding 2 to the start of array: 2,2,3,4,5,6,7,8

This tutorial taught three different methods to insert the element at the start of the array in TypeScript. The Array.unshift() method is the simplest method as it takes a value as a parameter user wants to insert at the start. For a single element, users can also use the array.splice() method. The third method has been built by custom and its time complexity is also of O(n). So, it is recommended to use the Array.unshift() method due to its easy syntax.