<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//for in
const todos = ['buy milk', 'check work Email', 'doing pilates']
for (const i in todos){
console.log(`${i} : ${todos[i]}`)
}
//for of
const todos2 = ['buy milk', 'check work Email', 'doing pilates']
for (const todo of todos2){
console.log(`doing : ${todo}`)
}
//basic for
for (let i =0; i<5; i++){
console.log(`${i} repeat`)
}
//for + array
const todos3 = ['buy milk', 'check work Email', 'doing pilates']
for(let i = 0 ; i< todos3.length;i++){
console.log(`${i} : ${todos3[i]}`)
}
//reverse for + array
const todos4 = ['buy milk', 'check work Email', 'doing pilates']
for (let i =todos.length - 1; i>=0; i--){
console.log(`${i} : ${todos4[i]}`)
}
</script>
</head>
<body>
</body>
</html>### `for...in` Loop
- Iterates over the indices (keys) of the `todos` array.
- Logs the index and corresponding value of each element in the array.
- Example output: `0 : buy milk`, indicating that `0` is the index and `buy milk` is the value at that index.
- Note: While `for...in` loops can iterate over array indices, they are generally not recommended for arrays because they iterate over all enumerable properties, including those inherited through the prototype chain.
### `for...of` Loop
- Iterates directly over the elements (`todo`) of the `todos2` array.
- Logs a string including each element.
- Example output: `doing : buy milk`, showing direct access to each element's value without needing to use an index.
- `for...of` loops are ideal for iterating over array elements when you need the value of each element and don't care about the index.
### Basic `for` Loop
- A traditional `for` loop that initializes a counter (`i`), checks a condition (`i < 5`), and increments the counter (`i++`) with each iteration.
- Logs the current value of `i` followed by the word `repeat`.
- Example output: `0 repeat`, indicating each iteration's counter value.
- This loop demonstrates the basic structure and flexibility of `for` loops for any repetitive task, not limited to iterating over arrays.
### `for` Loop with Array
- Similar to the basic `for` loop, but iterates over the `todos3` array's length.
- Logs the index and value of each element, similar to the `for...in` loop, but using a traditional `for` loop's syntax.
- This approach provides precise control over iteration and is ideal for array operations, especially when indices are needed.
### Reverse `for` Loop with Array
- Iterates over the `todos4` array in reverse order by initializing `i` to the last element's index and decrementing `i` until it reaches `0`.
- Logs the index and value of each element in reverse order.
- This loop is useful when you need to iterate through an array from the end to the beginning, which can be particularly handy for certain algorithms or when removing elements from an array during iteration.
### Note on Console Output
The document uses `console.log` to output each loop's results, which means you will see the output in the browser's developer console (accessible usually by pressing F12 or right-clicking the page and selecting "Inspect" or "Inspect Element", then navigating to the "Console" tab). This approach is useful for debugging or when you want to output information in a development environment rather than displaying it directly on the webpage.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 5) use to remaining parameters make array (0) | 2024.12.04 |
|---|---|
| chapter 5) arguments (0) | 2024.12.03 |
| chapter 4) while (0) | 2024.12.01 |
| chapter 4) continue (0) | 2024.11.30 |
| chapter 4) break (0) | 2024.11.29 |