Typescript array concatenation [With real examples]

In this typescript tutorial, we will see how we can concat/merge an array using concat() in typescript. Also, we will see different examples of contacting arrays in typescript.

• Typescript array concatenation
• typescript array concat vs push
• typescript array concat vs spread
• typescript concat arrays of different types
• typescript merge array types
• typescript concat arrays of strings
• typescript concat arrays of objects
• typescript merge array of objects by key
• typescript array concat undefine
• typescript merge two arrays without duplicates
• typescript array concat distinct
• typescript array concat null

Typescript array concatenation

In typescript to concat/merge two arrays into one, we use concat(), which is an inbuilt function.

The syntax for the concat method:

array.concat(val1, val2, val 3)

Example of concat method in typescript

For example, we have three array, so we will merge three array into one array using concatenate method in typescript. In the code editor, create a file ‘concatenate.ts’ and then write the below code.

var arr1 = [18, 12, 17];
    var arr2 = [11, 80, 16];
    var arr3 = [34, 20, 19]; 
  
    // use of concat() Method
    console.log(arr1.concat(arr2, arr3)); 

To compile the above code and run the below command and you can see the result in the console.

ts-node concatenate.ts

This is how we can concatenate array in typescript using concat method.

Read Typescript hello world program for beginners

Typescript array concat vs push

Here we will see what is the difference between the concat and push methods in typescript

Push method in Typescript

The push() function appends one or more items to the end of an array and returns the array’s new length.

For example, we have the below code and you can see that arr2 is pushed to arr1 using push() in typescript. In the concatenate.ts file write the below code.

var arr1:any = ["aa", "cc", "dd"];
var arr2:any = ["bb","gg", "hh"];
var arr3:any = arr1.push(arr2);
console.log(arr3); 
console.log(arr1);

To compile the code and run the below command, you can see the result in the console.

ts-node concatenate.ts

concat() in typescript

Concat() is used to concat two or more arrays. This function returns a new array rather than changing the current arrays.

For example, if we have two arrays, we will concat these two arrays using concat method. In the concatenate.ts file write the below code.

var arr1:any = ["aa", "cc", "dd"];
var arr2:any = ["bb","gg", "hh"];
var arr3:any = arr1.concat(arr2);
console.log(arr3);

To compile the code and run the below command and you can see the output in the console.

ts-node concatenate.ts

This is the difference between of concat vs push in typescript.

Typescript array concat vs spread

Here we will see what is the difference between concat and spread method in typescript.

spread method in typescript

With the spread method we can combine the arrays, using spread syntax by destructing arrays.

For example, we have two arrays, and we will combine these two arrays using spread syntax.

In the concatenate.ts file write the below code :

let number1= ['xx', 'oo', 'ee'];
let number2 = ['ff', 'gg'];
console.log([...number1, ...number2]);

To compile the code, run the below command and you can see the result in the console.

ts-node concatenate.ts

concat method in typescript

The concat method in typescript merge two arrays, but it does not change the existing array in typescript.

For example, we have two arrays, and we will combine these two arrays using concat() in typescript.

In the concatenate.ts file, write the below code:

let number1= ['xx', 'oo', 'ee'];
let number2 = ['ff', 'gg'];
console.log(number1.concat(number2));

To compile the code and run the below command and you can see the result in the console.

This is the difference between concat vs spread in typescript.

Read Typescript Identifiers and Keywords

Typescript concat arrays of different types

Here we will see how we can concat an array of different types in typescript using concat().

For example, we have two arrays of different types, so we will contact these two arrays using the concat method in typescript. In the concatenate.ts file, write the below code.

let header: [Array<string|number>] = [["title", "value"]];
let colVal = [["a", 1], ["b", 2], ["c", 3]];

let all = header.concat (colVal);
console.log(all);

To compile the code, run the below command and you can see the output in the console.

ts-node concatenate.ts

This is an example of Typescript concat arrays of different types.

Read Typescript type annotation

Typescript merge array types

Here we will see how we can merge to arrays of different types without using concat method.

For example, we will use the spread operator(…) instead of concat() to merge arrays of different types. In concatenate.ts file write the below code.

let num = [1,2,3,4];
let option=["exercise", "meditation","jogging","yoga"]

const both: (string | number)[] = [...option, ...num]; 
console.log(both);

To compile the code, run the below command and you can see the result in the console.

ts-node concatenate.ts

This is an example of Typescript merge array types.

Typescript concat arrays of strings

Here we will see how we can concat arrays of string in typescript using concat method.

For example, we have two array str1 and str2, and we will concatenate this two array using typescript concat(). In the concatenate.ts file, write the below code:

