If both of these work, what's the difference?

JavaScript
1

If function works without the ‘e’, does that mean an e (evt) isn’t necessary in the code?

addEventListener('click', function()

addEventListener('click', (e) =>

i.e., just because addEventListener is being used, that doesn’t automatically mean an evt is needed.

2

They’re not equivalent. The second example is using a fat arrow function, which has a couple of differences to a regular function.

You can read about the differences here:

If you’re not doing anything with the event object within the function (such as preventing the browser’s default action), don’t pass it in.

3 Likes
3

Code 1

<script>
  document.querySelector('.sent').addEventListener('click', function() {
    const player = document.querySelector('.player');
    const value = document.querySelector('.input');
    player.volume = 1.0;
    player.src = value.value;
  });
</script>

In this one there is no event further down in the code, so this isn’t needed then:
And it should just stay a function. How it’s written in Code 1.
(e) =>

Code 2:

<script>
  document.querySelector('.sent').addEventListener('click', (e) => {
    const player = document.querySelector('.player');
    const value = document.querySelector('.input');
    player.volume = 1.0;
    player.src = value.value;
  });
</script>
4

Nope. You’re misunderstanding the difference between arrow functions and regular functions. It’s all explained in the link below. I suggest you read the parts of that page that are relevant to your question.

3 Likes
5

If the code works without this (e) =>

And works with this:
addEventListener('click', function()

Wouldn’t the code not work if it needed this?
(e) =>

6

Mate, I’ve given you the answer in the posts above. I’m afraid I don’t have the time nor energy to go on a 200 post question and answer spree with you ignoring my answers and permanently changing the goalposts.

Read the link above then take some time to try and understand the concepts involved.

Good luck :slight_smile:

4 Likes
7

Since I don’t need the event, I can go with this one.
() =>

But it doesn’t hurt to keep it in there if I need it later on.

<script>
  document.querySelector('.sent').addEventListener('click', () => {
    const player = document.querySelector('.player');
    const value = document.querySelector('.input');
    player.volume = 1.0;
    player.src = value.value;
  });
</script>
8

Do you understand why, or are you just repeating what you were told elsewhere?

Unless you take time to understand the code you’re using, you’ll be forever dependent on other people.

2 Likes
9

There’s no event being used in this code at all:

That’s why it’s not necessary or needed.

If it was needed, the code wouldn’t work without it.

I know about events, and if they are needed, and they are not specified in the code, the code won’t work without it.

I’m just not used to using arrow notations instead of functions, but I know they are better to use.

    const player = document.querySelector('.player');
    const value = document.querySelector('.input');
    player.volume = 1.0;
    player.src = value.value;
  });
11

I don’t know if I would call the use of arrow functions “better”. They are what many call “syntactic sugar”. That is, they are an alternate that some may prefer for whatever reasons.

For an analogy consider the contraction of “should not”. Is “shouldn’t” better? Without understanding what it is one could make the observation that one form has a space and a second " o " and the other has an " ’ ". One might wonder if the second needs the " ’ " and whether or not “shouldnt” would work.

IMHO, if there is a chance that the contraction would be more difficult to read and interpret what it means, moreso if it might be used incorrectly, then there is no harm in using “should not”.

1 Like
12

one form has a space and a second " o "

What do you mean by that, that’s in the code?

A second o?

I always put double quotes, but sometimes everything isn’t always double quoted.

    const player = document.querySelector(".player");
    const value = document.querySelector(".input");
    player.volume = 1.0;
    player.src = value.value;
  });
13

You missed my use of the word “analogy”. My rough definition: “an off-topic example used to illustrate similarities as a way of providing insight into the original”.

1 Like
14

On here it shows function with no arrows.

.addEventListener("click", function(){

Using the arrow function is newer.

Almost every browser supports it. 87.51%

The major ones.

There’s a lot of information on the web that explain what the differences are.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.