<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//basic
function earnings(name, wage = 8590, hours = 40){
console.log(`${name} information`)
console.log(`hour pay : ${wage}won`)
console.log(`work time : ${hours} hour`)
console.log(`total pay : ${wage * hours}won`)
console.log('')
}
earnings('cloud')
earnings('star',10000)
earnings('insung',10000,52)
//expansion operator
function sample(...items){
console.log(items)
}
const array = [1,2,3,4]
console.log('do not use expansion operator')
sample(array)
console.log('use expansion operator')
sample(...array)
</script>
</head>
<body>
</body>
</html>### Default Parameters in Functions
The `earnings` function calculates and logs an employee's earnings information. It takes three parameters: `name`, `wage`, and `hours`. The latter two have default values of `8590` (interpreted as hourly wage in won) and `40` (hours worked), respectively.
- **First Call**: `earnings('cloud')` only specifies the `name` parameter. Since `wage` and `hours` are not provided, the function uses their default values. This results in calculating the total pay based on a wage of `8590won` and `40` hours.
- **Second Call**: `earnings('star', 10000)` specifies both `name` and `wage`, but leaves `hours` to default. The calculation uses the provided `10000won` wage and default `40` hours.
- **Third Call**: `earnings('insung', 10000, 52)` specifies all three parameters, using these values for the calculation without any defaults.
This section illustrates how default parameters can simplify function calls, especially when many parameters often have common values.
### Spread Operator
The `sample` function and subsequent calls demonstrate the use of the spread operator (`...`) to handle function parameters.
- **`sample` Function**: It logs the `items` parameter to the console. `items` is an array containing all arguments passed to the function, thanks to the spread operator used in the function definition.
- **First `sample` Call Without Spread Operator**: When `sample(array)` is called without using the spread operator, the entire `array` is passed as a single argument. As a result, `items` becomes an array within an array (`[[1,2,3,4]]`).
- **Second `sample` Call With Spread Operator**: `sample(...array)` uses the spread operator to "spread out" the `array` elements as individual arguments to the `sample` function. This results in `items` directly containing the array elements (`[1,2,3,4]`), not the array itself.
### Output
- The earnings function calls will log information about each employee's wage, hours worked, and total pay to the console, demonstrating how different arguments can lead to different outputs.
- The sample function calls will show the difference in handling arrays with and without the spread operator:
- Without the spread operator, the function receives the array as a single argument, nesting it within another array.
- With the spread operator, the function receives each element of the array as individual arguments, preserving the original array structure in the `items` parameter.
This document showcases useful JavaScript features for writing flexible and concise code, particularly in handling functions with variable numbers of arguments and defaults.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 6) method inside of this keyword (0) | 2024.12.11 |
|---|---|
| chapter 5) callback (1) | 2024.12.10 |
| chapter 5) fix name conflict issue (0) | 2024.12.08 |
| chapter 5) function_type (0) | 2024.12.07 |
| chapter 5) strict mode (0) | 2024.12.06 |