How Function Works in JavaScript
A Beginner's Guide
JavaScript is an object - oriented programming language. It is a widely used programming language due to its versatility to run on a client side and a server-side.
As a client-side language, JavaScript allows users to craft dynamic web pages directly within their browsers, particularly for front-end development purposes. It enables manipulation of the Document Object Model (DOM) and facilitates the creation of interactive features such as buttons, event triggering, and visual effects.
One of the basic features of JavaScript is Function.
A function in JavaScript is a reusable block of code that performs a particular task. Think of it as a container designed to execute a specific function.
Once defined, functions can be called multiple times from different parts of your code, promoting modularity and reducing code duplication.
Function makes your code readable, organized, and concise.
Function Declaration
Functions can be declared by following these simple steps:
1. Use the 'function' keyword, followed by a function name of your choice.
Example: function addNum()
Here; Function is the keyword
addNum is the function name
Note: You can decide to use any variable name.
2. Insert a parameter in between the brackets.
A parameter Is a variable that is used to pass data inside the function.
I.e function addNum(a, b)
a and b are the parameters. They hold values when the function is finally being called.
3. Include an opening and closing curly braces.
i.e function addNum(a,b){ }
4. Insert your piece of code inside the curly braces.
i.e. The code you want to execute in the function.
Summing up the above steps to create a function that adds two numbers is as follows:
You can use this function to sum up any numbers as many times as possible in your code.
How to call/invoke a function
Invoking a function simply means calling the function out to come and work for you.
After declaring your function, you can call it anytime to perform its operation.
For example: Call the function you declared in the previous example to add 5 and 6.
I.e addNum(5,6);
Notice that our parameter a takes the value of 5, and parameter b takes 6.
Return values in function
The "return" keyword, as its name suggests, is used inside a function to send a value into the function.
e.g function addNum(a, b){
return a + b;
}
This will automatically return a + b when you invoke the function.
Benefits of Using Functions
1. Function makes your code reusable. Once it has been declared, it can be used multiple times.
2. Function enables readability.
3. Function facilitates easy testing and debugging.
Function Expression
Function expression simply means assigning a variable to a function. It could be a ‘named function’ or an ‘anonymous function’
Example:
The example above is a named function. It has a function name of 'addNum.’
For the ‘Anonymous’ function, it’s not assigned a name.
E.g
Arrow Function
Arrow Function is an alternative and a shorter way to declare a function. It was introduced in ES6 to make code concise Instead of using the traditional way to declare a function.
its syntax is represented as '=>'
Example: A function that performs simple addition using arrow function.
Its result is the same as the traditional function but it's more concise and straightforward.
Default Parameters in Function
JavaScript function also has a feature called Default parameters. This feature enables you to set a default value to your function in case no parameters are passed when the function is called.
E.g
The default value of a is 5 and b is 6 which gives 11 as a result when called without passing a parameter.
However, when parameters are passed, it will still give its intended answer.
I.e.
Hoisting
Hoisting in JavaScript is a behavior, where Functions are used before declarations.
Example:
Notice, that the function was invoked before the actual declaration of the function. This is due to Hoisting.
However, it's important to note that when a function is defined as an expression using a `const` or `let` declaration, it cannot be hoisted in the same way as function declarations. Attempting to use the example below will produce an error.
Hoisting can cause undesirable results in your program. It is advisable to declare your functions first before using them and avoid Hoisting.
Conclusion
In this article, we covered the basics of JavaScript functions such as function declaration, function expression, arrow function, default Parameters, and Hoisting.
With the basic understanding you have acquired, you should be able to declare and use functions effectively in your code.
For a more comprehensive guide on function check the MDN-web docs
Happy coding!