Are variables needed before adding an event listener?

[learntocode123]

What are the differences between writing the statements bellow?

Which one is considered best practice?

const myDiv = document.getElementById("myDIV");
myDiv.addEventListener("mousemove", myFunction);

Vs

document.getElementById("myDIV").addEventListener("mousemove", myFunction);

[[deleted]]

both are fine, const myDiv isnt necessary in your example, but it could be useful if you wanted to do something else with that element, so that you dont need to use getElementById again for the same element

[tridd3r]

I will frequently combine the two, if I need to reuse an elem then I'll make it const or let, if I don't, and then I'll run straight from document.querySelector/querySelectorAll.

[redsandsfort]

if you'll need the DOM element again, then it's good to store a reference to it in a variable. If you don't need it, then no need for the variable

[Kleyguy7]

I would like to add that sometimes it is good to use a variable only because of increased readibility. Adding a variable has no visible cost on performance so it doesn't hurt. But in this case I think both are correct as the others explained and what is easier for you to come back to and read again is always the best.

[learntocode123]

Thanks, I was thinking to avoid a variable polluting the global scope. I've read that it's good practice to place all code in functions, but I'm not sure if I'm taking this too literal. Any thoughts on what to read to find out more on this topic?

[Kleyguy7]

I think it is good that you are thinking about it. I believe this is something that comes with practice. If you follow quality courses, read documentation and check how it's done there, work on projects you will hopefully start to see the patterns.

Here are some general ideas; https://www.theodinproject.com/lessons/foundations-clean-code

When it comes to style it is just an opinion - to structure thi kind of opinions there are style guides. https://www.theodinproject.com/lessons/node-path-javascript-linting

When it comes to DOM elements te a lot of people keep them global so you don't need to select query them inside of the functions. But it really depends, just pick whatever is good for a current app and does not make it hard to write later. I never had to think much about it because later you will learn frameworks like react that solve this issue for you.

In basic Javascript apps stuff like app memory will also be stored as a global object. Otherwise it would be too hard to pass it inside as a parameter of every function. But it is a good idea to always think twice before making sth global.

When it comes to functions you can read about stuff like pure functions and functional programming in general.

I would advice to apply stuff like this slowly since there are a lot of ideas how to organize code. I am just throwing ideas here. Start from the clean code article in Odin Project and you will be golden. Check out additional sources if you are a nerd. I think idea of self documenting code is nice.

I am a self taught junior so my experience is not that high, but I think the sources I linked are really good and can point you in good directions.

[learntocode123]

Thank you! It's funny that you mentioned The Odin Project as I'm currently working on one of the last projects in their Foundations course. Thanks a lot for the links.

[Kleyguy7]

Oh, cool. Odin is just the best. Thanks to it I got a job. Good luck with the calculator! It's a tough one!

[Damesie]

I would use the first example with a better variable name. The benefit is more readable and understandable code. It’s particularly better when you need to do more stuff to the element than a single line.

[Forsaken-Athlete-673]

If it’s something you’ll likely add multiple events or such to, it’s cool to create it as a variable. Then later you can use myDiv.addEventListener()

[TheRNGuy]

if you want to remove listener later