Weirdness of JavaScript Functions
The different types of JavaScript functions, and their unique properties
JavaScript has countless weird features that are not present in other programming languages. One such feature are the functions in JavaScript. In JavaScript, the 4 ways to write functions are: named, anonymous, arrow functions, and self-invoked functions. Each of these functions have contrasting properties. Let’s dive deeper into what each of these functions are.
Named Functions
function greeting() {
console.log("Hello there!");
}
Named functions are similar to the normal functions in other programming languages. They start with the JavaScript “function” reserved keyword, followed by the unique name of the function. In this scenario, the above function is given the name of “greeting”, as the function’s purpose is to greet someone. Remember to always name functions well so that it describes the action being performed by the function itself. Finally, in the middle of the opening and closing brackets is the code that will be executed. In this case, a simple console.log is displaying a greeting.
greeting(); // outputs Hello There!
To call the function, all that needs to be done is to type the name followed by an opening and closing parenthesis. If parameters must be passed into the function, they will be placed in the middle of the opening and closing parenthesis. When the “greeting” function is called, it will simply output “Hello There!”. Named functions are fairly straightforward and uncomplicated, and they work the same way in the majority of programming languages today.
Anonymous, or Nameless, Functions
const greeting = function () {
console.log("Hello There!");
}
Anonymous, or nameless functions, are functions that have no name associated with them. For instance, take a quick glance at the above example. This example might already look weird or unnatural due to the fact that a function is being assigned to a variable. We are defining a constant variable called “greet,” and assigning it to an anonymous function that outputs a simple greeting.
greeting(); // outputs Hello There!
Calling an anonymous function is exactly the same as calling a named function. Simply type the name of the variable that the anonymous function was assigned to, followed by opening and closing parenthesis. Again, if parameters must be used, place them in between the pair of parentheses, and separate each parameter by a comma.
const greetingWithParameter = function (nameOfPerson) {
console.log("Hello " + nameOfPerson + "!")
}// To call this function simply write:
greetingWithParameter("All");
Self-Invoked Functions
(function () {
console.log("Hello Everyone!" )
})();// outputs Hello Everyone!
Self-invoked functions fall under the Anonymous/Nameless function category. Self-Invoked functions do not have a name, and they can only be called once when they are declared. To write a self-invoked function, start by typing two pairs of parentheses. In the first pair, use the “function” reserved keyword from JavaScript, followed by a pair of parentheses and a pair of curly brackets. Inside the curly brackets is where all your code is written and executed.
Let’s take a look at what is actually happening in the above code. First, we put a nameless function inside a pair of parentheses. The purpose of this is to namespace and control the visibility of the member functions. It wraps code inside a function scope, and it decreases clashing with other libraries. The other pair of parenthesis calls this function right after it has been declared.
Arrow Functions
const greeting = () => {
console.log("Hello Everyone!");
}
Arrow functions were introduced in ES6, and they are a simpler way to write anonymous functions. As seen in an anonymous function, start by creating a variable and assigning it to a function. However, instead of using the “function” reserved keyword, a pair of parentheses followed by an “arrow”, or “=>”, and a pair of curly brackets. Just as seen in all the previous function examples, the code is written in between the pair of curly brackets. Arrow functions are exactly the same as anonymous functions, but they provide a much simpler syntax.
Conclusion
JavaScript comprises of numerous weird features that are not present in other languages. One such feature is the different kinds of functions that JavaScript provides, in its own interesting and sometimes uncanny syntax. In JavaScript, the 4 ways to write functions are: named, anonymous, arrow functions, and self-invoked functions. Named functions are like any other function in programming languages. Arrow functions and Self-invoked functions are both variants of Anonymous/Nameless functions. Nameless functions are functions assigned to a variable, and arrow functions just provide a simpler syntax to do the same task. Finally, Self-invoked functions are functions that are only called once, when they are declared.
Write your mind, or read others’. Visit The Academically Driven!
Email: theacademicallydriven@gmail.com
Instagram: @theacademicallydriven
Facebook: @theacademicallydriven
LinkedIn: The Academically Driven
Twitter: @AcademicallyThe