JavaScript Functions for Dummies Part 2: addEventListener() & first-class objects

If you’re following along from Part 1, we already know that JavaScript functions can be declared or expressed. We now know that functions must be called with() parameters, whether or not parameters have been included in our function. But there was also allusion to the option of calling functions without parameters. That’s where addEventListener() comes into play.

We’re going to use the same greeting() function as before, but this time we’re going to add it to a form, and when the form is submitted, we will get the greeting of the name that is submitted.

function greeting(name) {
    alert(`Hi ${name}!`)
}

This is our current function. We call greeting("James") and get an alert in our browser that says Hi James! and we can change out the name to whatever we like. This is great! Our function is dynamic enough to be changed as needed, but almost never will we want people interacting with our sites to directly interact with our functions. So let’s refactor this again to make it more user-friendly.

What’s more realistic is that our site will have an input field on it for people to interact with. To mimic that, I made a suuuuper simple form with an input and button on codepen.io to walk through how it might look. We’ve got an input field to put a name, and a submit button to acknowledge a name was submitted to our simple form.

Theoretically, what we want to happen is that we submit any name we want, and we’ll get an alert the same way we did with our function above. Let’s modify our code to make it more user-friendly.

addEventListener()

JavaScript comes chock full of a punch of pre-established methods that are available to use right in the browser, one of them being addEventListener() and that’s what we’ll use to help our user communicate with JavaScript.

“Wait, what’s a method? How is this different from a function?”

I’m glad you asked! Functions are chunks of code that are stored to perform a task in JavaScript. Methods are also functions, but they’re stored as object properties. All objects in JavaScript have pre-established methods. And we can even make our own. But addEventListener() is one of the pre-established methods that make life easier. Below, we can see how to call an object method with addEventListener() and getElementById(). First, identify the object being used(in our case, “document”) and then with . you call the method. Methods are still just functions, and as we can see with getElementById() it takes an argument of a string. Remember, arguments are the value of the parameter the function takes.

So how does addEventListener()work and what does this have to do with our original greeting() function?

Codepen.io

Let’s break down what’s happening at line 9. nameSbmt is a variable we created, and as we established addEventListener() is a pre-established method that accepts two arguments. The first argument is a string of the event we want to act on. Here is a reference of all of the JavaScript events that can be modified. The second argument is what you want that event to do. We want the event to send an alert that greets our user to their name that they’ve input. So why is it we’re calling greeting now, without parameters? Isn’t the rule that a function only works if you call it with ()? This is one of those exceptions! If we had included parameters and called greeting() , JavaScript would have immediately fired that function and wouldn’t have registered any input from the user at all, it would have loaded the page and immediately seen that greeting() was called and fired it right away. The way it’s supposed to! But we don’t want that to happen. We want to wait for greeting() to be used until our user inputs their name and then clicks “submit”. So in our method addEventListener() we call greeting as an object. Because of the nature of JavaScript, all functions are considered First-Class Objects, meaning functions can be stored in a variable or object and therefore behave like objects. Remember our first expression in Part 1?

let greeting = function() {
      alert("Hi James!")
}

In this example, we created a new variable greeting . But to call the function we had to include the parameters. However, in JavaScript it’s still considered an object. This is what we’re calling on in addEventListener() . Even though we wrote greeting as a declarative function in our codepen.io example, it still stored greeting as an object. So now when we’re calling addEventListener, JavaScript sees the object of greeting, which has been stored with a function in it, and says to itself

“okay, we will execute the function stored inside of greeting once someone clicks “submit” but not until then.”

This is a small and subtle difference, but understanding functions and their relation to objects is crucial to making JavaScript work. All functions are first-class objects in JavaScript. That means we can treat our functions like we would any other data type (strings, integers, arrays, etc.).

If you notice, I also removed the (name) parameter in our greeting function. That’s because if we input the value of the name inside addEventListener, again, it would try to fire the greeting function immediately on page load. So we moved some stuff around and as we can see, now JavaScript tells itself

Okay I have all of this information stored and saved, I have a form and I know how I want to respond to the form when it’s interacted with. Whenever someone types in their name at the input field, once they click the “submit” button, I will send an alert to their screen that says “Hi” and whatever value they inputted as their name.

JavaScript is a pretty cool and dynamic language, I’m sure there’s plenty of other ways to do this. But what’s important is knowing what first-class object is, knowing the difference between a function and a method, and knowing how to get our functions to interact with the objects we’re creating in our sites. It takes some practice but with time it will help cut hours of bug fixing, I promise! Happy coding friends!