Add an Object to an Array in TypeScript

TypeScript allows adding an object to an array that is a common operation when working with collections of data.

Below are the approaches to add an object to an array in TypeScript:

Using the push method

In this approach, we are using the push method which is used to add one or more elements to the end of an array.

Syntax:

array.push(element1, element2, ...);

Example: This example uses the push method to add an Object to an Array in typescript.

JavaScript

let products: { name: string, price: number, category: string }[] =
    [
        {
            name: 'Laptop',
            price: 1000,
            category: 'Electronics'
        },
        {
            name: 'Headphones',
            price: 100,
            category: 'Electronics'
        }
    ];

// Add a new product to the list
let newProduct = {
    name: 'Smartphone',
    price: 800,
    category: 'Electronics'
};
products
    .push(newProduct);

// Log the updated list of products
console.log(products);

Output:

[
  { name: 'Laptop', price: 1000, category: 'Electronics' },
  { name: 'Headphones', price: 100, category: 'Electronics' },
  { name: 'Smartphone', price: 800, category: 'Electronics' }
]

Using the Spread Operator (...)

In this approach we are using the spread operator (...) to create a new array with the existing elements of the array and the new object.

Syntax:

let newArray = [...existingArray, newElement];

Example: This example uses Spread Operator to add Object to an Array in typescript.

JavaScript

let products: { name: string, price: number, category: string }[] =
    [
        {
            name: 'Laptop',
            price: 1000,
            category: 'Electronics'
        },
        {
            name: 'Headphones',
            price: 100,
            category: 'Electronics'
        }
    ];

let newProduct = {
    name: 'Smartphone',
    price: 800,
    category: 'Electronics'
};
let newProducts = [...products, newProduct];

console.log(newProducts);

Output:

[
  { name: 'Speaker', price: 1000, category: 'Electronics' },
  { name: 'Bluetooth', price: 800, category: 'Electronics' },
  { name: 'Smartwatch', price: 1500, category: 'Electronics' }
]

Using array concatenation (concat)

In this approach we are using the concat method which is used to merge two or more arrays. It does not mutate the original arrays but returns a new array containing the elements of the original arrays.

Syntax:

let newArray = array.concat(newObj);

Example: In this example we initializes an array of products, appends a new product object to it using concat(), and logs the updated array with the new product included.

JavaScript

let products: { name: string, price: number, category: string }[] =
    [
        {
            name: 'Laptop',
            price: 1000,
            category: 'Electronics'
        },
        {
            name: 'Headphones',
            price: 100,
            category: 'Electronics'
        }
    ];

let newProduct = {
    name: 'Smartphone',
    price: 800,
    category: 'Electronics'
};

let newProducts = products.concat(newProduct);
console.log(newProducts);

Output:

[{
  "name": "Laptop",
  "price": 1000,
  "category": "Electronics"
}, {
  "name": "Headphones",
  "price": 100,
  "category": "Electronics"
}, {
  "name": "Smartphone",
  "price": 800,
  "category": "Electronics"
}]

Using Array Unshift

In this approach we are using the unshift method in TypeScript which is used to add a new object to the beginning of an array.

Example: This example uses Unshift method to add Object to an Array in typescript.

JavaScript

let products: { name: string, price: number, category: string }[] =
    [
        {
            name: 'Laptop',
            price: 1000,
            category: 'Electronics'
        },
        {
            name: 'Headphones',
            price: 100,
            category: 'Electronics'
        }
    ];

let newProduct = {
    name: 'Smartphone',
    price: 800,
    category: 'Electronics'
};

products.unshift(newProduct);
console.log(products);

Output:

[{
  "name": "Smartphone",
  "price": 800,
  "category": "Electronics"
}, {
  "name": "Laptop",
  "price": 1000,
  "category": "Electronics"
}, {
  "name": "Headphones",
  "price": 100,
  "category": "Electronics"
}] 

Using Index Assignment:

Using index assignment, you can directly assign an object to a specific index in an array in TypeScript. It adds the object to the array at the specified index, extending the array if necessary.

Example: In this example we initializes an array of products with objects containing name, price, and category. It then adds a new product using index assignment and logs the updated list.

JavaScript

let products: { name: string, price: number, category: string }[] =
    [
        {
            name: 'Laptop',
            price: 1000,
            category: 'Electronics'
        },
        {
            name: 'Headphones',
            price: 100,
            category: 'Electronics'
        }
    ];

// Add a new product to the list
let newProduct = {
    name: 'Smartphone',
    price: 800,
    category: 'Electronics'
};
products[products.length] = newProduct;

// Log the updated list of products
console.log(products);

Output:

,[
  { name: 'Laptop', price: 1000, category: 'Electronics' },
  { name: 'Headphones', price: 100, category: 'Electronics' },
  { name: 'Smartphone', price: 800, category: 'Electronics' }
]