JavaScript Functions
Functions are reusable blocks of code that perform specific tasks. They are the building blocks of JavaScript programming.
🤔 What are Functions?
A function is a block of code designed to perform a particular task. Functions are executed when they are called (invoked).
Why Use Functions?
- Code Reusability - Write once, use multiple times
- Modularity - Break complex problems into smaller parts
- Readability - Makes code easier to understand
- Maintainability - Easier to debug and update
💡 Function Anatomy
function functionName(parameters) {
// function body
return value; // optional
}Key Terms:
Parameters - Variables listed in function definition
Arguments - Actual values passed to function
Return - Value sent back from function
📝 Basic Function Syntax
There are several ways to define functions in JavaScript. Let's start with the basic function declaration.
Function Declaration
function name(params) {
// code
}Function Expression
const name = function(params) {
// code
};Arrow Function
const name = (params) => {
// code
};✨ Different Function Types
JavaScript offers multiple ways to define functions, each with its own use cases.
📌 Function Declaration vs Expression
- Declarations are hoisted, expressions are not
- Arrow functions don't have their own
this - Arrow functions are great for callbacks
🎯 When to Use What
- Use declarations for main functions
- Use expressions for dynamic assignments
- Use arrow functions for concise callbacks
🔧 Function Parameters
Modern JavaScript provides flexible ways to handle function parameters.
Default Parameters
function greet(name = "Guest") {
return `Hello, ${name}!`;
}Rest Parameters
function sum(...numbers) {
// numbers is an array
}Destructuring
function user({name, age}) {
// use name and age
}🚀 Higher-Order Functions
Functions that operate on other functions, either by taking them as arguments or by returning them.
🎯 Real-world Use Cases:
- Event handlers - Functions passed as callbacks
- Array methods -
map,filter,reduce - Middleware - In frameworks like Express.js
- Decorators - Wrapping functions with additional behavior
🌀 Recursive Functions
A recursive function is a function that calls itself until a base condition is met.
⚠️ Important Notes:
- Always have a base case to stop recursion
- Recursive calls should move toward the base case
- Deep recursion may cause stack overflow
- Some problems are naturally recursive (tree traversal, factorial)
🎮 Practice Exercise
Try implementing the calculator function. Modify the code below to make it work correctly.
💪 Challenges:
- Complete the calculator function
- Add support for more operations (modulus, power)
- Make it work with any number of arguments for addition
- Add validation for all inputs
📋 Quick Reference
Function Types:
function name() {}- Function declarationconst name = function() {}- Function expressionconst name = () => {}- Arrow functionconst name = () => value- Implicit return
Common Patterns:
function(...args)- Rest parameters(param = defaultValue)- Default parametersreturn function() {}- Higher-order functionfunction func() { return func() }- Recursive function
