<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// declarative function
function callThreeTimes (callback){
for (let i = 0; i< 3; i++){
callback(i)
}
}
function print(i){
console.log(`${i} call of function`)
}
callThreeTimes(print)
// anonymous function
function callThreeTimes2(callback){
for (let i = 0; i < 3; i++){
callback(i)
}
}
callThreeTimes2(function(i) {
console.log(`${i} call of function`)
})
</script>
</head>
<body>
</body>
</html>
### Declarative Function Example
- **`callThreeTimes` Function**: This is a higher-order function because it takes another function as its argument (`callback`). It runs a loop three times, calling the `callback` function on each iteration with the current index `i` as its argument.
- **`print` Function**: A simple function that logs the current iteration number to the console, appending "call of function" to it.
- **Usage**: `callThreeTimes(print)` calls `callThreeTimes` with `print` as the callback function. This results in `print` being executed three times, logging "0 call of function", "1 call of function", and "2 call of function" to the console.
### Anonymous Function Example
- **`callThreeTimes2` Function**: Structurally identical to `callThreeTimes`, this function again expects a callback and executes it three times within a loop.
- **Usage with an Anonymous Function**: `callThreeTimes2(function(i) {...})` demonstrates calling `callThreeTimes2` with an anonymous function as the argument. This anonymous function is defined directly in the call and performs the same logging action as the `print` function in the first example.
- The anonymous function directly encapsulates the functionality without the need to define it elsewhere. It's defined at the point of calling `callThreeTimes2`, making it clear what the function does in the context of its usage.
### Output
Both approaches produce the same output to the console:
- "0 call of function"
- "1 call of function"
- "2 call of function"
This is logged twice: once for each way the `callThreeTimes` and `callThreeTimes2` functions are called, demonstrating how functions can be passed as arguments and executed multiple times or in different contexts within JavaScript.
### Key Takeaways
- **Callback Functions**: This code illustrates how callback functions allow for flexible code reuse and abstraction. Callbacks are fundamental in JavaScript for handling asynchronous operations, iterating with custom actions, and more.
- **Declarative vs. Anonymous Functions**: The first example uses a named function (`print`), which can be reused elsewhere. The second uses an anonymous function for a one-off operation, directly embedding the logic where needed without cluttering the global scope with extra function names.
- **Higher-Order Functions**: Functions like `callThreeTimes` and `callThreeTimes2` that take other functions as arguments or return functions are called higher-order functions. They are a powerful concept in functional programming, allowing for functional composition and other advanced patterns.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 6) href of output script (0) | 2024.12.12 |
|---|---|
| chapter 6) method inside of this keyword (0) | 2024.12.11 |
| chapter 5) expansion operator (2) | 2024.12.09 |
| chapter 5) fix name conflict issue (0) | 2024.12.08 |
| chapter 5) function_type (0) | 2024.12.07 |