You can name the input parameters anything you want

It is important that this lesson doesn't get lost as part of other topics.

The thing is, inside a function definition, please remember that input parameters are just placeholder variables whose values change based on the arguments we are passing.

And because they are just variables at the end of the day, you can name them just like any other variable name.

For example, during the last lesson, we discussed how the event object is automatically passed to our callback functions.

And we were representing the event parameter using the variable name event:

menuToggleButton.addEventListener("click", function(event){
    console.log(event);
    document.body.classList.toggle("off-canvas-is-open");
});

However, you could just name the event variable as e, too:

menuToggleButton.addEventListener("click", function(e){
    console.log(e);
    document.body.classList.toggle("off-canvas-is-open");
});

The event object would still work in the same way.

In most online examples, you'll see the "event" parameter as e instead of event.

Heck, to make your code even more understandable, you could also name it eventObject:

menuToggleButton.addEventListener("click", function(eventObject){
    console.log(eventObject);
    document.body.classList.toggle("off-canvas-is-open");
});

Similarly, when it comes to our addTwoNumbers example, we went with the variable names firstNumber and secondNumber as parameters:

function addTwoNumbers(firstNumber, secondNumber){
  const result = firstNumber + secondNumber;
  console.log(result);
}

But you could have just named them x and y:

function addTwoNumbers(x, y){
  const result = x + y;
  console.log(result);
}

The addTwoNumbers function would still work in the same way with the updated variable names.

As long as you understand what those variables represent, you can name them anything you want.

However, I recommend going with descriptive variable names because it helps us understand what kind of inputs we are working with.

Also, make sure that you use the correct variables inside the function's body.

Simply put, don't do this:

function addTwoNumbers(firstNumber, secondNumber){
  const result = x + y;
  console.log(result);
}

The above snippet is wrong because there is a parameter name mismatch.

The function parameters are named firstNumber and secondNumber, but inside the function we are using x and y.

We should use the correct parameter names for our calculation.

Don't do this either:

menuToggleButton.addEventListener("click", function(eventObject){
    console.log(event);
    document.body.classList.toggle("off-canvas-is-open");
});

You know why.

Both examples will make our functions erroneous and faulty.

So, be careful to use the parameter names consistently when you are creating them and using them inside the function body.

In the next lesson, we will integrate the event object into some of our previous projects as a thinking exercise.