why and when we use object destructuring in javascript?

Question

I've seen a lot of code like this:

navigator.geolocation.getCurrentPosition(
       ({coords}) => {
         const {latitude, longitude} = coords
         this.setState({
           position: {
             latitude,
             longitude,
           },
           region: {
             latitude,
             longitude,
             latitudeDelta: 0.005,
             longitudeDelta: 0.001,
           }
         })
       },
       (error) => alert('Error: Are location services on?'),
       {enableHighAccuracy: true}
     );

My question is why and when we use object destructuring in parameter.

Why coords using object destructuring while error not using it?

because ({coords}) destructures, (error) does not ... use {} to destructure the incoming argument, don't use {} to get the whole argument - perhaps I've misunderstood your question, you seem to know what {} does, you want to know why you'd do it? because you're only interested in the coords property of the argument and nothing else in the object that is passed in the argument — Jaromanda X
– Jaromanda X, Commented Jul 24, 2018 at 23:14

leogoesger · Accepted Answer · 2018-07-24 23:32:29Z

3

This is all about objects in JS. I suggest you read more on objects.

But here is a simple example.

const car = {door: "blue", tires: 4}.

Of course, you can use it like car.door to get blue, or car.tires to get 4. But you can see you are writing the same code car. everywhere. It would be better just to do the following:

const {door, tires} = car

Then everywhere else, you can simply do door and tires. It is all about personal preference. I use it because it is simple and easy to see, and less duplicate code. No good or bad.

As far as your why error does not need to destructur is because we are simply checking if error exists. This is the same as what you wrote:

(error) => alert('something')

and

(Boolean(error)) => alert('something').

Here you do not even care what is inside of error, all you want to know if there is an error or not. That's why you do not need to destructure.

If you want to get some item inside the error, let's say code is one of the keys of error. Then you can do

({code}) => alert(code)

answered Jul 24, 2018 at 23:32

leogoesger

3,8507 gold badges40 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wanna Know All Over a year ago

It seems usable (makes code shorter) in the 2-field example above. But I often see people use it with just even one field. E.g. const { door } = car. Why doing this? What's wrong with const door = car.door? Or with just using car.door in the code? (in many cases writing car.door is actually better because often there's some house.door and 'namespacing' door with its owner object makes code more readable in many cases. Can you please clarify?

leogoesger Over a year ago

@WannaKnowAll you are correct, this is totally personal preference. If you have only one field you need, yes then there is no point, but often time you need 3 or 4 together. Then it is a lot more concise to use destruction.

Collectives™ on Stack Overflow

why and when we use object destructuring in javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related