A function is a mini-program that performs a task. In general, a program consists of multiple small functions. These functions are just small pieces of a big program that have input, processing, and output.
Sometimes we want a particular program or task to execute repeatedly with different inputs each time. Here comes the role of a function that executes the processing logic with different inputs and outputs.
Now you have a basic understanding of function, let's discuss how to create a function.
Function Declaration
"Declare a function" is just a rephrase of "Create a function"
You need three things to create a simple function:
function keyword
name of the function
statement or logic
Let's create a function -
function add(){
//statement
console.log(2+3);
};
Above we start with the function keyword, then the name of the function add and statements of this function are defined between the curly braces.
Function Call
Once we've declared the function, we will call it to see the output.
add();
This is all you need to do to invoke a function - the name of the function followed by parentheses.
"Call a function" sometimes also rephrase as "Invoke a function"
Once invoked, we'll see the output in the console.
Parameters & Arguments
In the above function, we directly put the input values 2 and 3 in the statement. But what if we want to pass the input values while calling the function?
Let's take an example.
First, we'll provide dynamic variables to the function which are called parameters. These variables are just a placeholder that holds the input values pass-through function call.
function add(firstNum, secondNum){
// statement
console.log(firstNum + secondNum);
};
Above we declared two parameters firstNum & secondNum inside the parentheses. We'll use these parameters as variables inside the function definition.
Now we'll pass the input values to the function for processing.
add(2,3);
Above we pass the input values 2 & 3 while invoking the function. Here 2 & 3 are arguments. These values will be passed to the parameters which are then used to process the output in the statement.
Once the function is invoked, we'll see the output in the console.
Default Parameters
Sometimes we might forget to declare the function arguments. In that case, our program might give an error and we'll not get the expected output.
To avoid this situation, Default parameters are included in the ES6, so if a value is not provided for the argument, the default value will be used.
function add (firstNum = 1, secondNum = 6){
// statement
console.log(firstNum + secondNum);
};
// Invoke the function
add();
If we do not pass arguments to the add function, then it'll process the output using the default values.
// Output
1 + 6 = 7
Return Statement
In the introduction section, we discussed that generally, a function contains processing logic. Up to this point, our function contains both processing logic and output.
function add (firstNum, secondNum){
// statement
console.log(firstNum + secondNum);
};
Processing part - firstNum + secondNum
Output part - console.log()
Now we'll use the function to return a value and then we'll output the value outside the function. Let's add a return statement.
function add (firstNum, secondNum){
// statement
return firstNum + secondNum;
};
A return statement specifies the value returned by the function. Let's invoke this function.
add(2,3);
Now we want to see the expected output.
console.log(add(2,3));
Just wrap the function call in a console.log().
Function Expressions
We can also use function expression to create a function. We just need to create the function as a variable.
const language = function(){
console.log("JavaScript");
};
language();
The output is the same. JavaScript is logged in the console.
Hoisting
Function declarations are hoisted. Till now, we are invoking the function after the declaration but we can also invoke a function before we declare a function.
// Invoking the function
message();
// Function Declaration
function message(){
console.log("Good Morning");
};
But we cannot do the same thing in function expressions.
// Invoking the function
message();
// Function Declaration
const message = function(){
console.log("Good Morning");
};
This program will cause an error.
TypeError: message is not a function
Arrow Functions
The arrow function is an ES6 feature that allows us to create a function without using the function keyword. We also often don't need to use a return statement.
Let's take an example -
// Normal function declaration
function greeting(name){
return `Good morning, ${name}`;
};
Now we simplify the above function using an arrow function.
// Arrow function
const greeting = name => `Good morning, ${name}`;
We now have the entire function declaration in one line. We remove the function and the return keyword. Also if there is one parameter, we can remove the parentheses.
When a function has more than one parameter, it should be surrounded by parentheses.
function greeting(message, name){
return `${message}, ${name}`;
};
// Arrow function
const greeting = (message, name) => `${message}, ${name}`;
We have a single-line function because it returns only one statement. If there are multiple lines of statements then we'll use curly braces.
const add = (a, b) => {
let sum = a + b;
return sum;
}
console.log(add(1,2));
Conclusion
I hope after reading this blog you will understand the basics of function in JavaScript. If you find this blog helpful, don't forget to share it.
Thank you 🙂
Connect with me on - Twitter