How can I conditionally add an object to an array in TypeScript?

In TypeScript, you can conditionally add an object to an array using several approaches. Here are the most common methods:

1. Using an `if` statement:

- This is the most straightforward approach. You check a condition, and if it's true, you push the object into the array.

- Example:

let myArray: { id: number, name: string }[] = [];
const condition = true; // Or any condition
const newObject = { id: 1, name: "Example" };

if (condition) {
  myArray.push(newObject);
}

console.log(myArray); // Output: [{ id: 1, name: "Example" }] if condition is true

2. Using the Conditional (Ternary) Operator:

- This method is more concise for simple conditions. It uses the ternary operator to decide whether to add the object.

- Example:

let myArray: { id: number, name: string }[] = [];
const condition = false; // Or any condition
const newObject = { id: 2, name: "Another Example" };

condition ? myArray.push(newObject) : null;

console.log(myArray); // Output: [] if condition is false

3. Using the Spread Operator with a Conditional:

- This approach creates a new array with the object added conditionally. It's useful when you want to avoid modifying the original array.

- Example:

let myArray: { id: number, name: string }[] = [{ id: 3, name: "Initial Object" }];
const condition = true;
const newObject = { id: 4, name: "Conditional Object" };

myArray = condition ? [...myArray, newObject] : myArray;

console.log(myArray); // Output: [{ id: 3, name: "Initial Object" }, { id: 4, name: "Conditional Object" }] if condition is true

4. Using a Function:

- Encapsulating the conditional logic in a function can make your code more readable and reusable.

- Example:

function conditionallyAddObject(arr: { id: number, name: string }[], obj: { id: number, name: string }, condition: boolean): { id: number, name: string }[] {
  if (condition) {
    arr.push(obj);
  }
  return arr;
}

let myArray: { id: number, name: string }[] = [];
const newObject = { id: 5, name: "Function Object" };
const condition = true;

myArray = conditionallyAddObject(myArray, newObject, condition);

console.log(myArray); // Output: [{ id: 5, name: "Function Object" }] if condition is true

Choose the method that best suits your needs based on the complexity of your condition and your preference for code readability. The `if` statement is often the most clear for simple cases, while the spread operator is useful for immutability.

Learn more about this