Why the object approach with JavaScript methods is the best for me

What is an object in JavaScript ?

Like the mdn web docs says :

"The Object type represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax."

So an object, is simply a structure with many properties have data assigned to them. Here is an exemple of an object :

const simplePerson = {
  id: 1,
  name: 'Jean',
  age: 24,
};

You can store everything you want ! You can store too a function for example :

const person = {
  id: 1,
  name: 'Jean',
  age: 24,
  print: function() {
    return `Id : ${this.id} -
            Name : ${this.name} -
            Age ${this.age}`;
  },
};

And you can store an object into a property too !

How use this ?

When you have an object, you can access all property inside of them.

For example, with the object person build before we gonna access the value of the property name.

Like you can see in this pictures, is simple to access properties of an object an use it.

Why I would use object for my function parameters ?

Because it's very useful. Imagine, you have a function with 10 parameters. When you call your function you need to give the value in order of each argument.

function foo(id, name, age) {
  // Some code here...
}

// When you call you're function
foo(1, 'Jean', 24);

If the order of each parameters changes in you're function declaration or you decided to add or remove some parameters, you need to change ALL function call to not have bugs !

It's not maintenable...

So i personally recommended to use object parameter instead of a list of parameters. And you have many ways to do that.

First way

You can for example use only one parameters for your function declaration. This object gonna have specific properties needed when you're gonne call the function.

function foo(person) {
  // Some code here...
  // person.id ...
}

// Build the object directly with call
foo({
  id: 1, 
  name: 'Jean', 
  age: 24
});

// Or build it before calling
let person = {
  id: 1, 
  name: 'Jean', 
  age: 24
}
foo(person)

Here if we want, we can easily change the order of the property in the object. They don't change create a bug in you're function.

Second way

The second way is to use the call method. When you use call in your function you can use the this statement.

Here is an exemple.

function calcRectArea() {
  return this.width * this.height;
}

console.log(calcRectArea.call({width: 5, height: 6}));
// Will show 30

Third way

The third and the last way to make this is to simply define an object parameters an declare your properties into this object parameters.

To understand what i say, i show you an example here :

function calcRectArea({height, width}) {
  return width * height;
}

console.log(calcRectArea({width: 5, height: 6}));
// Will show 30 too

Here for me the declaration is simpler than the 2 previous ones, because you can know what properties names the object needs and it's not necessary to read the function.

Conclusion

For me, the object approach for the declaration of a function is really useful, because you don't need to have a list of each parameters you need for one function and you can define named arguments when you call you're function like Python, for example !

Of course, this approach is not useful for a function with one parameter for example. But with this approach you can easily maintain your code and make updates on it.

But wait... for all parameters declaration, we don't know the type of the function parameters and how we can know this ?

I'll try to explain this in an other section talk about JSDoc 😜

Tell me if you have any suggestions, or remarks and of course if this article was interesting. 😜