Using '(e)' in functions?

Im learning react, and I see this a lot (even though im sure this also exists within Vanilla Javascript)

const submitTodoHandler = (e) => {

e.preventDefault();

setTodos([…todos,{ text: inputText, completed: false, id: Math.random() * 1000 }]);

setInputText("");

};

What is the (e) used for? Im having trouble understanding why the function needs the ‘e’ and why it won’t work in the same way without it. I understand that ‘e’ is short for ‘event’. But im not understanding why we can’t just have

const submitTodoHandler = () => {

preventDefault();

setTodos([…todos,{ text: inputText, completed: false, id: Math.random() * 1000 }]);

setInputText("");

};

instead :thinking:

Im also a little fuzzy on a few concepts of arguments and arrow functions, but im trying my best to get a better understanding of these concepts.

Can you help me understand these better?

I understand that, for example

const add = (a,b) => {

console.log(a+b);

};

The function arguments here are used to “define” the variables inside the function.

But sometimes arguments can get really abstract like in the case of (e) :face_with_monocle:

an event handler takes an event object as an argument, the preventDefault method exists as a method on the event object so the object needs to be passed to the handler as a parameter, the event object also contains other properties such as event.target.value which contains the value of an input,

Basically, when an event is triggered you’re passing an event object to an event handler, and the event object contains properties and methods you can use to perform certain tasks, preventDefault exists on the event object so if you don’t pass the event object you can’t access preventDefault

1 Like

React is actually abstracting away a lot of the dom manipulation that you would do manually with a library like jquery so I can understand how things can get confusing, it muddies the waters

1 Like

:fearful:

woah that’s a lot.
So is ‘e’ is an event object? But its not a distinct keyword correct?

So basically were using ‘e’ to create an event object to hook the .preventDefault onto? But it can basically be named anything, but were just using ‘e’ as an abbreviation of a miscellaneous “event” ? :thinking:

so basically because were not using something like

.addEventListener

we’re abstracting it away by creating an event listener variable of sorts using ‘e’?

Yes it can be named anything, e is usually used as a shorthand but you can use ‘event’ or whatever you want, you get the same object,

The preventDefault method exists on that event object

1 Like

Yes, e is just a variable name. Actually eventListeners be default accept the event object as an argument. The e present in argument actually gets assigned to the event object when called, similar to how a and b get assigned to numbers passed in the add function. When you do not have the argument, it cannot be resolved to the function with an argument (without default argument, ofcourse :slight_smile: ). Hence, the event listener without any parameters does not work in this case because it cannot be resolved to the event listener’s call.
In simple terms, if you have the 2 parameter add function, but call add(5), with single argument. You can clearly see that it does not resolve this call to the function with 2 arguments. The eventListener calls the function with argument as event object, but it cannot be resolved to the function with no argument.
Hope this helps… :slight_smile:

1 Like

I guess what’s really been a point of contention for me is that Ive been accustomed to using arguments as direct variables and not events like in the case of

const add = (a,b) => {

console.log(a+b);

};

Ive understood a and b arguments to be used as direct substitutions for the a and b variables inside the function.

So its kind of hard for me to wrap my head around now using a parameter as an object like in the case of ‘e’. :thinking:

https://www.amazon.co.uk/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647/ref=sr_1_1?dchild=1&keywords=javascript+and+jquery&qid=1624996256&sr=8-1 this book helped me understand vanilla javascript and dom manipulation concepts a lot more, such as events, some of the best explanations I’ve found are in here and it’s a good visual guide also

1 Like

Ahh that makes a lot of sense. So you need a hook for the event listener if you’re using a function with event listener inside. So you need to pass in an argument.

REALLY!

I have the first edition for HTML and CSS and I LOVED it. REALLY helped me out. It was my first ever code book. The way they broke down concepts was brilliant! And im a visual learner, so the aesthetics of the book really helped me.

I was going to get this book but upon looking at the reviews, I opted for Head First Javascript (which is good but not as straightforward and takes TONS of detours).

People are saying that the book is outdated and may confuse you if you’er trying to learn modern Javascript. Do you feel that that may be an issue?

I love the HTML and CSS version of the book and was trying to wait until maybe they came out with a more updated version of the JavaScript edition. But, I may pick it up since you’ve recommended it. Thanks :+1:

It is not really any different to the DOM APIs. React actually has its own versions of the events (click, scroll, submit, etc) but that’s an implementation detail, they work in exactly the same way, use the same API, they look exactly the same (albeit it is encapsulated in JSX in the React version).

// In the HTML:
// <button id="MyButton">Click me</button>


const MyButton = document.getElementById("MyButton");

MyButton.addEventListener("click", (e) => {
  console.log("Here is the event object generated by a click: ");
  console.log(e);
}
<MyButton onClick={(e) => {
  console.log("Here is the event object generated by a click: ");
  console.log(e);
}}>Click Me</MyButton>

When an event that you are listening to is triggered in a web page, the browser generates an object with some useful information about the event. The callback function for addEventListener has this object as its first argument.

1 Like

Honestly this JS book helped me in my first job a hell of a lot, a lot of the projects I work on are quite small so something like jquery is far easier to implement and use than react would be for the amount of js i need to write (e.g. a few hundred lines per project),

It’s old-school web dev but not outdated, you can still use the code used in the book as jquery has a fairly stable api,

Understanding how the DOM works is really useful, and jquery still comes in handy in the real world

1 Like

I see. Its really starting to make sense to me now.

:sweat_smile: I haven’t really used or began to study API’s yet, so I only have a very vague idea of what you mean by this part but I think Im understanding you correctly.

Got it. Yeah the Head First book is good but reads more like a workbook, which is fine but sometimes daunting and excessive when you’re trying to understand complicated concepts.

So I may go ahead and pick it up. I wouldn’t mind learning some Jquery :sweat_smile:

I’d highly recommend that whenever you come across a variable you don’t understand, you console.log it.

1 Like

Yeah I did, but I still didn’t quite get it. But now its all making more sense to me.

jquery is great it’s like going back in time to when front end development made sense lol

1 Like

Yes, you are right on point. I have gone thru the book it is quite helpful.

1 Like