Web Development - JavaScript Functions
JavaScript Functions
Functions are blocks of code that perform a specific task. They let you reuse code instead of writing the same thing again and again.
Function Syntax
A function is defined using the function keyword, followed by parentheses and curly braces.
Syntax
function functionName() {
// code to run
}
You can give the function any name you like.
The code inside the curly braces { } will run when the function is called.
Creating and Calling a Function
To run a function, call it by writing its name followed by parentheses ().
Example
Define and call a function:
// Create a function
function greet() {
let text = "Hello, JavaScript!";
document.getElementById("demo").innerHTML = text;
}
greet();
// Call the function
Try it Yourself »
This function writes "Hello, JavaScript!" inside an element on the web page.
Function Parameters
You can pass data into a function using parameters. The values you send are called arguments.
Example
Function with one parameter:
function greetUser(name) {
let text = "Hello, " + name + "!";
document.getElementById("demo").innerHTML = text;
}
greetUser("Bo");
Try it Yourself »
When you call greetUser("Bo"), the function replaces name with "Bo".
Return Values
Functions can return data back to the code that called them using the return keyword.
Example
Add two numbers and return the result:
function add(a, b) {
return a + b;
}
let sum = add(5, 3);
document.getElementById("demo").innerHTML = sum;
Try it Yourself »
The return statement ends the function and sends the value back to where it was called.
Default Parameters
You can give a parameter a default value. If no argument is passed, the default will be used.
Example
Function with a default parameter:
function greet(name = "Guest") {
document.getElementById("demo").innerHTML = "Welcome, " + name + "!";
}
greet("Bo");
greet(); // uses default
Try it Yourself »
When you call greet() with no name, it shows "Welcome, Guest!".
Functions Inside Functions
A function can call another function. This is helpful for breaking down big problems into smaller parts.
Example
Call a function inside another:
function add(a, b) {
return a + b;
}
function doubleSum(x, y) {
return add(x, y) * 2;
}
document.getElementById("demo").innerHTML = doubleSum(3, 4);
Try it Yourself »
Here, the doubleSum() function uses the result from add().
Scope
Variables declared inside a function are local to that function. They cannot be used outside it.
Example
Local variable example:
function showMessage() {
let message = "Hello";
document.getElementById("demo").innerHTML = message;
}
showMessage();
// message cannot be used here
Try it Yourself »
The variable message only exists inside the function.
Arrow Functions
Arrow functions are a shorter way to write functions. They are useful for small, simple tasks.
Example
Arrow function with two parameters:
const add = (a, b) => a + b;
document.getElementById("demo").innerHTML = add(2, 3);
Try it Yourself »
This arrow function works just like a normal one but is written in a single line.
Summary
- Functions group code that can be reused.
- Use parameters to send data into a function.
- Use
returnto send data back. - Variables inside functions are local (they exist only there).
- Arrow functions are a shorter version of regular functions.
Next, you'll learn how JavaScript can interact with HTML using the Document Object Model (DOM).
