[JavaScript] for in 과 for of 반복문 그리고 enumerable, iterable 속성

for in 반복문

Object에 사용

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

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

특징

1. 셀수있는 것만 출력해줌(enumerable)

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

console.log( Object.getOwnPropertyDescriptor(오브젝트, 'name') ); 
//{value: "Kim", writable: true, enumerable: true, configurable: true}

enumerable이 true인 자료들만 for in 반복문이 출력가능

 

2. 부모의 prototype에 저장된 것도 출력

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

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

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

Park이라는 자료는 부모가 가지고 있는 것인데도 출력이됨

 

for of 반복문

array, 문자, arguments, NodeList, Map, Set 이라는 자료형에 적용할 수 있는 반복문

iterable인 자료형들에만 적용가능한 반복문

iterable한 자료형이 뭐냐면 [Symbol.iterator]() 이라는 일종의 메소드를 가지고 있는 자료형

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

 

---

case)

Q1. for of 반복문을 이용해서 2단부터 9단까지의 구구단을 콘솔창에 한번 출력하려면?

let 데이터 = [1,2,3,4,5,6,7,8,9]

let 데이터 = [1,2,3,4,5,6,7,8,9] 
for(let i = 2; i<10;i++){
  console.log(i+'단');
  for (var a of 데이터){
    console.log(i + '*' + a + '=' + (a*i));
  }
}

Q2.  key값 오타를 솎아내려면?

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

isNaN(parseInt('123')) 

 숫자형 문자인지 판단이 가능 숫자면 false 문자면 true

let 오브젝트 = {
  name1 : 'chair'
}

//마지막글자를 숫자로변환했을 때 NaN이 안나오면 (숫자면)
if (isNaN(parseInt('name1'.slice(-1))) == false ) {
    let newValue = 오브젝트['name1'];
    let newKey = 'name1'.slice(0, -1);  //맨 뒷 문자 제거 방법
    오브젝트[newKey] = newValue;

    delete 오브젝트['name1']; //원래있던 key 제거
}

console.log(오브젝트) //{name: "chair"}

 

1. name1 여기 가장 뒷자리 문자가 숫자인지 확인

2. 그게 숫자면 일단 newValue, newKey를 만들어줌

3. newKey는 맨 뒷 문자를 제거해줌. 그리고 기존 오브젝트에 { newKey : newValue } 데이터를 추가

4. 마지막으로 delete 키워드 쓰면 object에 있던 property 지울 수 있음

 

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)

Set 자료형

Array의 데이터 중복제거할때 주로 씀

var 출석부2 = new Set([ 'john' , 'tom', 'andy', 'tom' ]);

출석부2.add('sally'); //자료더하기 
출석부2.has('tom'); //자료있는지 확인
출석부2.size;  //자료 몇갠지 세기


var 출석부 = [ 'john' , 'tom', 'andy', 'tom' ];
var 출석부2 = new Set(출석부); //Array를 Set으로 바꾸기
출석부 = [...출석부2]  //Set을 Array로 바꾸기