Unmasking the Anonymous Function
Anyone learning web development will eventually find themselves learning Javascript. It’s the language of the internet. If HTML is the skeleton, CSS is the skin, then Javascript is the muscle? Maybe? Brain? The mitochondria? Anyways, you get the point. And if you want your website to not be as boring as the plain text file it might as well be, you are going to have learn it.
When you do, if you are like me, you will look for similarities to any other programming language you’ve already learned. You’ll find some, that’s a given, but you’ll also find some differences, (usually revolving around syntax — go figure), that will really throw you off. Now, personally, I had practiced javascript as a complete newbie 6 months prior to switching my focus to another language, Ruby, for backend purposes and came back to JS to modify the DOM in the front end. I thought I’d have a leg up when going back to javascript, however, making the switch has really lead to some frustration and headache. Specifically, remembering the differences between some of the many functions in javascript. In particular, the ever mysterious anonymous function.
Coming back to JavaScript was a deceivingly hard task when these bad boys were thrown into the mix. The anonymous function is a function that has no name. Although they are syntactically less work for us lazy programmers, they can be very confusing when mixed in with other code for those who aren’t as familiar with them. As an additional drawback, they cannot be always be called anywhere in the code, such as within their own function body due to the nature of being anonymous. The way these are written can bamboozle the the most eager of newbies the first time around, and provide a nice reminder to always keep your coding skills fresh to most seasoned of developers. There are a few ways that these will find their way into your code:
Function Expressions
Function expressions are very similar to the standard function declaration. However they can be made anonymous.Take the classic JavaScript function declaration below for example:
Here we declare a function, addSomething, pass something in as an argument, and return something added to something. If that something was an integer, such as 1, the function would translate to 1 plus 1 and return 2. Pretty straight forward! Below this, we’ve converted addSomething to a function expression, and from there converted to an anonymous function in a very simple form.
Arrow Function Expressions
One of the major benefits of creating an anonymous function would be to make use of the arrow function expression, which can be written in a variety of ways, depending on how many lines of code are in the function block, and how many arguments are being passed through.
If you’re not already familiar with arrow functions, seeing these in the wild for the first time can lead to some of those classically frustrating moments of programming when you really do feel like you’re reading a foreign language, due to the variations in how they can be written. The brackets, parenthesis, and return are optional — until they’re not. If you have multiple arguments (or none) you’ll need to keep the parentheses. If you have multiple lines of code, you’ll need to keep the return in addition to the brackets.
Arguments of other functions
You will see anonymous functions most inside of functions (that take in other functions as arguments). Also known as a higher order function. Side note — a higher order function is any function that takes a function as a parameter, or returns a function. One example of this is the event listener used when manipulating the DOM.
Notice the use of arrow function in the last example!
Immediately Invoked Function Expression
Another type of anonymous function is that of a self executing anonymous function, or Immediately Invoked Function Expression. This is typically done to avoid clutter in the global scope. A few notable syntax requirements for this are the wrapping of the function in parenthesis and immediate opening and closing parenthesis after the function is closed.
Jinkies! The un-masking of the anonymous function. There are many variations of functions out there, but the anonymous javascript function will always be the most mysterious in my eyes. And hopefully a little less mysterious in yours after reading this!
