Create a function in JavaScript that is able to accept a variable number of objects as arguments

Question

Create a function in JavaScript that is able to accept a variable number of objects as arguments

I have a good grasp of how to pass infinite parameters in a function in JavaScript.

But what about accepting any number of objects as parameters in a function?

This is my current implementation:

function merge<T>(objA: T, objB: T){
  return Object.assign(objA, objB);
}

With this, I can use the function like this:

console.log(`${mergeObject2.age}, ${mergeObject2.name}`);

But how do you declare a function when the number of objects is unknown..?

For example, like this:

const mergeObject2 = merge({name: 'Niels'}, {age: 39}, {hobby: 'all'});

Thank you.

If I were to call the function like this:

const mergeObject2 = merge({name: 'Niels'}, {age: 39});

console.log(`${mergeObject2.age}, ${mergeObject2.name}`);

The output would be:

39, Niels

But how would you handle it with more objects..?

javascript typescript

Answer 1

Answer №1

Essentially, in TypeScript, if you need to accept a varying number of parameters, all parameters must have the same type (which can be a union type). For example:

function myFunction(a: boolean, b: string, ...rest: Array<number | string>) {
    // ...
}

(You can also express Array<number | string> as (number | string)[].)

This function requires at least two fixed arguments (boolean and string) followed by any number of additional arguments that are either number or string. The additional parameters are grouped into an array with the same type (number | string in this case). You can use if statements to narrow down the type when dealing with a specific element from that array.

If you don't have any fixed parameters like a and b, you can directly start with the rest parameter.

If you intend to utilize Object.assign in your implementation, you will need to make the first one required (or explicitly specify Object.assign's first argument). Here's an example of implementing a merge function:

function merge<T extends object>(target: T, ...sources: T[]): T {
    return Object.assign(target, ...sources);
}
const mergedObject = merge({name: "Niels"}, {age: 39}); 
console.log(`${mergedObject.age}, ${mergedObject.name}`);

Playground link

This is essentially just a slightly more restricted version of Object.assign.

If you want to avoid modifying the initial object ({name: "Neils"}), consider adding an empty object at the beginning like so: {}.

Answer 2

Essentially, in TypeScript, if you need to accept a varying number of parameters, all parameters must have the same type (which can be a union type). For example:

function myFunction(a: boolean, b: string, ...rest: Array<number | string>) {
    // ...
}

(You can also express Array<number | string> as (number | string)[].)

This function requires at least two fixed arguments (boolean and string) followed by any number of additional arguments that are either number or string. The additional parameters are grouped into an array with the same type (number | string in this case). You can use if statements to narrow down the type when dealing with a specific element from that array.

If you don't have any fixed parameters like a and b, you can directly start with the rest parameter.

If you intend to utilize Object.assign in your implementation, you will need to make the first one required (or explicitly specify Object.assign's first argument). Here's an example of implementing a merge function:

function merge<T extends object>(target: T, ...sources: T[]): T {
    return Object.assign(target, ...sources);
}
const mergedObject = merge({name: "Niels"}, {age: 39}); 
console.log(`${mergedObject.age}, ${mergedObject.name}`);

Playground link

This is essentially just a slightly more restricted version of Object.assign.

If you want to avoid modifying the initial object ({name: "Neils"}), consider adding an empty object at the beginning like so: {}.

Answer 3

Answer №2

If you want to access all arguments passed to a function, you can utilize the arguments object in ES5. This object acts like an array and holds the values of all arguments passed into the function.

function calculateSum(){
  let sum = 0;
  for(let i=0;i<arguments.length;i++){
    sum += arguments[i];
  }
  console.log(sum);
}
calculateSum(1,2,3);

To combine multiple objects into one, you can use this approach:

function combineObjects(){
  let finalObj = {};
  for(let i=0;i<arguments.length;i++){
    finalObj = {...finalObj,...arguments[i]};
  }
  console.log(finalObj);
}
combineObjects({id:1},{name:"sam"},{age: 25});

Answer 4

If you want to access all arguments passed to a function, you can utilize the arguments object in ES5. This object acts like an array and holds the values of all arguments passed into the function.

function calculateSum(){
  let sum = 0;
  for(let i=0;i<arguments.length;i++){
    sum += arguments[i];
  }
  console.log(sum);
}
calculateSum(1,2,3);

To combine multiple objects into one, you can use this approach:

function combineObjects(){
  let finalObj = {};
  for(let i=0;i<arguments.length;i++){
    finalObj = {...finalObj,...arguments[i]};
  }
  console.log(finalObj);
}
combineObjects({id:1},{name:"sam"},{age: 25});

Create a function in JavaScript that is able to accept a variable number of objects as arguments

Answer №1

Answer №2

Similar questions

In MUI v5, the Autocomplete default value is not set

Ensure that the three.js script remains in a fixed position on a page that can be

dynamic jquery checkbox limit

"Exploring the depths of Webpack's module

Modifying various items depending on the variable's value

typescript error: referencing a variable before assigning a value to it in function [2454]

Dynamic property access using optional chaining in JavaScript

Organize an array of objects in JavaScript into a structure with nested children

Exploring the latest whatwg-fetch update with TypeScript version 2.5.3

Moving the legend around in vue-chartJS

How can I display an ngx spinner after a delay of 1 second?

The intricate scripting nestled within the jQuery function

The application ceases to function properly following the update of npm and node on MacOS

Disable link 2 when link 1 is clicked

Encountering an issue with Typescript Vue class-based components in Laravel Mix: issue arises when attempting to set property 'render' on an undefined object

When utilizing the JavaScript createElement() method to create elements on keydown, it will not be compatible with jQuery's draggable() method

Error: Attempting to assign a value to the property 'running' of an undefined variable

Storing deeply nested arrays of objects with Mongoose leads to MongoDB storing empty objects

What is the best way to enhance a state's capabilities in Machina.js?

Typescript - any of the types imported from a module