JavaScript Functions
JavaScript Functions
A JavaScript
functionis a block of code that you can name once and run whenever you need it.
Instead of writing the same lines again and again, you put them inside a function and call the function by its name.
A function only runs when something calls it.
Example
Example
javascript
function greet() {
console.log("Hello");
}
greet();In this example, the function is named greet.
Nothing is printed until greet() is called on the last line.
What is a Function?
A function is a named block of code that performs one job.
Writing the function is called defining it. Running it is called calling it.
Functions let you reuse code, keep related lines together, and give a task a clear name.
Syntax
Syntax
javascript
function name() {
// code to run
}The word function starts the definition, followed by a name and a pair of brackets.
Calling a Function
A function runs only when you call it by name, followed by brackets.
Example
Example
javascript
function sayHello() {
console.log("Hello there");
}
sayHello();
sayHello();Here, the function is called twice, so the message is printed twice.
Functions with Parameters
You can pass values into a function so it can work with different data.
Example
Example
javascript
function greet(name) {
console.log("Hello " + name);
}
greet("John");
greet("Mary");Here, name is a parameter, and "John" and "Mary" are the values passed in.
Returning a Value
A function can send a value back with the return keyword.
Example
Example
javascript
function add(a, b) {
return a + b;
}
let result = add(4, 6);
console.log(result);Here, the function gives back 10, which is stored in result.
Why Use Functions?
Functions save you from repeating the same code in several places.
Example
Example
javascript
function areaOfSquare(side) {
return side * side;
}
console.log(areaOfSquare(2));
console.log(areaOfSquare(5));The calculation is written once, but it can be used with any number.
Naming a Function
A good function name says what the function does, usually starting with a verb.
Names follow the same rules as variables and are case sensitive.
Example
Example
javascript
function calculateTotal(price, quantity) {
return price * quantity;
}
console.log(calculateTotal(10, 3));A clear name means you can read the calling line without opening the function.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Functions</title>
</head>
<body>
<h1>JavaScript Functions</h1>
<p id="result"></p>
<script>
function calculateTotal(price, quantity) {
return price * quantity;
}
document.getElementById("result").innerHTML =
"Total: " + calculateTotal(25, 4);
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try changing the values:
Call calculateTotal(10, 7) and see the new total.
Important Points
- A function is a named block of code that runs only when it is called.
- Define a function with the
functionkeyword. - Call a function by writing its name followed by brackets.
- Parameters let you pass values into a function.
returnsends a value back to the code that called it.
Conclusion
JavaScript functions let you name a block of code and run it whenever you need it.
They keep related lines together and stop you repeating yourself.
Understanding functions is the foundation for almost everything else in JavaScript.