What is this parameter/argument referencing?

1

Hi Guys,

I’m working though Wes Bos’ Javascript 30, and I am on the “Playing with CSS Variables and JS” lesson, Im having a bit of trouble trying to figure out what a particular parameter/argument is referencing.

The parameter/argument is input highlighted below in the two examples:

// ES6 - Version
inputs.forEach(input => input.addEventListener(‘change’, handleUpdate));

//ES5 - Version
inputs.forEach(function(input) {
return input.addEventListener(‘Change’, handleUpdate);
});

If I change the name of these two for example from input to abc it still works, I assume it is not referencing the input tags in the HTML since I can change the name and it still works, I thought it might be the event object but Im a bit of a newbie so I cant understand why it would be the event object?

And if it is referencing the input I don’t understand what tells it to pull the input in?

Here is a JS Fiddle example:

https://jsfiddle.net/nv8L4b43/

Thanks Guys!

2

Each input parameter is an input element.

const inputs = document.querySelectorAll('.controls input');

Try adding a console.log output to your forEach loop to get a better idea.

inputs.forEach(input => console.log(input));
1 Like
3

inputs should be a collection of all elements specified by the .controls input selector. The input parameter in the forEach callback is simply a name with which to call each element in the inputs array (in this case all of them are <input> elements). You can name it anything you want (like abc), but you want to name it appropriately (input should be good enough).

1 Like