let str1=["exercise", "meditation"];
let str2=["jogging","yoga"]
let output= str1.concat(str2);
console.log(output);

To compile the code, run the below command and you can see the result in the console.

ts-node app.ts

This is an example of Typescript concat arrays of strings.

Read Typescript array

Typescript concat arrays of objects

Here we will see how we can concat array of objects using concat method in typescript

For example, we have two arrays of objects i.e. user1 and user 2, and we will concatenate these two arrays of objects using typescript concat(). In the concatenate.ts file write the below code:

var users1 = [

    { "id": 0, "name": "Available" },

    { "id": 1, "name": "Ready" },

    { "id": 2, "name": "Started" }

  ];



var users2 = [

    { "id": 3, "name": "James" },

    { "id": 4, "name": "John" },

    { "id": 5, "name": "Adam" }

  ];  

var allUsers = users1.concat(users2)

console.log(allUsers)

To compile the code, run the below command and you can see the result in the console.

ts-node concatenate.ts

This is an example of Typescript concat arrays of objects.

Typescript merge array of objects by key

Here we will see how we can merge two array of objects by key without using concat method in typescript.

For example, we have two arrays of objects, we will merge these two arrays by id using the map method in typescript. In the concatenate.ts file write the below code.

const array1 =[

    {id:11,name:"sai"},

    {id:21,name: "King"}

  ];

const array2 = [

      {id:11,age:23},

      {id:21,age:24}

];

function mergeArrayObjects(array1: any ,array2: any ){

    return array1.map((item: any,i: any)=>{

       if(item.id === array2[i].id){

           //merging two objects

         return Object.assign({},item,array2[i])

       }

    })

  }

  console.log(mergeArrayObjects(array1,array2));

To compile the code run the below command and you can see the result in the console.

ts-node app.ts

This is an example of Typescript merge array of objects by key.

Read Typescript filter array

Typescript array concat undefined

Here we will see how we can concat two array without undefined elements in typescript.

For example, we will use map method to replace the element a from array 1 with be element from array 2, by ignoring the undefined element index.

In the concatenate.ts file write the below code:

const array1 = ['link1','link2','link3','link4','link5']
const array2 = ['link11','link22',undefined,'link44',undefined]

const output = array2.map((e,i)=>e??array1[i]);
console.log(output);

To compile the code run the below command and you can see the result in the console.

ts-node app.ts

This is an example of Typescript array concat undefined.

Typescript merges two arrays without duplicates

Here we will see how we can merge two arrays without duplicates using the concat and set method.

For example, we will see how we can merge two arrays without duplicates using the concat method and set method in typescript. In the concatenate.ts file, write the below code:

let str1=["exercise", "meditation","yoga"];
let str2=["jogging","yoga","exercise"];


var d = str1.concat(str2);
var set = new Set(d);

d = Array.from(set);

console.log(d);

To compile the above code run the below command and see the result in the console.

ts-node app.ts

This is an example of Typescript merges two arrays without duplicates

Read Typescript array find

Typescript array concat distinct

Here we will see how we can concat distinct items from arrays using the concat method in typescript.

For example, if we have three arrays inside an array we will concat these three arrays using the concat method in typescript.

In the concatenate.ts file write the below code.

const input = [
    [1, 2, 3],
    [101, 2, 1, 10],
    [2, 1,5,9]
  ];
  const mergeDedupe = (arr:any) => {
    return [...new Set([].concat(...arr))];
  }
  
  console.log('output', mergeDedupe(input));

To compile the code and run the below command, you can see the result in the console.

ts-node concatenate.ts

This is an example of Typescript array concat distinct.

Typescript array concat null

Here we will see how we can concat null to an array using concat method in typescript.

For example, we have an array and we will concat null value to the array using concat method in typescript. In the concatenate.ts file, write the below code.

const arr1 :any= [1,2];
const arr2 = null;
console.log(arr1.concat(arr2));

To compile the code and run the below command and you can see the result in the console.

ts-node concatenate.ts

This is an example of typescript array concat null.

Conclusion

In this typescript tutorial, we saw different examples of how we can merge two arrays using concat method as well as without concat method. Here are the examples we covered:

• Typescript array concatenation
• Typescript array concat vs push
• Typescript array concat vs spread
• Typescript concat arrays of different types
• Typescript merge array types
• Typescript concat arrays of strings
• typescript concat arrays of objects
• typescript merge array of objects by key
• typescript array concat undefine
• typescript merge two arrays without duplicates
• typescript array concat distinct
• typescript array concat null

You may like the following typescript tutorials:

• Typescript sort array
• How to reverse an array in Typescript