Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
When a callback function runs, it often receives data from the function that called it. Understanding what parameters your callback gets is crucial!
array.map(callback), the callback receives 3 parameters: the current value, the index, and the full array!Most array methods pass 3 parameters to callbacks:
The item being processed
Position in the array
The entire array
Understanding what forEach passes to your callback
Use only what you need - name them clearly!
map also gives you value, index, and array!
const prices = [10, 20, 30];
// Using just the value
const doubled = prices.map(function(price) {
return price * 2;
});
console.log(doubled); // [20, 40, 60]
// Using value and index
const labeled = prices.map(function(price, index) {
return `Item ${index + 1}: $${price}`;
});
console.log(labeled);
// ['Item 1: $10', 'Item 2: $20', 'Item 3: $30']Use callback data to decide what to keep
Event listeners receive an event object with lots of useful information!
// HTML: <button id="myBtn">Click Me</button>
const button = document.getElementById('myBtn');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type);
console.log('Target element:', event.target);
console.log('Mouse X:', event.clientX);
console.log('Mouse Y:', event.clientY);
});
// When clicked, you get all this data!Interactive Example
const input = document.getElementById('username');
const info = document.getElementById('info');
input.addEventListener('input', function(event) {
// The event has target.value!
const value = event.target.value;
const length = value.length;
// Update the display
let message = 'Value: "' + value + '"<br>';
message += 'Length: ' + length + ' characters<br>';
if (length === 0) {
message += '<span style="color: #94a3b8;">Start typing...</span>';
} else if (length < 3) {
message += '<span style="color: #f59e0b;">⚠️ Too short (minimum 3)</span>';
} else {
message += '<span style="color: #10b981;">✅ Long enough!</span>';
}
info.innerHTML = message;
});<div class="container">
<h2>Username Input</h2>
<p>Type a username to see the event data:</p>
<input
type="text"
id="username"
placeholder="Enter username..."
class="input-field"
/>
<div id="info" class="info-box">
<span style="color: #94a3b8;">Start typing...</span>
</div>
</div>When you write functions that accept callbacks, YOU choose what data to pass!
function processOrder(orderId, callback) {
// Simulate processing...
const result = {
orderId: orderId,
status: 'completed',
total: 99.99
};
// Call the callback with result data
callback(result);
}
// Use it
processOrder(12345, function(orderResult) {
console.log('Order:', orderResult.orderId);
console.log('Status:', orderResult.status);
console.log('Total:', orderResult.total);
});
// Output:
// Order: 12345
// Status: completed
// Total: 99.99Common Node.js pattern: error first, data second
Passing several pieces of data to callbacks