You can think of iterative statements as having two uses.
- Simple repetition of code
- When you want to take out the data contained in the data type one by one Use.
Let’s look at the for in loop first.
For in loop is used for objects.
It is used when you want to take out the data stored in the Object data type one by one.
var obj = { name: "Kim", age: 28 };
for (var key in obj) {
console.log(obj[key]);
}
I use it like this.
(Key is a variable name. You can name it as you like.)
Then, the loop statement repeats as many times as the number of data inside the object.
Each time it is repeated, the key variable becomes the key value of the data, such as name and age.
Features of for in loop 1. Only enumerables are output
When you create object type
{ name : 'Kim' } If you save this, not only the data named Kim is saved.
3 secret properties are stored with Kim.
var obj = { name: "Kim", age: 28 };
console.log(Object.getOwnPropertyDescriptor(obj, "name"));
If you want to print out the three secret properties, you can use the above.
So what does this appear in the console window?
{value: "Kim", writable: true, enumerable: true, configurable: true}
These are the attributes secretly stored with Kim.
(So the Object data type is a bit heavy)
Here, there is something called enumerable, and only the data for which this is true can be output by the for in loop.
If you force this to false, the for in loop skips it.
Anyway, the for in loop statement has this principle of operation.
Features of the for in loop 2. It also outputs what is stored in the parent’s prototype.
The properties of the object’s parent’s gene are also output as a loop statement.
Let’s try to see if it’s real.
class parent {}
parent.prototype.name = "Park";
var obj = new parent();
for (var key in obj) {
console.log(obj[key]);
}
The data called Park is printed even though the parent has it.
This is the downside.
If you don’t like this, you need to add an if statement.
class parent {}
parent.prototype.name = "Park";
var obj = new parent();
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key]);
}
}
A function called object.hasOwnProperty()
This function asks if the object has this key value directly.
Returns true if yes, false if not.
So if you want to iterate only what I have, you must use this.
for of loop
Let’s try it. Very similar to a for in loop.
var arr = [2, 3, 4, 5];
for (var doc of arr) {
console.log(doc);
}
In this way, all the data in the array can be output to the console window one by one.
as well as the array data type.
It is a loop statement that can be applied to data types such as array, character, arguments, NodeList, Map, and Set.
However, to be precise, it is a loop statement that can only be applied to iterable data types.
What is an iterable datatype?
It refers to data types that have a kind of method called Symbol.iterator.
var arr = [2, 3, 4, 5];
console.log(arr[Symbol.iterator]());
If you attach it after the array data type, something will be printed out, right?
So are the texts.
In fact, it is a kind of function that helps output loop statements, but it is not practical, so you do not need to understand it deeply.
You just need to know that if you have this, you can use a for of loop.
for of can also be used in NodeList.
The elements we commonly find with selectors such as document.getElementsByClassName() or document.querySelectorAll() [] It is contained in square brackets, but it is not an array, but a data type called NodeList.
When you take out and process HTML elements in NodeList one by one
You can think of it as a repeat statement that can be used very often. (But note the compatibility of for of)
Practice
Q1. Using the for of loop
Try printing the multiplication table from 2nd to 9th in the console window.
2 x 1 = 2
2 x 2 = 4
…
9 x 9 = 81
You can print these characters up to 9 columns.
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
Q2. Someone mixed up a typo at the end of the key value.
var products = [
{
name123: "chair",
price11: 7000,
},
{
name2000: "sofa",
price: 5000,
},
{
name123: "desk",
price3: 9000,
},
];
If there is a single digit at the end of the key value, I want to remove all of them.
How can I code it?
I’ll have to figure out how to determine if the last letter is a number.
(examle) in the objects in the array
name1 : 'chair' this
name: 'chair' Only the numbers should disappear neatly like this.
Answer
Q1
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 2; i < 10; i++) {
for (let data of arr) {
console.log(`${i} X ${data} = ` + i * `${data}`);
}
}
Q2
Key point
Number.isNaN()
let resultStr = [];
let newKey;
let newValue;
for (let product of products) {
for (let el in product) {
let elSplit = el.split("");
for (let str of elSplit) {
if (Number.isNaN(Number(str))) {
resultStr.push(str);
}
}
newValue = product[el];
delete product[el];
product[[resultStr.join("")]] = newValue;
resultStr = [];
}
}
console.log(products);
