DEV Community: Devin Ho

Using Referencing, Invocation, and Callback Functions with Event Listeners

Devin Ho — Wed, 06 Jul 2022 13:06:17 +0000

Callback functions are quite useful as a programmer especially when they’re used with Event Listeners. A callback function by definition is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. For callback functions and event listeners to work properly, they need function referencing, not function invocation. Here, in the blog, I will dive deeper into the difference between the two and explain why you should use one over the other.

Callback Functions

To get a better grasp of invocation, referencing, and callback functions, I’m going to change the text of “Hello, World” to “Goodbye, World” when I click on it. By doing so, I need to create an event listener (addEventListener) to listen for when the click happens. Once the click happens, then the function will run. The function below is the function I’ve declared that will run once the event listener occurs.

As you can see, we grabbed the HTML element to change the text and assigned it to the variable header. Then we want to change the content of that text so we use textContent to change it to what we want it to be once the event listener happens.

In the screenshot above, we were able to change the text from “Hello, World” to “Goodbye, World” using a callback function. If we remember the definition of a callback function mentioned earlier in the blog, we created an anonymous function inside the event listener as the second parameter. We used (event) as a parameter using the arrow functions method ( => ) and then passed that function as an argument when we used it in our handleClick function. This was used to run the handleClick’s code which changed the text from “Hello, World” to “Goodbye, World.” However, in order for the functions to work correctly as designed it’s important to understand why it is better to reference a function rather than invoke or call a function once the event listener occurs.

Invoking a Function

When we use event listeners, typically we want to reference a function rather than invoke or call a function. You might ask, “Don’t we want to call the function?” which technically yes but the screenshot below will help you understand why you don’t want to call the function.

In the example, the function is executed as soon as the line is read by the program. We see that as soon as we put the code into the console, “Hello, World” is immediately changed to “Goodbye, World” without us clicking on the text to make it change. Because we included parenthesis in our _handleClick _function, we executed the function before we could click on “Hello, World.” This is happening because we wrote our function with parenthesis on the end () of our function so therefore, we are calling or invoking the function rather than referencing it which we want to do instead.

Referencing a Function

If we take the same example and reference the function rather than invoke it, we will see very results of what we want to do.

In the screenshots above, we see that once we add the code into the console, “Hello, World” remains as is until we click on the text in which the event listener will occur and the handleClick function will run, changing “Hello, World” to “Goodbye, World” By not adding the parentheses at the end of our handleClick function, we are referencing it instead of invoking. The function will not execute until the event listener or “click” occurs which is what we want to happen. By referencing our handleClick function, it waits until the event listener occurs instead of executing as soon as the script loads as it would have done when we were invoking the function.

Map vs. forEach: Which one to use?

Devin Ho — Tue, 31 May 2022 14:16:40 +0000

When I first started learning array iterations, I came across two different but seemingly similar array methods. Array.prototype.map() and Array.prototype.forEach().

So, what's the difference?

Definition of .map and .forEach

map(): creates a new array that populates the results of calling a provided function on every element in the calling array
forEach(): executes a provided function once for each array element

What Doest This Mean?
The forEach() method doesn't actually have a built-in return value, meaning it will return undefined. This makes the forEach() method generic which makes it an attractive option to choose. However, this method should be used when you can't use a method that is more specialized. A common way for using forEach() is trying to print contents to the screen.

The .map() method is specialized. it will have a return value and will create a new array the same size as the array it is copying. It is important to note that this method will not change the original array.

Syntax
.forEach():
array.forEach(function(currentValue, index, arr), thisValue)
Parameters:

function(): a function to run for each array element
currentValue: the current value being processed in the array
index (optional): the index of the current element
arr (optional): The array of which the .forEach was called upon
thisValue (optional): Values to use “this” when executing a “callback function”. The default value is undefined.

Return Value: undefined

.map():
array.map(function(currentValue, index, arr), thisValue)

function(): a function to run for each array element
currentValue: the current value being processed in the array
index (optional): the index of the current element
arr (optional): The array of which the .map was called upon
thisValue (optional): A value passed to the function to be used as its “this” value. The default value is undefined.

Return Value: The results of a function for each array element

Coding Examples
Let us see some examples in which each method can be displayed and used properly.

.forEach() method:

Return Value:

In this example, we are multiplying each number by itself for each element in an array. The forEach method is called for each element and we print or log the multiplication of the number. We can see that the original array has not changed and the console.log of the returnValue shows as undefined because the return value of a .forEach will always be undefined. Because, forEach method doesn’t create a new array and allows you to modify the source array itself, this is considered a mutator method.

.map() method:

Return Value:

In this example, we are using the same arrays and elements but just switching the forEach iteration with the .map iteration. As you can see, we get two different results when using the different methods. Looking at the example, when we console logged the numberArray, the array has remained unchanged but the return value of the .map iteration created a new array which is built by multiplying a number to each element of the array. Unlike the .forEach method which had a return value of undefined, the .map gave us a return value of each number multiplying by itself. Through our example, the .map creates a new array by applying the callback function on each element of the source array. Since the original array is not changed, we can say that .map uses an immutable method.

Which One Is Better?
Once we’ve established the difference between the two methods. Now it comes to the question: how do we know when to use the forEach method or the map method?

This question depends on what you are trying to accomplish.

One might favor the forEach method when you just want to loop through each element and not worried about changing the data in the array. Someone might just want the array to do something just as saving it to a database or console logging it out:

For example:

One might favor the map method when you want to change or alter the data. This is preferable when changing or altering data because it doesn’t modify the original array and returns a new array. Because of this, the original array is kept intact and unchanged. Because it returns a new array, this means that you can do things such as chaining which means you can chain other methods or array iterations to the map method.

For example:

In this example, we are mapping over array1 and multiplying each element by 2. After each element is done multiplying, then we filter through the array and only keep the elements that are greater than 50 which is then saved in the array named array2. The final result then gives us an array of [74, 84, 100].

In the end, it’s to know what you’re trying to accomplish so you know which method to use properly but it’s equally important to understand the difference and understand how each method can affect your code.

Sources: MDM, W3Schools, StackOverflow

Starting My Software Engineering Journey

Devin Ho — Tue, 31 May 2022 14:16:24 +0000

About a month ago, I started my journey as software engineer. Although I’m about 2 years removed from college and graduated with a technical degree, I realized I didn’t actually know what I wanted to do and had no trajectory for my career. I got a job as a Software Tester out of college and thought it was something I would want to do for the rest of my life. That idea however quickly fizzled out as I found it to be very repetitive and mundane. After spending months looking for a new job and constantly getting rejection emails, I decided I needed to hone in on some new skills.

As I was looking for jobs, software engineer jobs were constantly popping up on my feeds. Even while taking coding classes in college, I knew my skills weren’t on par with what companies wanted. It was in this moment, where I knew I needed to hone in on some skills. That’s when a friend told me about a software engineering program she had recently taken and thought that while it would be challenging, it’s something that I should consider taking.

Through many weeks of wrestling with the idea, I finally decided to enroll in the Flatiron Software Engineering Program. I remember even while completing the pre-work, I thought this was a huge mistake and while sometimes I still think that, the feeling of completing each lab and deliverable is definitely a great reminder this was the right decision.

It’s extremely gratifying learning the material, putting it into practice, and seeing the results happen before your very eyes. I’m excited to learn more complex topics and languages as I continue to hone in on these new skills to start my software engineering journey.