The JavaScript “Buff”
A JavaScript function is like a Buff: it is one thing that is also many things.
Now, that may not have made a lot sense to you if you have no idea what a ‘Buff’ is. A Buff is a multifunctional piece to tubular, stretchy cloth that can be “worn in a number of different configurations to provide a high level of comfort, protection and style during outdoor and recreational activities.” It’s a piece of outdoor gear. If you’ve ever watched the T.V. show, “Survivor”, you’ve probably seen the contestants wearing them. I’ve used mine on long distance hikes as a hat, a headband, a balaclava, an eye mask, a snot rag and even to grab a hot pot off the fire. The point is, it has many different uses even though it’s just one object.
Likewise, JavaScript functions are just versatile objects.
That’s right, functions are just objects! Think of the JavaScript function object as normally having a couple of special properties: a name property and a code property. Technically, the function doesn’t have to have a name, but I’ll explain that part in a moment.
This is how we declare a function:
If we were to look at this function object floating in the global scope, it would look something like this:
========================================{
name: “myFunction”,
code: {console.log(“Hey, I am a function)}
}
========================================
At this point, we have only created the function in the global scope, meaning it’s kind of like it’s floating around in memory, waiting to be invoked. It’s waiting for us to ‘call’ it to life. When we invoke the function, we say, “Hey, run this code now!”
To invoke or call the function, saying we want the code in the function to run, we would do this:
Parameter vs. Arguments
The terms parameter and arguments can be confusing to new developers, and even seasoned developers tend to mix up the two. When you are defining a function, you can pass it a variable. This variable is called the parameter. It is just a placeholder.
The parameter could be called ‘name’, or ‘x’ or even ‘Jeff’ if you wanted. It just tells the function to expect a defined variable to get dropped in its place, and that same variable will be used inside the code of the function somehow. When we are ready to invoke a function, we pass the function an argument.
Again, it’s easy to confuse the two, and many times, developers accidently interchange argument and parameter, but they are technically different.
Weird, I know.
The Flavors of Functions
There are several different ways to define a function in JavaScript. So far, we have been using function declarations. A function declaration is when we literally define the function like this:
We have declared a function by using the “function” keyword followed by the name of our function, which we have named “wellHelloWorld”. When this function is invoked, it will log “Hey there world! Didn’t see you there.” , in the console.
Another way to define a function is called a function expression. Here is an example:
Now, you may have noticed something weird about the last function. It’s missing a name! What the?!
Functions technically don’t have to name. These are called anonymous functions. In our previous example, the anonymous function is an object that becomes the value of the greetYourFriends variable. But why?! Why doesn’t it have a name? Because coders are lazy and writing out a name is too much work… okay, that’s only partially true. Writing an anonymous function still creates a function object, but it makes the this function expression a little clearer and more readable. When we call the variable, we don’t really care if the function has a name or not, we only care about the resulting code between the curly braces. The anonymous function is more like a convenience thing, but whether it has a name or not, doesn’t really matter.
BONUS:
Arrow functions, which are also referred to as “fat arrow functions’, are just another way to write a function. Let’s look at an example:
As you can see, the syntax is much shorter. We can get rid of the curly braces and the return statement. But, we would have to add those back in if the body of the code is in a block, so like this:
Arrow functions can be pretty neat and hip. I like to call them ‘hipster functions’ because they look like they’ve put on a pair of skinny jeans. They can be great to use because of the shorter syntax and the readability of them, but be sure to research a little more on them before implementing. They can be a little trickier to debug.
Which should I use?
So now that we know functions can be a bunch of different things…. Which one should I use?
I know you’ll hate this answer….but… it depends. The great thing about function declarations is that they are hoisted, so they can be called anywhere. When the JavaScript file initially runs, declared function and variables get ‘hoisted’ to the top so that they can be used anywhere in the file. Since they have names, it can help you remember what the function is actually doing.
Function expressions, are not hoisted, so the expression has to be written BEFORE the variable calls on it. Otherwise you will get an error saying the variable is “undefined’.
Conclusion
Ultimately, it’s really up to you or your team on how you want to write your functions.
The great thing about functions is that they are really versatile. As you can see, they can be written different way and reused over and over. They can be statements or expressions and they can have names or be nameless. They are one of the fundamental building blocks in JavaScript. The main things you’ll want to remember is:
- JavaScript functions are just objects.
- The parameter is the placeholder, the argument is the actual value passed in when the function is invoked
- Function declarations vs Function expressions vs anonymous functions vs arrow functions
- And just like Buffs, functions make the world a better place!
