반복문 총정리

🔎 반복문의 용도

1. 코드 단순 반복
2. 자료형에 담긴 자료들을 하나씩 꺼내고 싶을 때

🧺 for in 반복문

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

var 오브젝트 = { name : 'Kim', age : 30 };

for (var key in 오브젝트) {
  console.log(오브젝트[key]);
}

// 출력: Kim  30 

특징 1. enumerable한 것만 출력해준다

object 자료형을 만들 때 { name : 'Kim' }을 저장하면 Kim 이라는 자료만 달랑 저장되는게 아니라 Kim과 함께 비밀스러운 속성들 3개가 저장된다.

var 오브젝트 = { name : 'Kim' };
console.log( Object.getOwnPropertyDescriptor(오브젝트, 'name') ); 

// 출력: {value: "Kim", writable: true, enumerable: true, configurable: true} 

여기서 enumerable이라는 속성이 있는데 이게 true인 자료들만 for in 반복문이 출력해준다.

특징 2. 부모의 prototype에 저장된 것도 출력해준다

class 부모 {}
부모.prototype.name = 'Park'; // 부모의 유전자에 name = 'Park' 저장

var 오브젝트 = new 부모();

for (var key in 오브젝트) {
  console.log(오브젝트[key]);
}
// 출력 : Park

단점이 될 수도 있는데 Park이라는 자료는 부모가 가지고 있는 것인데도 출력해준다.

내가 가진 것만 반복시키고 싶다면 아래와 같이 hasOwnProperty()라는 함수를 사용해주면 된다.

class 부모 {}
부모.prototype.name = 'Park';

var 오브젝트 = new 부모();

for (var key in 오브젝트) {
  if (오브젝트.hasOwnProperty(key)) {
    console.log(오브젝트[key]);
  }
}
// 아무것도 출력되지 않는다.

---

🧳 for of 반복문

iterable인 자료형에 저장된 자료들을 하나씩 꺼내고 싶을 때 사용한다.

var 어레이 = [2,3,4,5];
for (var 자료 of 어레이) {
  console.log(자료);
}

for in 반복문과 매우 유사하지만 Array 자료형 뿐만 아니라 Array, 문자, arguments, NodeList, Map, Set 자료형에 적용할 수 있는 반복문이다.

※ iterable한 자료형은 [Symbol.iterator]() 이라는 일종의 메소드를 가지고 있는 자료형들을 뜻한다.

---

✍🏻 연습 문제

Q. key값 마지막 문자에 한자릿수 숫자가 섞여있으면 그걸 다 제거하고 싶을때 어떻게 코드를 짜면 될까요?

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

A.

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

  for (let item in products) {
    for (let key in item) {
      if (isNaN(parseInt(key.slice(-1))) == false) {
        let newValue = item[key];
        let newKey = key.slice(0, -1);
        item[newKey] = newValue;

        delete item[key];
      }
    }
  }

isNaN(parseInt(X))를 했을 때 X 자리에 숫자가 들어가면 false가 나오고 문자가 들어가면 true가 나온다. 따라서 key 값의 마지막 문자가 숫자인지 확인해서 숫자면 newValue, newKey를 만들어준다. 그리고 newKey는 맨 뒷 문자를 제거해준다. 그리고 기존 오브젝트에 { newKey : newValue } 데이터를 추가해주고 delete 키워드를 써서 object에 있던 property를 삭제해준다.