<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//anonymous function
const func = function(){
console.log('inner code...1')
console.log('inner code...2')
console.log('inner code...3')
console.log('')
}
func()
func()
console.log(typeof func)
console.log(func)
//Declaration function
function func2 () {
console.log('inner code...1')
console.log('inner code...2')
console.log('inner code...3')
console.log('')
}
func2()
func2()
console.log(typeof func2)
console.log(func2)
//basic function
function f(x){
return x * x
}
console.log(f(3))
//differ from anonymous and Declaration function
// anonymous function
let anonymous
anonymous = function(){
console.log('first anonymous function')
}
anonymous = function(){
console.log('second anonymous function')
}
anonymous()
//Declaration function
Declaration()
function Declaration(){
console.log('first Declaration function')
}
// Combination of anonymous and Declaration function
func3 = function(){
console.log('anonymous function')
}
function func3() {
console.log('Declaration function')
}
func3()
</script>
<!-- differ block of Declaration function use -->
<script>
Declaration2()
function Declaration2(){
console.log('first Declaration function')
}
</script>
<script>
function Declaration2(){
console.log('second Declaration function')
}
</script>
<script>
Declaration2
</script>
</head>
<body>
</body>
</html>### Anonymous Function
- **Anonymous Function**: Assigned to `const func`. Anonymous functions are functions without a name. This function logs several messages to the console when called.
- `func()` is called twice, demonstrating that the function can be invoked like any named function.
- `typeof func` shows that `func` is a function, and `console.log(func)` prints the function's definition to the console.
### Function Declaration
- **Function Declaration (`func2`)**: A named function that logs similar messages. Function declarations are hoisted, meaning they are available in their entire scope from the start of the execution context.
- `func2()` is called twice, showing the same invocation behavior as the anonymous function.
- `typeof func2` and `console.log(func2)` provide output similar to the anonymous function, indicating it's a function and showing its definition.
### Basic Function
- A simple function `f(x)` that returns the square of its input. Demonstrates the most straightforward use of functions in JavaScript to perform operations.
### Differences Between Anonymous and Function Declarations
- **Reassigning Anonymous Functions**: Shows that anonymous functions can be reassigned. The variable `anonymous` initially points to a function that logs "first anonymous function", then is reassigned to log "second anonymous function". The final call to `anonymous()` invokes the second function definition.
- **Function Declaration Behavior**: `Declaration()` is called before its definition, utilizing function hoisting. JavaScript moves function declarations to the top of their scope before code execution.
### Combination of Anonymous and Function Declarations
- **Overriding Function Declarations with Anonymous Functions**: Initially, `func3` is declared as a function that logs "Declaration function". It's then reassigned to an anonymous function that logs "anonymous function". The final call to `func3()` invokes the anonymous function, showing that the anonymous function assignment overrides the function declaration.
### Function Declarations Across Script Tags
- **Cross-Script Function Declaration**: Demonstrates that function declarations are hoisted and available globally across script tags within the same HTML document. `Declaration2()` is defined in one `<script>` tag and redefined in another, with the second definition overriding the first. Due to the absence of a call to `Declaration2()` in the third `<script>` tag, there's no output associated directly with it, but it's implied that if called, it would log "second Declaration function" due to the overriding declaration.
### Key Takeaways
- **Anonymous vs. Named Functions**: This code illustrates the flexibility of function assignments, how they can be stored in variables, and how these variables can be reassigned to different function definitions. It also shows the differences in behavior between anonymous functions and function declarations, particularly in terms of hoisting and reassignment.
- **Function Hoisting**: Function declarations are hoisted, meaning they are processed before any code is executed, allowing them to be called before they are defined in the code.
- **Global Scope of Function Declarations**: Function declarations within different script tags but on the same HTML document have a global scope and can override each other, with later definitions taking precedence.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 5) expansion operator (2) | 2024.12.09 |
|---|---|
| chapter 5) fix name conflict issue (0) | 2024.12.08 |
| chapter 5) strict mode (0) | 2024.12.06 |
| chapter 5) Troubleshooting Using Immediately Called Functions (0) | 2024.12.05 |
| chapter 5) use to remaining parameters make array (0) | 2024.12.04 |