JS destructing doubt

JS destructing doubt
0

#1

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?


#2

The e represents the event object coming back. It is the main object that will be destructured, so you do not reference it. It is the same as the example below:

const obj { 
  prop1: 1,
  prop2: 'two'
}

If I want to destructure obj, I don’t reference obj on the left side:

{obj: {prop1, prop2}} = obj; // wrong

{prop1, prop2} = obj; // right

#3

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?


#4

Yes, you have it correct.

The event object is always pass to events such as onclick events, so it is not an assumption by JavaScript. It is something that is actually happening.


#5

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.


#6

See thedocumentation related to the eventListener callback function.

FYI - Today, I came across an article on passing an object instead of a callback function and learned something new myself.


#7

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.


#8

event.target and event.currentTarget are slightly different properties. I am not aware of an event.current property. See all the event object properties and methods here.

Also, read about React’s SyntheticEvent object attributes. There is no mention of a current attribute here either.