Introduction:
Functions are one of the most essential building blocks in JavaScript programming. They allow developers to group a set of instructions into a single, reusable unit that can be executed whenever needed. They are just like a block of code that are used for a specific task. If you are writing the function in your code, you can easily pass values like parameters and arguments, etc.
Whether you are creating simple scripts or complex applications, understanding how functions work is a key step toward becoming a proficient JavaScript developer. In this article, we will discuss how to use functions in JavaScript from beginner to advanced level.
Function in JavaScript
Functionsin javascript help to manage a set of statements that you write once and reuse them many times. It runs only when it is called. The most important functions in any code are the main () function. Any code starts from the main () function because it works as the entry point of any program. This can use many built-in functions such as prompt (), alert (), and confirm ().
Syntax:
function name (parameter1, parameter2, …, parameter N) {
// Write your code here to be executed
}
Example
Code:
function factorial(n) {
let res = 1;
for (let i = 1; i <= n; i++) {
res *= i;
}
return “Factorial of ” + n + ” is ” + res;
}
console.log(factorial(5));
console.log(factorial(7));
Output:
Factorial of 5 is 120
Factorial of 7 is 5040
Calling a function
Calling (or invoking) a function means telling JavaScript to execute the code inside the function. It only works when it is calling.
Syntax:
function functionName(parameters) {
//Write your code here to be executed
}
functionName(args);
Example
Code:
function check(data) {
if (data % 2 === 0) {
console.log(data + ” is Even”);
} else {
console.log(data + ” is Odd”);
}
}
check(10);
check(7);
Output:
10 is Even
7 is Odd
Function With Parameters
Parameters are placeholders for values that you pass into a function. They act like variables inside the function, allowing you to work with dynamic data.
Example
Code:
function sum(x,y) {
console.log(“Sum of two numbers is:”, x + y);
}
sum(5, 10);
sum(20, 15);
Output:
Sum of two numbers is: 15
Sum of two numbers is: 35
Return Statement
This statement helps to inside a function to send a value. To retrieve a result using the return keyword.
Syntax:
function function(list of all parameters) {
// Write your code here to be executed
return value;
}
Example
Code:
function mul(x,y) {
return x*y;
}
console.log(mul(5, 1));
console.log(mul(2, 15));
Output:
5
30
Types of Functions
In JavaScript, functions are divided into two types, which are as follows:
1) Function Declaration:
It is also known as the function definition. It is a modern way to declare a function in JavaScript. It contains a list of all parameters, the function’s name, and code to write in the curly braces {}.
- A function declaration is only available within the same file and scope where it is defined.
- To call a function from another file, you need to explicitly export it from one file and import it into another (using ES6 Modules or CommonJS in Node.js).
Syntax:
function function_Name(parameter1, parameter2, parameter 3 …, parameter N) {
//Write your Code here to be executed
return val;
}
Example
Code:
function findMax(a, b, c) {
let max;
if (a >= b && a >= c) {
max = a;
} else if (b >= a && b >= c) {
max = b;
} else {
max = c;
}
return “The maximum number is ” + max;
}
console.log(findMax(10, 25, 15));
console.log(findMax(7, 3, 9));
Output:
The maximum number is 25
The maximum number is 9
2) Function Expression
It is another way to define a function in JavaScript. This works as a function declaration, like syntax, etc. It can be an anonymous or named function. With the use of this function, you cannot hoist a function.
Syntax:
const Name = function (list of all parameters) {
// Write your code here to be executed
};
Example
Code:
const Grade = function(name, marks) {
let grade;
if (marks >= 90) {
grade = “A+”;
} else if (marks >= 75) {
grade = “A”;
} else if (marks >= 60) {
grade = “B”;
} else if (marks >= 40) {
grade = “C”;
} else {
grade = “Fail”;
}
return “Student: ” + name + “nMarks: ” + marks + “nGrade: ” + grade;
};
console.log(Grade(“Alice”, 88));
console.log(Grade(“John”, 35));
Output:
Student: Alice
Marks: 88
Grade: A
Student: John
Marks: 35
Grade: Fail
Arrow Functions
It is a modern way to define a function in JavaScript and was introduced in ES6(ECMAScript) 2015. This is a shorter and cleaner syntax, easier to read for traditional function expressions. It’s useful in callback functions like map, filter, and reduce.
Syntax:
const function_Name = (parameter1, parameter2, …, parameter N) => {
// Write your code here to be executed
return value;
};
Example
Code:
const nums = [10, 15, 20, 25, 30, 35, 40];
const even = nums.filter(num => num % 2 === 0);
console.log(“Original Numbers:”, nums);
console.log(“Even Numbers:”, even);
Output:
Original Numbers: [
10, 15, 20, 25,
30, 35, 40
]
Even Numbers: [ 10, 20, 30, 40 ]
Anonymous functions
It is also referred to as the lambda function. This does not take any name during the declaration. You need to use the function keyword to declare a function. If you don’t use parentheses in your code, you will find an error because without parentheses (), this function does not work properly.
Syntax:
function () {
// Write your code here to be executed
}
With Arrow functions:
( () => {
// Write your code here to be executed
} )();
Example
Code:
const Hello = function() {
console.log(“Hello from an anonymous function!”);
};
Hello();
setTimeout(function() {
console.log(“anonymous function is executed after 3 seconds!”);
}, 3000);
const sum = (a, b) => a + b;
console.log(sum(5, 3));
Output:
Hello from an anonymous function!
8
anonymous function is executed after 3 seconds!
Nested Functions
It is also referred to as inner functions and outer functions. With the use of inner functions, you can access the variable from the outer functions. It works as the closure’s concept. This is helpful for maintaining data privacy, making it flexible, and organizing code.
Syntax:
function outerFunction(parameters) {
// Write your Outer function code
function innerFunction(innerParameters) {
// Write your Inner function code
// Can access outerFunction variables and parameters
}
// Call inner function
innerFunction();
}
Example
Code:
function outerFunction(num) {
function fivetimes() {
return num * 5;
}
function triple() {
return num * 3;
}
console.log(“five times: ” + fivetimes());
console.log(“Triple: ” + triple());
}
outerFunction(5);
Output:
five times: 25
Triple: 15
Conclusion
Functions are a fundamental part of JavaScript, enabling developers to organize code into reusable, efficient, and easy-to-maintain blocks. They allow you to perform specific tasks, accept inputs through parameters, return outputs, and even contain other functions. For beginners, mastering functions is a key step toward building interactive and dynamic web applications, as they form the backbone of most JavaScript logic.
I suggest you learn JavaScript programming from the Tpoint tech website, as it provides JavaScript Tutorial, interview questions, a compiler, and all its related topics in easy language.
