[ES6] 10. for in / for of

반복문

전 포스팅에서 배열에서 사용 가능한 forEach 메소드를 배웠었다

이번에는 객체에서 사용하능한 반복문을 알아볼 것이다

for in

Object 자료형에 저장된 자료들을 하나씩 꺼내고 싶을 때 사용

• emumerable (셀 수 있는) 한 것만 반복

var obj = { name : 'Kim', age : 30 };

for (var key in obj) {
  console.log(obj[key]);
} // Kim, 30

• 부모의 prototype 도 반복

class parent {}
parent.prototype.name = "Lee";
parent.prototype.age = 20;

var obj = new parent();

for (var key in obj) {
  console.log(obj[key]);
} // Kim, 30

만약 프로포타입까지 반복하고 싶지 않다면 hasOwnProperty을 사용하기

class parent {}
parent.prototype.name = "Lee";
parent.prototype.age = 20;

var obj = new parent();

for (var key in obj) {
	if (obj.hasOwnProperty(key)) 
		console.log(obj[key]);
} 

for of

iterable 한 자료형을 반복할 때 사용

• Array, 문자(string), arguments, NodeList(queryselectorAll/ getElementByClassName 으로 찾은 html 요소들) , Map, Set

ex) 구구단 예제

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i of data) {
  for (let j of data) {
    console.log(i + "x" + j);
  }
}

ex) 문자에서 숫자 찾기 예제

주어진 products 배열의 key 값에 숫자가 있으면 없애기

var products = [
  {
    name1 : 'chair',
    price1 : 7000,
  },
  {
    name2 : 'sofa',
    price : 5000,
  },
  {
    name1 : 'desk',
    price3 : 9000,
  },
]; 

정답

for (let item of products) {
  for (let key in item) {
    //console.log(key);
    if (/\d/.test(key)) {
      //console.log("숫자있음");
      let newKey = key.slice(0, -1);
      //console.log(newKey);
      item[newKey] = item[key];
      delete item[key];
      //console.log(item);
    }
  }
  console.log(products);

1. key 값에 숫자가 포함되어 있나 확인

2. true 면 newKey에 숫자를 제거한 key를 담음

 if (!isNaN(parseInt(key.slice(-1)))

isNaN도 사용 가능

• isNaN == true : 문자일 경우

3. 기존 오브젝트에 { newKey : newValue } 데이터를 추가

4. delete 키워드로 object에 있던 property 지우기