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.
### Best Practices
- **Do One Thing:** A function should only have one job. If your function is doing math, updating the screen, and saving data, split it into three smaller functions.
- **Use Arrow Functions:** Modern React development heavily relies on arrow functions `() => {}` because they are shorter and handle the `this` keyword better.
### Common Mistakes
- **Forgetting the `return` statement:** If you forget to return a value, your function will output `undefined` by default.
### Interview Questions 1. **What is the difference between a parameter and an argument?** *Answer:* A parameter is the variable defined in the function declaration. An argument is the actual data you pass in when calling the function.
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.