How do I write this long-hand?

JavaScript
1

This is the way the js is written in what I assume is a more short-hand manner, using the arrow. I know this is semantically best, but for learning purposes, I’d like to know how to write this in a more beginner-friendly, long-hand way.

right.addEventListener(‘mouseenter’, () => {
container.classList.add(‘hover-right’);
});

In my attempt to dumb that down into it’s beginner, step-by-step form, I went for this:

right.addEventListener(‘mouseenter’) {
return {
container.classList.add(‘hover-right’);
}
}

What I wrote is wrong, but I’m hoping that posting it can help someone understand my line of thinking and help correct it or any other missteps I may have taken in my logic on this post. Thanks in advance!

1 Like
2

addEventListener takes two parameters: the event to listen to as a string, and a function. The two parameters must be separated by a comma.

You can write a function in any of the following ways:

() => 0

() => {
  // some other statements
  return 0;
}

function() {
  // some other statements
  return 0;
}

Each of these is essentially the same for most purposes.

For event listeners, the return value (0 in these examples) isn’t usually important. If you use either version with curly braces ({}), you can omit the return keyword.

3 Likes
3

Your second code piece is a bit confusing, but the ways that I would approach teaching someone how to write an addEventListener is to not use an arrow function as beginners might be lost so I would look at just writing it as an anonymous function.

right.addEventListener(‘mouseenter’, function () {
    container.classList.add(‘hover-right’);
});

From there you would look at passing in a function name as the 2nd argument

function addHoverClass() {
    container.classList.add(‘hover-right’);
}

right.addEventListener(‘mouseenter’, addHoverClass);

I would suggest looking at MDN docs for more guidance as they give examples as well.

1 Like
4

@Freytag Make sure you are using straight double or single quotes in your code. I see curly single quotes surrounding mouseenter and hover-right which would cause an error.

5

Thanks far catching that must have been a copy paste issue from grabbing the original submitted code that wasn’t in a code block.

1 Like
6

Both responses are very helpful. Thank you!

7

Getting time to really sit and digest this, your first bit of code did exactly what I was aiming for. The 2nd argument I’m not sure about though. MY code worked by replacing this:

right.addEventListener(‘mouseenter’, () => {
container.classList.add(‘hover-right’);
});

with this:

right.addEventListener(‘mouseenter’, function () {
container.classList.add(‘hover-right’);
});

so why would I need this:

function addHoverClass() {
container.classList.add(‘hover-right’);
}

right.addEventListener(‘mouseenter’, addHoverClass);

8

That’s called a function declaration. It’s very similar to assigning the function to a variable:

// [2]
const addHoverClass = function() {
  container.classList.add('hover-right');
}

The main difference between [1] and [2] is that with [1], you can refer to the function with addHoverClass both before and after declaring it. With [2], you can only refer to it afterward.

In JavaScript, functions are “first-class citizens”, which means that you can pass them around them like any other variable. Here, you’re passing in addHoverClass as a callback to the addEventListener method. It’s just like passing any other variable to a function:

alert('Hello world');

// has exactly the same effect as:

const hi = 'Hello world';
alert(hi);
1 Like
9

I appreciate you explaining all of this big-time. Sorry, if I’m coming off as dense, but my code is running completely and perfectly with the following js:

const left = document.querySelector(’.left’);
const right = document.querySelector(’.right’);
const container = document.querySelector(’.container’);

left.addEventListener(‘mouseenter’, () => {
container.classList.add(‘hover-left’);
});

left.addEventListener(‘mouseleave’, () => {
container.classList.remove(‘hover-left’);
});

//the easier/more beginner way to write it. Gained from FCC Forums.

right.addEventListener(‘mouseenter’, function() {
container.classList.add(‘hover-right’);
});

right.addEventListener(‘mouseleave’, () => {
container.classList.remove(‘hover-right’);
});

To me, this doesn’t look like the function is being declared or called. Is it the interaction between it and the css classes that are allowing for it to show on the end-result web page? That is where I am confused at this point, as I seemingly did not need to insert that declaration for the js to run properly.

10

Correct. You’re not using function declarations there, you’re just passing in the literal functions (that applies to both the arrow versions and the ones with the function keyword).

It might help to define some terms here*:

  • Function - A block of code that takes some input (zero or more parameters), returns some output (sometimes the output is unimportant), and may or may not have effects.
  • Effects (aka “side effects”) - changes in state, such as changing the value of a global variable. Without effects, the user will never see anything or be able to interact with the app, because displaying things on the screen or getting user input is an effect.
  • Method - a function that’s the property of an object.
  • Object - in JavaScript, basically just a bag of properties, i.e. keys and values (some of these come from prototypes, but don’t worry about that for now). Some of the “values” are methods, because JS functions are first-class and can be used like any other value.
  • Callback - a function passed as a parameter to another function.

right is an object (a DOM object, which means it corresponds to an HTML element). addEventListener is a function that’s a method of right. The first parameter passed to addEventListener is 'mouseleave'. The second parameter is:

() => {
  container.classList.remove('hover-right');
}

This is an arrow function that takes no parameters, returns undefined (the default return value for a function with no return keyword), and has the effect of removing a class from container.

Meanwhile, container is another DOM object, which has a property classList which is array-like (also a type of object), which in turn has a remove method that takes a single string parameter ('hover-right').

*Some of these terms have subtly different meanings in other programming languages, but this is how they’re used when referring to JavaScript.

1 Like
11