<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let number = 10
number ++
alert(number)
let number1 = 10
alert(number1++)
alert(number1++)
alert(number1++)
let number2 = 10
alert(number2); number2 += 1
alert(number2); number2 += 1
alert(number2); number2 += 1
let number3 = 10
alert(++number3)
alert(++number3)
alert(++number3)
let number4 = 10
alert(number4++)
alert(++number4)
alert(number4--)
alert(--number4)
//증감 연산자를 한 줄에 하나만 사용한 예
let number5 = 10
alert(number5)
number5++
number5++
alert(number5)
alert(number5)
number5--
number5--
alert(number5)
</script>
</head>
<body>
</body>
</html>### Script Overview
- **First Example**: Demonstrates simple post-increment.
- `number` is initially `10`, then incremented by 1 using `number++`. The `alert` shows `11`.
- **Second Example**: Shows post-increment's effect when used before an `alert`.
- `number1` starts at `10`, but `alert(number1++)` shows `10` because it returns the value before incrementing. Subsequent `alert` calls show `11` and then `12`, as `number1` is incremented after each value is returned.
- **Third Example**: Similar effect as the second example but increments `number2` explicitly using `number2 += 1`.
- Shows the current value of `number2`, then increments it. Each `alert` shows the value after the increment, demonstrating how `number2 += 1` directly modifies the value before it is displayed.
- **Fourth Example**: Uses pre-increment to show the incremented value immediately.
- For `number3`, each `alert` shows the value after it has been incremented (`11`, `12`, `13`), because `++number3` increments the value before returning it.
- **Fifth Example**: Combines post- and pre-increment/decrement to demonstrate their immediate and deferred effects.
- Initially, `alert(number4++)` shows `10`, then `alert(++number4)` increments and shows `12` (since `number4` was `11` after the post-increment). `alert(number4--)` shows `12` (before decrement), and `alert(--number4)` decrements and shows `10`.
- **Sixth Example**: Uses increment and decrement operators separately from `alert` calls.
- This demonstrates a clear sequence where `number5` is incremented twice (from `10` to `12`), shown via an `alert`, then decremented twice, and shown again. This pattern avoids the confusion of combining the operation and display in a single statement, making it easier to understand the direct impact of these operators.
### Key Takeaways
- **Post-increment/decrement (`var++`/`var--`)**: Returns the current value of the variable, then increments/decrements it.
- **Pre-increment/decrement (`++var`/`--var`)**: Increments/decrements the variable first, then returns its new value.
- Using these operators directly before or after a value is displayed (`alert` in these examples) can lead to confusion because of the difference in when the increment/decrement operation takes effect relative to the value's use or display. Separating the operation from its display (as in the sixth example) can help clarify the effect of these operations.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 3) Using switch conditional statements (0) | 2024.11.26 |
|---|---|
| chapter 3) Using if conditional statements (0) | 2024.11.25 |
| chapter 2) Understanding ball expressions (0) | 2024.11.23 |
| chapter 2) Using compound assignment operators (0) | 2024.11.22 |
| chapter 1) basic Javascript (0) | 2024.11.21 |