Skip to main content

TypeScript Spread Operator

The TypeScript spread operator (...) is a handy feature that can make your code simpler and easier to read. By using it, you can take elements from arrays or properties from objects and spread them into a new array or object. This article will cover advanced ways to use the spread operator, common issues, and solutions.

Using the TypeScript Spread Operator with Arrays​

The spread operator lets you expand an array into a new one. Here's how it works:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];

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

This syntax is more concise than methods like concat() and clearly shows your intention to combine arrays.

Merging Arrays​

Merging arrays is straightforward with the spread operator. It helps you join multiple arrays without using loops or complex methods.

const firstHalf = [1, 2, 3];
const secondHalf = [4, 5, 6];
const fullArray = [...firstHalf, ...secondHalf];

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

This approach works well with typescript array methods when you need to combine data from multiple sources.

Cloning Arrays​

You can easily clone arrays with the spread operator, creating a shallow copy that is separate from the original array.

const original = ['a', 'b', 'c'];
const clone = [...original];

console.log(clone); // ['a', 'b', 'c']

When working with complex objects in a Convex database, shallow copying is helpful for creating modified versions of your data before updating it. Check out argument validation without repetition for best practices with objects in Convex.

Using Spread for Array Destructuring​

When destructuring arrays, the spread operator can gather remaining elements into a new array.

const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest); // [20, 30, 40]

This pattern is useful when processing data from Convex queries where you might need to separate the first item from a collection while preserving the rest. For more advanced data handling techniques, see complex filters in Convex.

Merging Objects with the Spread Operator​

The spread operator is also useful for merging objects, allowing you to combine properties from different sources.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 3, c: 4 }

Note that properties from later objects (like obj2) override identical properties from earlier objects (like obj1's b property).

Updating Properties in Objects​

The spread operator excels at creating new objects with updated properties:

const user = { id: 1, name: "Alice", role: "user" };
const updatedUser = { ...user, role: "admin" };

console.log(updatedUser); // { id: 1, name: "Alice", role: "admin" }

This immutable update pattern is common when working with typescript object type definitions in typed applications.

Cloning Objects​

You can clone objects with the spread operator to create a shallow copy that functions independently from the original.

const original = { x: 1, y: 2 };
const clone = { ...original };

console.log(clone); // { x: 1, y: 2 }

When working with Convex data models, this technique helps create modified versions of documents before submitting updates. See types cookbook for more on handling TypeScript types with Convex.

Combining Multiple Objects with the Spread Operator​

It's easy to combine several objects using the spread operator.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { c: 5, d: 6 };
const combinedObj = { ...obj1, ...obj2, ...obj3 };
console.log(combinedObj); // { a: 1, b: 3, c: 5, d: 6 }

Note the property override behavior: when objects have the same property names, the value from the rightmost object wins. This pattern works well when you need to merge configuration objects in TypeScript best practices.

Destructuring Assignments using the Spread Operator​

The spread operator works beautifully in destructuring assignments for both arrays and objects:

Array Destructuring​

const [first, second, ...remaining] = [1, 2, 3, 4, 5];

console.log(first); // 1
console.log(second); // 2
console.log(remaining); // [3, 4, 5]

Object Destructuring​

const { name, ...otherProps } = { 
  name: "Alice", 
  age: 28, 
  role: "Developer" 
};

console.log(name); // "Alice"
console.log(otherProps); // { age: 28, role: "Developer" }

This pattern is valuable when working with Partial<T> types to extract specific properties while preserving others.

When building TypeScript applications, destructuring can help manage complex document structures. Learn more in functional relationships helpers.

Handling Nested Objects with the Spread Operator​

Be cautious when dealing with nested objects, as the spread operator only creates a shallow copy.

const originalObj = { a: 1, b: { c: 2 } };
const clonedObj = { ...originalObj };

clonedObj.b.c = 3;

console.log(originalObj); // { a: 1, b: { c: 3 } }
console.log(clonedObj); // { a: 1, b: { c: 3 } }

Notice that changing the nested property in clonedObj also affected originalObj. This happens because the spread operator only creates a shallow copy, so both objects reference the same nested object.

To create a deep copy, you'll need to manually spread nested objects:

const originalObj = { a: 1, b: { c: 2 } };
const deepClonedObj = { 
  ...originalObj, 
  b: { ...originalObj.b } 
};

deepClonedObj.b.c = 3;

console.log(originalObj); // { a: 1, b: { c: 2 } }
console.log(deepClonedObj); // { a: 1, b: { c: 3 } }

This deep cloning approach is essential when working with complex utility types in applications where data immutability matters.

Using the Spread Operator in Function Arguments​

The spread operator can expand arrays into function arguments:

function sum(a: number, b: number, c: number): number {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers);

console.log(result); // 6

This is especially useful when working with variable-length argument lists:

function logAll(...args: any[]): void {
  args.forEach(arg => console.log(arg));
}

logAll(1, "hello", true); // Logs: 1, "hello", true

When building Convex functions, this pattern can help create flexible APIs. Check out custom functions to learn how to build adaptable function interfaces in Convex.

Combining Multiple Arrays​

Need to merge several arrays? The spread operator makes it clean and readable:

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];

const combined = [...arr1, ...arr2, ...arr3];
console.log(combined); // [1, 2, 3, 4, 5, 6]

You can even mix direct values and spread arrays:

const numbers = [2, 3, 4];
const withMoreNumbers = [1, ...numbers, 5];

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

This pattern works well with map operations when processing collections of data.

Final Thoughts on the TypeScript Spread Operator​

The TypeScript spread operator simplifies working with arrays and objects, making your code more readable and maintainable. By understanding how it works with TypeScript's type system, you can leverage it to write clean, type-safe code.

Remember that the spread operator creates shallow copies - when working with nested data structures, you may need to spread at multiple levels to maintain true immutability.

For more TypeScript tips and tricks specific to Convex, check out TypeScript best practices.