As your JavaScript programs become bigger, putting all the code in one place can make the program difficult to follow. Javascript Functions help you keep related code together. You can create a function for a specific task and use it whenever you need it.
For example, you could have one function to calculate a total and another one to display a message.
What is a Function?
A function is a block of code that performs a specific task. You write the code inside a function and call the function whenever you want that code to run.
Example: Creating a Function
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function</title>
</head>
<body>
<h1>JavaScript Functions</h1>
<script>
function sayHello() {
console.log("Hello! Welcome to JavaScript.");
}
sayHello();
</script>
</body>
</html>
Output:
Hello! Welcome to JavaScript.Here, sayHello() is the function.
The code inside the function does not run just because we created the function. It runs when we call it.
sayHello();Function Parameters and Arguments
A function can receive information and use it while running.
The names written inside the function brackets are called parameters. The actual values given to the function are called arguments.
Example: Function with a Parameter
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Parameters</title>
</head>
<body>
<h1>Function Parameters</h1>
<script>
function greet(name) {
console.log("Hello " + name);
}
greet("Aman");
greet("Priya");
</script>
</body>
</html>
Output:
Hello Aman
Hello PriyaHere, name is the parameter.
When we call:
greet("Aman");
"Aman" is the argument passed to the function.
The same function can now be used with different names.
Multiple Parameters
A function can have more than one parameter.
Example: Adding Two Numbers
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Parameters</title>
</head>
<body>
<h1>Adding Two Numbers</h1>
<script>
function addNumbers(a, b) {
console.log(a + b);
}
addNumbers(10, 5);
addNumbers(20, 8);
</script>
</body>
</html>
Output:
15
28Here, a and b receive the values passed when the function is called.
Return Statement
A function can also send a value back to the place where it was called. The return statement is used for this.
Example: Returning a Result
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Return Statement</title>
</head>
<body>
<h1>Return Statement</h1>
<script>
function addNumbers(a, b) {
return a + b;
}
let result = addNumbers(10, 20);
console.log("Result:", result);
</script>
</body>
</html>
Output:
Result: 30The function calculates 10 + 20 and returns 30. That returned value is stored in the result variable. A function can return many types of values, including strings, numbers, and Booleans.
Function Expressions
A function can also be stored inside a variable. This is called a function expression.
Example: Function Expression
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Expression</title>
</head>
<body>
<h1>Function Expression</h1>
<script>
const greet = function() {
console.log("Hello from the function!");
};
greet();
</script>
</body>
</html>
Output:
Hello from the function!Here, the function is stored in the greet variable.
Arrow Functions
Modern JavaScript provides a shorter way to write functions called arrow functions.
Instead of writing:
const add = function(a, b) {
return a + b;
};
you can write:
const add = (a, b) => {
return a + b;
};
Example: Arrow Function
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Arrow Function</title>
</head>
<body>
<h1>Arrow Function</h1>
<script>
const add = (a, b) => {
return a + b;
};
console.log(add(10, 5));
</script>
</body>
</html>
Output:
15Arrow functions are used a lot in modern JavaScript, especially when working with arrays and React.js.
Default Parameters
A function can have a default value for a parameter. If no value is provided, JavaScript uses the default value.
Example: Default Parameter
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Default Parameters</title>
</head>
<body>
<h1>Default Parameters</h1>
<script>
function greet(name = "Guest") {
console.log("Hello " + name);
}
greet("Aman");
greet();
</script>
</body>
</html>
Output:
Hello Aman
Hello GuestWhen greet() is called without a name, JavaScript uses "Guest".
Scope in JavaScript
Scope decides where a variable can be used. A variable created inside a function is normally available only inside that function.
Example: Function Scope
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Scope</title>
</head>
<body>
<h1>JavaScript Scope</h1>
<script>
function showMessage() {
let message = "Hello from the function";
console.log(message);
}
showMessage();
</script>
</body>
</html>
Output:
Hello from the functionThe message variable belongs to the function, so it cannot be used outside that function. You will see scope often when working with larger JavaScript programs.
Callback Functions
A function can also be passed to another function as an argument. This is called a callback function.
Example: Callback Function
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Callback Function</title>
</head>
<body>
<h1>Callback Function</h1>
<script>
function showMessage() {
console.log("Hello from the callback!");
}
function runFunction(callback) {
callback();
}
runFunction(showMessage);
</script>
</body>
</html>
Output:
Hello from the callback!Here, showMessage is passed to runFunction. The runFunction function then calls it.
Callback functions are important in JavaScript because you will see them when working with events, arrays, timers, and asynchronous code.
Why Use Functions?
Functions make programs easier to manage. Instead of writing the same code again and again, you can put it inside a function and call it whenever you need it.
For example:
Create function → Give it information → Run it → Get the resultThis makes your code easier to reuse and maintain.
Key Points
- A function is a block of code that performs a specific task.
- A function runs when it is called.
- Parameters allow a function to receive information.
- Arguments are the values passed to a function.
returnsends a value back from a function.- Function expressions store functions in variables.
- Arrow functions provide a shorter way to write functions.
- Default parameters provide a value when no argument is given.
- Scope controls where a variable can be used.
- A callback is a function passed to another function.
Functions are one of the most important parts of JavaScript. You will use them throughout the rest of the tutorial, especially when working with arrays, events, APIs, and React.js.
In the next chapter, we will work with JavaScript Arrays and see how to store multiple values in one place.
Frequently Asked Questions (FAQs)
Q1. What are JavaScript functions?
JavaScript functions are reusable blocks of code designed to perform a specific task. You can create a function once and call it whenever you need that task in your program.
Q2. What are parameters and arguments in JavaScript?
JavaScript function parameters are the names listed when a function is created. Arguments are the actual values passed to those parameters when the function is called.
Q3. What is the JavaScript return statement used for?
The JavaScript return statement sends a value back from a function. The returned value can then be stored in a variable or used in another part of the program.
Q4. What are JavaScript arrow functions?
JavaScript arrow functions are a shorter way to write functions. They are widely used in modern JavaScript, particularly when working with arrays, callbacks, and frameworks such as React.
Q5. What are JavaScript callback functions?
JavaScript callback functions are functions passed as arguments to another function. The receiving function can call the callback when it needs to perform a particular task.
Q6. Why are functions important in JavaScript?
Functions help organize code into smaller, reusable parts. Instead of repeating the same code, you can place it inside a function and call it whenever required, making programs easier to maintain.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
