Function Overview
Functions are blocks of code designed to perform a particular task.
Learning Goals
The Core Concept
A JavaScript function is a block of code designed to perform a specific task. Functions allow you to reuse code: define the code once, and use it many times.
You can pass data, known as parameters, into a function. The function can process that data and send a result back using the 'return' keyword.
Visual guide
JavaScript concept flow
A simple original diagram to connect the lesson idea with real project flow.
Code & Implementation
// Declaring a function
function calculateTotal(price, tax) {
const total = price + tax;
return total;
}
// Calling the function
const myBill = calculateTotal(100, 15);
console.log("Total to pay: $" + myBill);
// Arrow Function (Modern ES6 syntax)
const greet = (name) => {
return "Hello, " + name + "!";
};
console.log(greet("Sarah"));Expected Output
Total to pay: $115 Hello, Sarah!
Practical Project: Function Overview Implementation
Hands-on practice task
The Challenge
Apply your knowledge of Function Overview to build a real-world feature. This project helps you move beyond theory and understand how JavaScript works in professional settings.
Helpful Hints
- •Refer back to the 'Steps' section for the correct sequence.
- •Check the 'Tips' for common optimization patterns.
- •Look at the 'Code Highlights' to ensure you're using the right syntax.
Quick Knowledge Check
What happens if a function doesn't have a 'return' statement?
Continue Learning
Next steps after this lesson
Apply your knowledge of Function Overview to build a real-world feature. This project helps you move beyond theory and understand how JavaScript works in professional settings.
Ready to put your coding skills to the test?
Don't just read—write code! Use our free Try-Code Playground to experiment with real-time preview, or search utilities on our Developer Tools List.