As a programmer you can’t help but know that one of the best features of JavaScript is the implementation of funtions. Unlike other programming languages that provide different types of functions for different scenarios, but for JavaScript programming languages only provide us with one type of function that includes all scripts like (Regular Function, Anonymous Function, Arrow Function …)
We programmers who speak them and javascript programmers in particular (devjs) often overlook function problems. Please don’t be fooled by a seemingly simple JavaScript function, it looks simple but hidden inside is a complexity. So this whole article will revolve around the topic of functions and let’s explore the 8 JavaScript Functions that devjs need to understand. Understanding these often overlooked details will not only help you understand the language better, but it will also help you a lot in solving extremely complex problems.
What is javascript function?
First, as usual for other articles, we need to understand Function in javascript basically. You have to understand that in javascript everything happens largely from functions. And the function itself can be said to be a code block, or code block, that we can write once and run whenever and many times. And it is worth noting that functions accept different types of parameters and can return values if needed. And when you start learning programming, you should also agree on some basic terms. Here is what the javascript tips might look like: From now on, we will define the concept of a “take a specific action and provide a separate block that can have a return value”. about “.
Below is a list of JavaScript functions you should see if you are a developer who wants to level up
Regular Function
It can be said that Regular Function is a simple function and may be the first thing you must learn when you step into programming languages. Here we can declare the function keyword, function name, parameters, and body as in the example below
1 2 3 4 | function add(one, two) { return one + two; } |
The case of using Regular Function is when you reuse it many times, you should write this style.
Named Function
Named Function sounds so dreadful, but actually not much different from m * from Regular Function, just a name given to it with proper semantics for the following dev guys to look at and understand and call it correctly.
1 2 3 4 | function sayHello(name) { console.log('Hello Anonystick.com>>>', name) } |
Anonymous Function
Hearing this name is enough to understand this guy, what kind of game is anonymity or what is the name? But looking at that, when using them, it gives us two purposes that are able to pass arguments into the same function so we can also use the anonymous function to return a function. But here I want to add that do you know how arguments differ from parameters ?
// anonymous function function (name) {console.log ( Hello ${name} )} As the above example we can see, it doesn’t have a name between keyword and parentheses. Therefore no one can call it directly and have to pass a variable and we will assign it. This we will talk in the next section.
Function Expression
Next we will talk about the combination of Anonymous Function and Name Function which is Function Expression. Because why we say that, you just read the above section that can not be called directly when using the anonymous function, we can assign a variable to a function, in addition we can do the same thing. with the name function See an example to better understand what we’ve just discussed
Named Function Expression.
1 2 3 4 5 6 7 | const say = function sayHello(name) { console.log('Hello Anonystick.com>>>', name) } //Function calling say('anonystick.com') |
Anonymous Function Expression
1 2 3 4 5 6 | const say = function(name){ console.log(`Hello ${name}`) } //Function calling say('anonystick.com') |
Arrow Function
Arrow function has JavaScript tips that talk a lot in many articles, it was introduced in ES6, making our code much more concise and concise, you can read the previous articles, specifically ES6 Arrow Functions Cheatsheet . There you will not understand what the Arrow function is? It also helps you understand the syntax and when to use the Arrow function under what circumstances.
1 2 3 4 5 6 | const say = (name) => { console.log(`Hello ${name}`) } //Function calling say('anonystick.com') |
Note: Since the arrow function was born, it is widely used but one thing I have to remind you to note is that there is a difference between the Regular function and Arrow Function .
IIFE
IIFE stands for Immediately Invoked Function Expression , which initializes a function and executes it immediately. The syntax of IIFE is:
1 2 3 4 | (function(name){ console.log(`Hello ${name}`) })('anonystick'); //Function calling |
When using IIFE function, there are many advantages to this case such as scope, global … So we have a separate article about “Javascript: IIFE What? Why should use” you can spend Time to learn more if you really want to care.
Closures
If you are a hard fan of javascript tips, what is the definition of Closures? That is simple, but if you are a new developer or web seo, we will help you understand a bit more here that Closures represent nested functions. Do you understand the concept of nested? Nested means that one function is defined inside another. In other words, using Closures is using or performing nested functions. For a better understanding, we would like to take an example in the article “What is Javascript closure? Why do interviewers like to ask you this question?”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function f1() { var N = 0; // N luon duoc khoi tao khoi ham f1 dduowcj thuc thi console.log(N); function f2() // Ham f2 { N += 1; // cong don cho bien N console.log('-->>',N); } return f2; } var result = f1(); result(); // Chay lan 1 result(); // Chay lan 2 result(); // Chay lan 3 |
In the above way, using an internal function will have access to the external function’s variables and parameters. Be sure to dig into the examples above in the article we mentioned above.
Callbacks
At this point, we are relieved when the callback is a familiar concept before ES6 was born. Has anyone ever wandered around using callbacks like me? When using the callback function, we will probably go on forever without coming back. Only to talk about callback is a long story, if you have time, you can read this article. Here we understand the syntax only, usually, the callback is used to achieve asynchronous operations in JavaScript. Example below:
1 2 3 4 5 6 7 8 9 | function callback(name){ console.log(`Hello ${name}`) } function b(callback){ callback('anonystick.com') } //calling b(callback) |
Callbacks are widely used because of many different programming situations such as API requests, I / O operations, event handling … Here we should have stopped but I thought there are two more types of functions. We have yet to discover and understand that is the constructor function and the pure function. But once it comes to the constructor function, we have to mention the new keyword. But to understand why it is necessary to use new, we will probably dedicated to this explanation a separate article.
In a nutshell for the issues we have just discussed, we can see that learning javascript is not as simple as many people think, because the diversity in the javascript programming language has made it difficult for us to be programmers. . Each person has an idea, a dev way to do it and through this, you can choose for yourself a specific knowledge depending on each person.