Why the object approach with JavaScript methods is the best for me
Tags: javascript, programming, tutorial, productivity
Published: 2022-07-23 21:12:00

## What is an object in JavaScript ?

Like the [mdn web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) says :

"The Object type represents one of [JavaScript's data types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures). It is used to store various keyed collections and more complex entities. Objects can be created using the [Object()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/Object) constructor or the [object initializer / literal syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer)."

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

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

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

```js
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`.

![Result of propertie name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8y8kgsy22ac32szqx13.png)

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**.

```js
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.

```js
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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) method. When you use `call` in your function you can use the `this` statement.

Here is an exemple.

```js
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 :

```js
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. 😜

<a href="https://www.buymeacoffee.com/tykok"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a sushi&emoji=🍣&slug=tykok&button_colour=5F7FFF&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00" /></a>
</div>