JS destructing doubt

I understand destructuring, or I think I do, here’s a very simple example:

const car = {
  make: "Toyota",
  year: 2012,
  color: "red"
}

Instead of storing each property in 3 different variables, we can use destructuring to store the properties that we want using only 1 variable: const { make, year, color } = car;

That being said, I do have a doubt regarding this topic. Here’s the example that made me wonder:

Method without using destructuing:

handleChange = e => {
    const account = { ...this.state.account };
    account[e.currentTarget.name] = e.currentTarget.value;
    this.setState({ account });
  };

Same method using destructing:

handleChange = ({ currentTarget: input }) => {
    const account = { ...this.state.account };
    account[input.name] = input.value;
    this.setState({ account });
  };

I guess my confusion is, why isn’t he using the event property (as the original method) when destructing it and assigning it to the new variable input? I wouldn’t have this doubt if it was something like this ({ e.currentTarget: input })

Why is this?

Ok let me see if I get this right. event is an object, and in this case currentTarget is a property of that object, correct? So basically he is using destructuring to get the currentTarget property of the event object.

If my assumptions are correct, this takes me to another question. Does JavaScript automatically assume that when we are destructuring the currentTarget property we are referring to the event object?

So when I pass this function (or method if you prefer) to an event such as onClick or onChange then JS will pass the event object to the callback function.

Thanks a lot btw, I think I get it now.

1 Like

In another related note, I tried to look for the differences between event.current and event.currentTarget, this is React BTW. I’ve never come across these terms before using just vanilla JS. I know that if I want to target a specific element of the DOM using vanilla JS we would use event.target

I’m wondering if there’s any significant difference between those terms or it’s all the same.

I made a test with a simple console.log(). Turned out that e.current returned undefined while currentTarget returns the actual element that triggered the event.