Functions In JS
In this article, I would like to share my knowledge regarding functions and how js treats them. But let’s first know what a function is. In theory, the function is a set of statements that performs something when called. But there’s an exception which is called a life function that doesn’t need to be called. Basically it calls itself, We will discuss it further later.
Above you can see an example of how the function is declared in js. Using the function keyword you can declare any function name. And inside the curly braces, you can write a block of codes or statements that will be run when that function is called. So as you can see it’s really easy yet very useful while writing code in any language and not just is js. Functions can be used in various ways and for various purposes in js and one of its uses is to make the webpage dynamic.
See when you click something on a website or press something in your any kind of device it triggers an event that then executes a function that makes the user experience very dynamic and involving. There’s a lot more to function if you really want to dig in. But I am going to talk about some basic things and some weird things.
In the above example, you can see that function can also take some argument as parameters and then perform something on those values passed as parameters and return the new value when executed. You can pass any type of value as a function and it includes the function itself as well. Those types of functions are called Higher-order functions.
Although one weird thing about js is that it treats function as an object. Basically, in js, functions are objects. A good way to imagine functions is as callable ‘’action objects”. We can not only call them but also treat them as objects: add/remove properties, pass by reference, etc.
But when you try to check using a type of it returns its type as a function which I find weird.
console.log(typeof(add)); // returns type as function
You can check in the console of any browser using the code above. I checked the type of add function because in the above example I have declared add as a function for adding values. So I am also still learning and trying to wrap my head around this concept.
So this is basically what a function looks like in js or any other language.
Now let’s look at one of the unique types of functions known as life.
IIFE is the short form for an immediately invoked function expression. This basically means that the function executes itself immediately after being defined. Let me show you an example.
This is an IIFE. As you see we can make any function expression an IIFE by wrapping it in parentheses and adding a following pair of parentheses at the end. What it does is that it is executed immediately when the function is declared. You can see it in the console of any browser.
When I declared a function, after hitting enter it just called itself and printed the value in the console as you can see. I didn’t call the greet function but still it was executed immediately after declaration. IIFE can be very useful in many scenarios when we are making something. A pattern named modular pattern in js is completely based on IIFE. You can search it if you want to learn more.
This is the basic explanation and syntax of IIFE. There’s always more to learn.
Now let’s talk about Higher-Order Functions.
I am still learning and getting my head around this but I will try to explain as much as I know. So what is a higher-order function? It’s basically a function that can take functions as its parameters.
Let me show you an example.
Above you can see the example of HOF. casual meeting and formal meeting functions are normal functions that are then passed as parameters to the meeting which is a higher-order function as it takes those other two functions as its parameter. I have also passed a parameter name type that will execute those functions or just a line of code if the type is not matched. You can see that in the console it will print Hello welcome to casual meeting as I have passed casually as its type in the meeting function.
So this is a short and sweet definition of HOF. You can always learn more if you feel interested
on this topic. There is more to it which I am still learning.
- Long ago, probably 7 years ago, the days when the use of Facebook was at its infancy and all the …Read More
- Front-end refers to the part of the website, which users can see,touch and interact with such as a graphical user …Read More
- nteraction is the process of how users interact with products. Designing interactive products, environments, systems, and services are Interaction Design. …Read More