javascript-course-chapter-13
Chapter 13: Functions
Learn JavaScript functions with explanations, fully commented code, outputs, and code explanations.
Goal: Understand how to create reusable blocks of code using function declarations, expressions, arrow functions, parameters, arguments, return values, and callbacks.
13.1 Function Declaration
A function declaration creates a named function.
A function is a reusable block of code.
You write the code once and call it many times.
Function declarations start with the function keyword.
They are useful for organizing code into smaller parts.
Beginners should use function declarations to understand the basic idea of reusable code.
Example: Create and call a function
// Create a function named sayHello.
function sayHello() {
// This code runs when the function is called.
console.log("Hello JavaScript!");
}
// Call the function.
sayHello();
Code Explanation: The function is named sayHello. The code inside the curly braces does not run immediately. It runs only when we call sayHello(). This makes the code reusable and organized.
13.2 Function Expression
A function expression stores a function inside a variable.
The function can be anonymous, which means it has no direct name.
You call the function by using the variable name.
Function expressions are common in modern JavaScript.
They are useful when passing functions around as values.
Beginners should understand that functions can be stored just like numbers or strings.
Example: Store function in a variable
// Store a function inside a variable.
const greet = function() {
// Print a greeting message.
console.log("Welcome to EasyTutorGuide!");
};
// Call the function using the variable name.
greet();
Output:Welcome to EasyTutorGuide!
Code Explanation: The variable greet stores a function. The function has no direct name, so it is called an anonymous function. To run it, we write greet(). This style is useful in callbacks and event handling.
13.3 Arrow Functions
Arrow functions are a shorter way to write functions.
They use the arrow symbol =>.
Arrow functions are very common in modern JavaScript.
They are often used with arrays, callbacks, and frameworks like React.
They can make code shorter and cleaner.
Beginners should first understand normal functions, then learn arrow functions.
Example: Arrow function
// Create an arrow function.
const sayHi = () => {
// Print a message.
console.log("Hi from arrow function!");
};
// Call the arrow function.
sayHi();
Output:Hi from arrow function!
Code Explanation: The variable sayHi stores an arrow function. The empty parentheses mean the function has no parameters. The arrow points to the function body. Calling sayHi() runs the code inside.
13.4 Parameters
Parameters are names written inside a function’s parentheses.
They act like empty boxes that receive values.
Parameters make functions flexible and reusable.
Instead of writing many similar functions, one function can work with different values.
You can have one parameter or many parameters.
Beginners should think of parameters as input names for a function.
Example: Function with parameter
// Create a function with one parameter named name.
function greetStudent(name) {
// Use the parameter inside the message.
console.log("Hello, " + name + "!");
}
// Call the function with a value.
greetStudent("Ali");
Code Explanation: The parameter is name. When we call the function, we pass "Ali". JavaScript puts "Ali" into the parameter. The function then uses that value inside the message.
13.5 Arguments
Arguments are the actual values sent into a function.
Parameters are the names in the function definition.
Arguments are the real data used when calling the function.
A function can receive strings, numbers, booleans, arrays, objects, or other functions.
Understanding arguments helps beginners use functions correctly.
The order of arguments matters when a function has multiple parameters.
Example: Send arguments to a function
// Create a function with two parameters.
function addNumbers(a, b) {
// Add the two values.
console.log(a + b);
}
// 10 and 5 are arguments.
addNumbers(10, 5);
Code Explanation: The parameters are a and b. The arguments are 10 and 5. JavaScript places 10 into a and 5 into b. The function adds them and prints 15.
13.6 Return Values
A return value is the result a function sends back.
The return keyword gives a value back to the place where the function was called.
After return runs, the function stops.
Return values are useful for calculations and reusable logic.
Instead of only printing results, functions can produce values.
Beginners should use return when they need to save or reuse a function result.
Example: Return a total
// Create a function that returns a value.
function multiply(a, b) {
// Return the multiplication result.
return a * b;
}
// Store the returned value.
let result = multiply(4, 5);
// Print the result.
console.log(result);
Code Explanation: The function receives 4 and 5. It multiplies them and returns the result. The returned value is stored in result. Then console.log() prints 20.
13.7 Default Parameters
Default parameters give a parameter a backup value.
The backup value is used if no argument is provided.
This helps prevent undefined values.
Default parameters make functions safer and easier to use.
They are useful for messages, settings, prices, usernames, and options.
Beginners should use default parameters when a function needs a fallback value.
Example: Default name
// Create a function with a default parameter.
function welcome(name = "Guest") {
// Print a welcome message.
console.log("Welcome, " + name + "!");
}
// Call without an argument.
welcome();
// Call with an argument.
welcome("Sara");
Output:Welcome, Guest!
Welcome, Sara!
Code Explanation: The default value is "Guest". When no argument is sent, JavaScript uses Guest. When "Sara" is sent, JavaScript uses Sara instead. This prevents missing values.
13.8 Rest Parameters
Rest parameters let a function accept many arguments.
They use three dots before a parameter name.
JavaScript collects the extra arguments into an array.
This is useful when you do not know how many values will be sent.
Rest parameters are common in math helpers and flexible functions.
Beginners should remember that rest parameters must come at the end.
Example: Add many numbers
// Use rest parameter to collect many numbers.
function addAll(...numbers) {
// Start total at 0.
let total = 0;
// Loop through all numbers.
for (let number of numbers) {
// Add each number to total.
total += number;
}
// Return final total.
return total;
}
// Call with many arguments.
console.log(addAll(1, 2, 3, 4));
Code Explanation: The rest parameter ...numbers collects all arguments into an array. The loop adds every number to total. The function returns the final total. The numbers 1, 2, 3, and 4 add up to 10.
13.9 Callback Functions
A callback function is a function passed into another function.
The receiving function can call it later.
Callbacks are very common in JavaScript.
They are used in events, timers, array methods, and asynchronous code.
A callback lets one function control when another function runs.
Beginners should learn callbacks because they are important for browser interaction.
Example: Function calls another function
// Create a callback function.
function sayDone() {
// Print a message.
console.log("Task completed!");
}
// Create a function that receives another function.
function runTask(callback) {
// Print first message.
console.log("Running task...");
// Call the callback function.
callback();
}
// Pass sayDone as a callback.
runTask(sayDone);
Output:Running task...
Task completed!
Code Explanation: The function sayDone is passed into runTask. Inside runTask, the parameter callback refers to that function. JavaScript prints Running task first. Then it calls the callback and prints Task completed.
13.10 Best Practices
Function best practices help keep code clean and easy to understand.
A function should usually do one clear job.
Use meaningful names that explain what the function does.
Keep functions short when possible.
Use parameters instead of repeating similar code.
Return values when the result needs to be reused later.
Example: Clear function name
// Good function name explains the job.
function calculateTax(price, taxRate) {
// Calculate tax amount.
return price * taxRate;
}
// Store the tax result.
let tax = calculateTax(100, 0.13);
// Print the tax.
console.log(tax);
Code Explanation: The function name calculateTax clearly explains the purpose. The parameters make the function reusable with different prices and tax rates. The function returns the calculated value. This is cleaner than repeating the same calculation many times.
Chapter 13 Summary
- Function declarations create named reusable functions.
- Function expressions store functions inside variables.
- Arrow functions are shorter modern functions.
- Parameters are input names inside a function.
- Arguments are real values sent to a function.
- Return values send results back from functions.
- Default parameters provide backup values.
- Rest parameters collect many arguments into an array.
- Callback functions are passed into other functions.
- Best practices keep functions clear, reusable, and easy to maintain.
