This content originally appeared on Level Up Coding - Medium and was authored by Taylor Casey
My first phase of bootcamp was exactly what I hoped it would be; hard and exhilarating. I’ve loved math and algorithms my whole life, and coding has been so similar to that. For my project, I was able to create a simple-use web application that fetched data from an API (all about makeup) and returned a list of 54 CoverGirl makeup products. Can you tell that I live in a house of boys, and need to add some femininity somewhere? As I watched and read lectures trying to figure out how to make this web page come alive, it finally hit me how important and useful functions are. You literally can’t do anything cool without them.
JavaScript is such an amazing language and functions are EVERYTHING to it. They started out being pretty simple to learn, then my head started spinning when we learned about functions being “first class.” One night I was trying to describe them to my husband and all I could say was that “functions are something that does something… but that something can also be a function called inside of another something.” I knew then that I needed to do some more studying and research on these bad boys.
For my project I used functions and more coding concepts to make a list of those 54 CoverGirl products, each linked to a page that has a summary of the product, price, and URL for the product. I added a button that requires a click to be able to go back to the main page with all the products, once you are finished looking at the summary of an individual product. This project required eventListeners, variables, querySelectors, array iterations and more, but I want to focus on functions for this blog post.
Functions are the lifeblood of JS. They help bring together all the little parts of code that you’ve written, in a clean and efficient way. “They allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command- rather than having to type out the same code multiple times.” (developer. mozilla.org: “Functions — reusable blocks of code.”)
Functions can be simple, but I want to focus on how I learned and utilized some of the more complex uses of functions in my code. My first line of code for my web app shows an example.
The first function in this excerpt is an arrow function, which is just a shorter way of declaring a function and sometimes cleaner looking when you have to add things like “EventListeners” beforehand. In this function I’m not using any parameters, but I’m returning another function (getList) in it, so there’s a function in a function. Two lines of code and already two functions! So handy!
On line 30 a “callback function” (summary) is utilized as the response for a “click” on the specific link on the webpage. Callback functions have been by far the hardest for me to figure out, and I can’t say that I’m a pro at them yet, but in this case I used “summary” as a callback function, because I want that specific function to not be “called back” or “invoked” until the user clicks ones of the links. How cool is that? You can order a function to “wait!” I may not have control of my 2 year old, but I darn-well have control of my callback functions.
Now here is what I think is the best part about functions. You can “hoist” them! What is hoisting? Well I’ll tell you dear reader. Hoisting, as it sounds, means moving up. Connecting this to programming, functions can be called before they are even declared. Here’s an example in my project.
I showed you some of this code before, but here “listItems” is being called in line 20 before I even declared it in line 27. When JS read the code in line 20, it automatically hoisted line 27 up so that it knew what to do. Smart little JavaScript!
I could go on and on describing all the things that you can do in JS with functions but you would be here for hours, and I still don’t know all of them yet. But going through the process of creating my first project, I’ve learned that you can do almost anything with them! I’m excited to keep learning more and gain more understanding of some of the more complex uses of functions.
Functions in Functions in Functions in Functions! was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Taylor Casey
Taylor Casey | Sciencx (2022-03-28T00:31:01+00:00) Functions in Functions in Functions in Functions!. Retrieved from https://www.scien.cx/2022/03/28/functions-in-functions-in-functions-in-functions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.