A Comprehensive Guide to Concatenating Arrays in TypeScript

Jasser Mark Arioste

Jasser Mark Arioste

A Comprehensive Guide to Concatenating Arrays in TypeScript

Hello! In this tutorial, you'll learn how to concatenate arrays in Typescript using the latest Typescript version.

Introduction #

When working with arrays in TypeScript, a task you'll frequently encounter is the need to combine or concatenate arrays. Whether you're building a web application, a data manipulation tool, or any other TypeScript project, the ability to merge arrays efficiently is a fundamental skill to have in your toolkit.

In this comprehensive guide, we'll explore various techniques and methods for concatenating arrays in TypeScript. You'll learn how to seamlessly merge arrays while maintaining code clarity and readability. Whether you're a TypeScript novice or an experienced developer looking to refine your array manipulation skills, this guide has something for you.

We'll explore built-in array methods like concat, leverage the power of TypeScript's type system to ensure type safety, and explore modern JavaScript features like the spread operator. By the end of this tutorial, you'll have a solid understanding of concatenating arrays in TypeScript, allowing you to streamline your code and confidently tackle a wide range of real-world programming challenges.

So, let's dive into the world of array concatenation in TypeScript and unleash the full potential of your array manipulation skills.

Method 1: Using the `concat` method #

TypeScript supports the concat method, which is available on arrays. This method does not modify the original arrays but returns a new concatenated array.

const array1: number[] = [1, 2, 3];
const array2: number[] = [4, 5, 6];

const newArray: number[] = array1.concat(array2);
console.log(newArray); // [1, 2, 3, 4, 5, 6]

Method 2: Using the spread operator #

You can use the spread operator (... )to concatenate arrays. This approach creates a new array containing elements from both source arrays.

const array1: number[] = [1, 2, 3];
const array2: number[] = [4, 5, 6];

const newArray: number[] = [...array1, ...array2];
console.log(newArray); // [1, 2, 3, 4, 5, 6]

This is one of the most commonly used methods, especially in front-end applications such as React.

Method 3: Using the `push` method #

If you want to modify the first array and add elements from the second array to it, you can use the push method. For example:

const array1: number[] = [1, 2, 3];
const array2: number[] = [4, 5, 6];

array1.push(...array2); //when passing an array to the push method, we still use the spread operator.
console.log(array1); // [1, 2, 3, 4, 5, 6]

Unlike the previous methods, this method modifies the original array. 

Method 4: Using `Array.from()` method #

Another approach is to use the Array.from method to create a new array from the concatenated values of the two arrays. For example:

const array1: number[] = [1, 2, 3];
const array2: number[] = [4, 5, 6];

const concatenatedArray: number[] = Array.from(array1).concat(array2);
console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]

In practice, I wouldn't use this method since it just creates another copy of the original array and uses the concat() method. But the concat() method already returns a new array so making a copy of the original array is a useless step.

Concatenating Arrays in React #

Here's an example of how you can use the technique of concatenating arrays when manipulating states in a React component. In this example, we'll create a simple to-do list application where you can add tasks to a list.

import React, { useState } from 'react';

function TodoApp() {
  // Initialize the state for the list of tasks
  const [tasks, setTasks] = useState([]);
  // Function to add a new task to the list
  const addTask = (newTask) => {
    // Concatenate the new task with the existing tasks array
    setTasks([...tasks, newTask]);
  // Function to handle form submission
  const handleSubmit = (e) => {
    const taskText =;
    if (taskText.trim() !== '') {
      // Add the task to the list
      // Clear the input field = '';
  return (
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" name="task" placeholder="Add a task" />
        <button type="submit">Add</button>
        {, index) => (
          <li key={index}>{task}</li>

export default TodoApp;


  1. We initialize the tasks state using useState as an empty array.
  2. The addTask function is defined to add a new task to the tasks array. It uses the spread operator ... to concatenate the new task with the existing array, ensuring that we create a new array and not mutate the state directly.
  3. In the handleSubmit function, we handle the form submission. When the user submits a task, we call the addTask function to add it to the tasks array, and then we clear the input field.
  4. The rendered JSX displays the list of tasks using map to iterate over the tasks array.

This example demonstrates how you can use array concatenation to manage and update the state of a list of tasks in a React application, ensuring that the state is updated immutably and efficiently.

Conclusion #

In TypeScript and React development, the ability to concatenate arrays efficiently is a crucial skill that can greatly enhance your code's readability, maintainability, and performance. Throughout this guide, we've explored various techniques for concatenating arrays in TypeScript, and we've seen how these techniques can be applied to real-world scenarios, such as manipulating states in a React application.

Resources #

Share this post!

Related Posts


This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle