Function:
A function is a block of reusable code written to perform a specific task.
You can think of a function as a sub-program within the main program. A function consists of a set of statements but executes as a single unit.
In JavaScript, we have some browser built-in functions like alert(), prompt(), and confirm(). You have probably used these in your project before, right? But you can still create your own custom functions.
There are several ways to define a function. Most commonly, we have function declaration and function expression.
In simple words, functions are actions or processes that receive an input and return an output. They can perform various tasks and calculations.
For example, if I want to calculate something when the user clicks the button, I will write a function for that action.
If I want to close the image modal, I will write a function.
If I want to remove something from a shopping cart, I will write a function to achieve that.
I can even write one function that can run another function. I can control functions with other functions.
Function declaration
One of the ways to define a function is a function declaration. When you create a function with a name, it’s called a function declaration (aka function definition or function statement). This is the most standard, basic way of writing a function and what you will use very often as a beginner.
The function declaration above consists of:
- A function keyword
- The name of this function
- A parenthesis that holds the parameter(s)
- The body of the function, enclosed in curly braces with statements that define the function
The function named sendMessage receives a parameter of a message and then logs this message to the console. When will this function or how will this function do it? We will cover this very soon.
Function keyword: To create and use functions you always need to use the keyword function as it’s a part of JavaScript syntax that helps JavaScript to identify what you are trying to create.
Function name: A function name is a way to identify the function. When you have various functions you need to differentiate which one does what for later use.
Function parameter: It’s the name of a potential value that we can pass to the function. Imagine, you have a function that console logs a name every time you click a button. I can pass inside the function the parameter that will have a value later. This function will receive this value and then log it to the console. Function parameters are not mandatory.
Function body: This refers to the block of code inside curly braces ({}). This is a place where we can provide function instructions.
Function statement: Inside the body, we can have function statements and expressions that are the tasks or processes we expect the function to perform.
How to call a function?
Once you create a function you also need to call it. When you call the function, it performs the tasks you write in the function body. There are functions that don’t need to be called.
Functions can be also called differently but it’s a special function that we will cover later.
The basic that you need to understand right now is that to call a function you use its name followed by parenthesis. Just like with people. To call someone you use their name, so in the case of functions, it’s the same.
As an illustration, here is a function hello:
This function is not going to show us anything in the console right now because we didn’t call it.
That’s why we need to add one more line:
And only now we will see “How can I help you?” in the console.
What is a function parameter?
A function parameter is a name that we include when creating a function. This name will potentially be a value that the function receives and later performs some operations on/with it.
The name that you come up with can be any, it’s up to you what the name will be and doesn’t affect the result. The parameter names are needed to associate them with future values we plan to pass to the function.
There are several rules to remember when it comes to parameters:
- The names cannot be repetitive. If you use one name, the next one needs to be different.
- You don’t always have to use parameters. They are not required.
- The order matters. If you want to pass parameters of a name and surname, the values you plan to pass, need to match the order. If your second parameter is called last name but you pass a name as a second value, the value of the last name parameter will be the name value.
- You don’t define the data type of the possible value. JavaScript is a dynamically typed language meaning that you don’t have to write in advance what data type the parameter is going to be.
- If you have not already make sure to read about data types in JavaScript.
- Parameter names need to be descriptive and it’s recommended to use camelCase (lastName, firstName) but not a must.
The must-know along with parameters are arguments.
What is a function argument?
A function argument is a value that we pass to the function. The value will be represented by the function parameter. When I use parameters like name and last name, the values that I will pass, will be called arguments.
According to the image above, the name msg is the parameter but the actual value, “Hello! :)” is an argument.
Arguments object
An argument object is a built-in object available inside the body of the function. It represents all the arguments that we passed into the function. This object is more similar to an array but it’s not a regular array we know of.
If you have 4 parameters in the function, for example, but you pass 5 arguments (values), the arguments object will read all the arguments you have passed, even if there is no parameter to read it.
You can use an argument object and combine it with array index functionality.
An index is the location in the array. The index of the very first item in an array is 0, so its position (index) is 0. The next one is at the index 1 and so on.
Return keyword in function
To create a function that will resolve to a value after the function is invoked, you use the return keyword. You write this within the body of the function.
return is a directive that returns a value to the function after the code within it has been executed.
In a function body, we often use a return statement. A return statement returns one specific value and stops the function execution. Any code you have after the return statement is not going to execute. That’s why the return statement should always be the last one.
The value returned can be any data type. It’s also not mandatory to write a value after the return statement. If you skip the value, the function will return undefined.
For example:
function sum(a, b){
return a + b;
}
sum(10, 20);
Output:
//output will be 30
What does the return statement do:
In regular functions, the return says “ I am done, here is the answer”, stops doing anything and gives you the value you asked for from the place where you called the function.
In the asynchronous function, it says “I promise to answer you later when I am done” and remembers that it will answer later.
In generator functions it says “I will give you right now this part of the answer but I might have more as well”.
In the asynchronous generator, it says “I promise to give you some part of the answer later but I might also have some more answers but I also promise I might give them later on”.
References
https://medium.com/@catherineisonline/the-complete-guide-to-javascript-functions-fc9cf9f89d5b
https://www.freecodecamp.org/news/what-are-functions-in-javascript-a-beginners-guide/
https://www.geeksforgeeks.org/javascript/functions-in-javascript/
https://www.w3schools.com/js/js_function_return.asp
Top comments (0)