JavaScript function allows us to define a block of code, give it a name, and execute it as often as we want. Suppose we have to write same code and logic, again and again, this is not a good practice in JavaScript, We should avoid repeatability and follow the DRY (Don't repeat yourself) rule.
How to create a function -
To create a function first we write the keyword function then the name of a function, and then curly braces, The part of the function inside the curly braces {} is the body of the function. Then we invoke the function. Let's understand with examples -
Example 1 -
function message() {
console.log("Hello Everyone");
}
message();
// Hello Everyone
Example 2 -
function fullName(firstname, lastname){
console.log("My name is " + firstname + " " + lastname);
}
fullName("Rafe", "Ahmad");
// My name is Rafe Ahmad
How to write a table with function -
function table(num){
for(let i = 1; i <= 10; ++i){
console.log(`${num} * ${i} = ${num * i}`);
}
}
table(6);
table(7);
Arrow function
ES6 version allows us to create a function more shortly and cleanly compared to a regular function which is called arrow function. Let's understand with the examples -
let sum = (a, b) => a + b;
console.log(sum(2, 2));
// 4
Multiline arrow function -
Example 1st -
let num = (a, b) => {
let result = a * b;
return result;
}
console.log(num(8, 8));
// 64
Example 2nd -
let func1 = (question, yes, no) => {
if(confirm(question)) yes();
else no();
}
func1("do you agree?",
no = () => console.log("agreed"),
yes = () => console.log("not agreed"));
Anonymous function
A function without a name is called an anonymous function. We can invoke an anonymous function like this -
Example 1st -
let myFunction = function(){
console.log("Anonymous function called");
}
myFunction();
// Anonymous function called
Example 2nd -
let myFunction = () => console.log("Anonymous function called");
myFunction();
// Anonymous function called
Immediately invoked function Expression
An immediately invoked function expression is a JavaScript function that runs as soon as it is defined.
(() => {
console.log("function running successfully");
})();
// function running successfully
Function statement and function expression
Function statements begin with the function keyword, followed by the name of the function and any arguments it may take.
Function Expressions are function definitions that are assigned to a variable.
Let's understand these two with an example;
// Function statement
function myFunction(userName) {
console.log(`${userName}, logged in`);
};
myFunction("Rafe");
// Function expression
let user = function myFunction(userName) {
console.log(`${userName}, logged in`);
};
user("Rafe");
Difference between function statement and function expression -
The main difference between a function statement and a function expression is hoisting. So in the case of a function statement, we can call the function even before creating it. But we can't call the function before creating it in the case of a function expression.
// Function statement
myFunction("Rafe"); // ✅
function myFunction(userName) {
console.log(`${userName}, logged in`);
};
// Function expression
user("Rafe"); // ❌ Error
let user = function myFunction(userName) {
console.log(`${userName}, logged in`);
};
Returning a value -
function compare(a, b){
if(a > b){
return 1;
}
else if(b > a){
return -1;
}
else{
return 0;
}
}
let result = compare(6, 4);
console.log(result); // 1
That's all about it. I have tried to explain JavaScript functions simply, I hope you must have understood how to write functions in different ways. Thanks for reading!