[JS] for in/of & enumerable,iterable

for in

• for in 반복문은 객체의 속성들을 반복하여 작업을 수행
• 모든 객체(배열도 객체)에서 사용이 가능
• for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않음.
• 자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들 있음
• 그 중 하나가 [[Enumerable]]이며, for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있음.
• 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않습니다.

특징 1

• 객체에 프로퍼티를 추가하면 프로퍼티와 함께 숨겨진 속성들이 추가로 저장됨.

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

console.log( Object.getOwnPropertyDescriptor(오브젝트, 'name') ); 

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

• enumerable: 셀 수 있는 - 이 속성이 false면 for in 반복문이 거름

특징 2

• 부모의 prototype에 저장된 것도 출력 함.
• hasOwnProperty(key) : key를 직접 가지고 있냐?(프로토타입 X)

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

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

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

// 싫으면 조건문 추가!
for (var key in 오브젝트) {
  if (오브젝트.hasOwnProperty(key)) {
    console.log(오브젝트[key]);
  }
}

• 이게 구문법 for-in의 단점

for-of

• for-in 과 유사

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

• 배열 뿐만 아니라 문자, argumennts, NodeList, Map, Set 자료형에 적용 가능.
• 정확히는 Iterable한 자료형들에만 가능.(Symbol.iterator 이라는 일종의 메소드를 가지고 있는 자료형)

😽 NodeList?

• 쿼리 셀렉터 등으로 요소 가져오면 대괄호 안에 담겨 온다.
• 이것은 배열이라고 안하고 노드리스트라고 부름.
• 노드리스트 안에 있는 html 요소들 하나씩 꺼내서 처리할 때 자주 쓰는 반복문.

응용해보기

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

• 키의 숫자를 없애라.

let newValue;
let newKey;

for (let item of products) {
  for (let key in item) {
     //마지막글자를 숫자로변환했을 때 NaN이 안나오면 (숫자면)
     if (isNaN(parseInt(key.slice(-1))) == false ) {
       newValue = item[key];
       newKey = key.slice(0, -1); 
       item[newKey] = newValue;
       delete item[key]; 
     }
  }
}

console.log(products)