10 Javascript Functions You Should Know
Functions are one of the most integral parts of any language. We cannot live without functions in programming. Similarly in JavaScript, functions are useful in writing an organized and reusable block of code.
JavaScript is a functional language. As a matter of fact, JavaScript functions have the utmost importance over everything. Besides just execution, it can be passed as an argument to a function, returned from a function, and also can be stored in a simple variable.
There are two important things about function in JavaScript you should know before going further.
- A Function Definition (also known as Function Declaration or Function Statement).
- Function Calling or Function Invocation.
A function definition is the actual executable block of code. The code is written inside curly braces with the function keyword. While function calling is invoking the executable block of code. A function is never executed unless and until it is invoked.
|
1 2 3 4 5 6 7 |
// Function Definition function sayHello(name) { console.log(`Hello ${name}`); } // Function Calling sayHello('codeinJS'); |
Now that you are comfortable with the function definition and the function calling let’s deep dive into various JavaScript functions available.
Here is the list of JavaScript functions you should consider as a JavaScript developer.
1. Regular Function
A regular function is a simple form of JavaScript function. We can write the function by using the function keyword, function name, parameters, and body. A regular function is a reusable block of the code. So the general use case of regular function is reusability.
|
1 2 3 4 |
// Regular Function function sum(num1, num2) { return num1 + num2; } |
2. Named Function
A named function is nothing but one of the use-cases of regular function. It always has a function name with it. Usually, we use function declaration syntax for named functions. The declared function never executes immediately. It starts its execution whenever invoked by the caller.
|
1 2 3 4 |
// Named Function function sayHello(name) { console.log(`Hello ${name}`); } |
3. Anonymous Function
An anonymous function is a function without a name. Mostly, it is useful for two purposes. It can be passed as an argument to a function. Similarly, the second use case of an anonymous function is that we can return an anonymous function from a function.
|
1 2 3 4 |
// Anonymous Function function (name) { console.log(`Hello ${name}`); } |
As shown in the above code there is no function name in between function keyword and parenthesis. We cannot invoke an anonymous function directly. For this purpose, we have to assign it to the variable for invocation. We will see that in the next point.
4. Function Expression
Basically, a function expression is an implementation of named and anonymous functions. When we assign an anonymous or named function to a variable, the whole thing is termed as a function expression.
It has two types.
- Named Function Expression.
- Anonymous Function Expression.
Named Function Expression
When we assign a function with a name to a variable then the variable and the function together are termed as the named function expression.
|
1 2 3 4 5 |
// Named Function Expression const say = function sayHello(name) { console.log(`Hello ${name}`); } say('codeinJS'); |
Anonymous Function Expression
When we assign an anonymous function to a variable then the variable and the function are termed as the anonymous function expression.
|
1 2 3 4 5 |
// Anonymous Function Expression const say = function(name) { console.log(`Hello ${name}`); } say('codeinJS'); |
5. Arrow Function
An arrow function is a just syntactic sugar over function expression. It is also termed a fat arrow function. If we are writing an anonymous function expression then there is no need to use the function keyword.
So we can write the above function expression with smaller syntax as below. Here we have skipped the function keyword. If there is no function keyword then it is mandatory to use the fat arrow (=>) after the parameter list.
|
1 2 3 4 5 |
// Arrow Expression const say = (name) => { console.log(`Hello ${name}`); } say(); |
6. IIFE
IIFE stands for Immediately Invoked Function Expression. It is one of the most famous implementations of the anonymous function. It starts its execution immediately after the definition. There is a general rule in JavaScript that never pollute a global scope. Writing function in global scope is not a good thing. IIFE creates a function in a local scope.
|
1 2 3 4 |
// Function Definition (function (name) { console.log(`Hello ${name}`); })('codeinJS'); // Function Calling |
As shown in the above example, there is an anonymous function with lexical scope. We have called the function with immediately invoked function expression ().
IIFE prevents access of variables to the outside world. It also prevents pollution of the global scope. Always prefer IIFE in order to write maintainable and efficient code. Read more about IIFE here.
7. Closures
Before diving into closures, we should know about a nested function. A nested function is a function defined inside another function. It is possible to write a function inside another function in JavaScript. The closure is the concept of implementing nested functions.
|
1 2 3 4 5 6 7 8 9 10 11 |
// Outer Function function outerFunction() { let name = 'codeinJS'; // Inner Function return function innerFunction() { console.log(`Hello ${name}`); } } const result = outerFunction(); result(); |
According to closure, an inner function should have access to the outer function’s variables and parameters. And outer function should return an inner function to the outside world. Generally, closures are useful to achieve encapsulation in JavaScript. Always use a closure with IIFE to hide implementation details.
8. Callbacks
In JavaScript, we can pass a function as an argument to another function. The function that is passed as an argument is called a callback function. Usually, callbacks achieve asynchronous operations in Javascript.
|
1 2 3 4 5 6 7 8 9 |
function greeter(name) { console.log(`Hello ${name}`); } function sayHello(callback) { callback('codeinJS'); } sayHello(greeter); |
Callbacks are necessary for various scenarios such as making an API request, I/O operations with a disk, event handling, etc.
9. Constructor Function
The constructor function is used to create an object. We can create objects in various ways in JavaScript. The constructor function is one of the ways to create an object.
|
1 2 3 4 5 6 7 8 9 |
function Course(name) { this.name = name; } let course1 = new Course('Angular'); let course2 = new Course('Javascript'); console.log(course1.name); // Angular console.log(course2.name); // Javascript |
The constructor function is an effective method to create multiple objects. It is nothing but a blueprint like a class for creating objects of the same type. Learn more about Constructor Function here.
10. Pure Function
A pure function is a function that returns the same output over the input. It never mutates the global variables. A pure function never modifies the global state of variables or any other data members. It only depends on the input arguments of the function.
|
1 2 3 4 |
function add(num1, num2) { return num1 + num2; } add(10, 20); |
Some common terminologies for the pure function are:
- A function that doesn’t modify the existing memory location is called pure function.
- A function that doesn’t modify the actual parameter is called pure function.
- A mutation is a bad thing. So never modify the actual parameter of the function.
JavaScript functions are really a wide topic. It is not possible to cover it in just one post. You can learn more about it on official MDN docs. Here are some important tips about functions that will be helpful for you.
- We can store function inside a variable and it is termed as a function expression.
- An arrow function is a shorter version of a function expression.
- We can pass a variable as an argument to the function. Similarly, we can pass a function as an argument to a function and it is termed as callbacks.
- Like we return a variable or value from a function. Similarly, we can return a function from another function and it is termed as closure.
- Always prefer IIFE for data hiding.
- Never modify the actual parameter of the function. Always create a separate copy of the parameter.
If you like this post then do not forget to share it with your friends and colleagues. Also do not forget to mention some more ideas about JavaScript functions in the comments.
See you soon!
