What Are Advanced Functions?
Once you understand basic functions, JavaScript offers more powerful features that make your code shorter, cleaner, and more flexible. Advanced functions include arrow functions, default parameters, rest parameters, and callbacks—tools that professional developers use daily.
Why learn advanced functions?
- Write less code while achieving more functionality
- Improve code readability and maintainability
- Handle a variable number of function inputs efficiently
- Work seamlessly with modern JavaScript libraries and frameworks
- Prepare for asynchronous programming patterns
Arrow Functions: Modern JavaScript Syntax
Arrow functions are a shorter, more concise way to write functions. Introduced in ES6 (2015), they've become the standard in modern JavaScript.
Arrow Function Syntax
javascript
// Traditional function
function add(a, b) {
return a + b;
}
// Arrow function (shorter!)
const add = (a, b) => {
return a + b;
};
// Even shorter (one-line return)
const add = (a, b) => a + b;
Components:
- const functionName – Stores the function in a variable
- = – Assignment operator
- (parameters) – Parameters passed to the function
- => – Fat arrow syntax that replaces the
functionkeyword - { } – Function body (optional for single-line expressions)
Example 1: Basic Arrow Function
javascript
// Traditional function
function greet(name) {
return "Hello, " + name;
}
// Arrow function
const greet = (name) => {
return "Hello, " + name;
};
// Shortest form (one parameter, one return)
const greet = name => "Hello, " + name;
console.log(greet("Alice")); // Hello, Alice
Example 3: Arrow Functions with Multiple Parameters
// Calculate rectangle area
const calculateArea = (length, width) => length * width;
console.log(calculateArea(5, 10)); // 50
console.log(calculateArea(7, 3)); // 21
// With multiple lines
const calculateVolume = (length, width, height) => {
let area = length * width;
let volume = area * height;
return volume;
};
console.log(calculateVolume(5, 4, 3)); // 60
Arrow Function Shortcuts
javascript
// One parameter - parentheses optional
const square = x => x * x;
console.log(square(5)); // 25
Default Parameters: Fallback Values
Default parameters provide automatic fallback values when arguments aren't provided. This prevents undefined errors and makes functions more flexible.
Default Parameter Syntax
javascript
function function Name(param1 = defaultValue1, param2 = defaultValue2) {
// Function body
}
Example 1: Simple Default Parameter
javascript
// Without default
function greet(name) {
console.log("Hello, " + name);
}
greet(); // Hello, undefined (bug!)
// With default
function greet(name = "Guest") {
console.log("Hello, " + name);
}
greet(); // Hello, Guest
greet("Alice"); // Hello, Alice
Example 2: Multiple Default Parameters
javascript
function orderCoffee(size = "medium", type = "regular", milk = "whole") {
console.log(`You ordered a ${size} ${type} coffee with ${milk} milk`);
}
orderCoffee(); // medium regular coffee with whole milk
orderCoffee("large"); // large regular coffee with whole milk
orderCoffee("small", "latte"); // small latte coffee with whole milk
orderCoffee("large", "cappuccino", "almond"); // large cappuccino coffee with almond milk
Rest Parameters: Variable Number of Arguments
Rest parameters allow functions to accept any number of arguments as an array. The three dots (...) gather remaining arguments.
Rest Parameter Syntax
javascript
function functionName(...restParam) {
// restParam is an array of all arguments
}
Example 1: Sum Any Number of Values
javascript
function sum(...numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(10, 20, 30, 40)); // 100
Anonymous Functions and Callbacks
<p>Anonymous functions are functions without a name. Callbacks are functions passed as arguments to other functions. These concepts are fundamental to JavaScript.
</p>
Anonymous Functions
javascript
// Named function
function greet() {
console.log("Hello!");
}
// Anonymous function assigned to variable
const greet = function() {
console.log("Hello!");
};
// Anonymous arrow function
const greet = () => {
console.log("Hello!");
};
What Are Callbacks?
A callback is a function passed as an argument to another function, which then executes it. Think of it like giving someone your phone number to call you back later.
- Handle asynchronous operations such as waiting for data
- Customize function behavior dynamically
- Process and transform items within arrays efficiently
- Respond to events like user clicks, timers, and system actions
Example 1: Simple Callback
javascript
// Function that takes a callback
function doSomething(callback) {
console.log("Doing something...");
callback(); // Call the function passed in
}
// Pass a function as callback
doSomething(function() {
console.log("Callback executed!");
});
// Output:
// Doing something...
// Callback executed!
Example 2: Callback with Parameters
javascript
function processNumber(num, callback) {
console.log("Processing number: " + num);
let result = callback(num);
console.log("Result: " + result);
}
// Pass different callbacks for different operations
processNumber(5, function(n) {
return n * 2;
});
// Processing number: 5
// Result: 10
processNumber(5, function(n) {
return n * n;
});
// Processing number: 5
// Result: 25