[Javascript] 반복문

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

for 문
코드 여러번 반복하여 실행할 때
어
forEach() - Array 전용
for...in - Object 전용

let obj = { name : 'Kim', age : 30 };
for(let key in obj){
	console.log(obj[key])
}

for...in:
1. enumerable 한 것만 반복(출력) 가능

객체를 만들 때 숨겨진 데이터를 출력하려면,

Object.**getOwnPropertyDescriptor(obj, 'name')**
// {value: "Kim", writable: true, enumerable: true, configurable: true} 
// 몰래 저장되는 속성들이 있다.(writable, enumerable, configurable)

여기서 enumerable은 셀 수 있는 지 여부,
즉 반복문에서 출력할 것인지 여부를 알 수 있다.

2. 부모의 prototype도 반복(출력)해준다.

그래서 내가 직접 가지고 있는 값만 반복시키고 싶다면,

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

hasOwnProperty(key) 내장함수:
내가 key라는 값을 직접 가지고 있는지 확인해주는 함수

• 갖고 있으면 true, 없으면 false
• 내가 가진 것만 반복시키고 싶다면 이 내장함수를 꼭 써야 함

3. Object 자료형에만 쓴다.

for...of:

1. Array, String, arguments, NodeList, Map, Set에서 사용

let array = [2,3,4,5];

for(let data of array){
	console.log(data)
}


for(let data of 'hello'){
	console.log(data)
}

2. iterable한 자료형에만 사용가능!

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

array[Symbol.iterator]();
'hello'[Symbol.iterator]();
// 이게 있으면 iterable한 자료형임

document.querySelectorAll()
document.getElementsByClassName()
// [HTML1, HTML2] >> NodeList
// NodeList도 for...of 쓸 수 있다.

연습:
1.for...of 반복문을 이용해서
2단부터 9단까지의 구구단을 콘솔창에 한번 출력

let 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} = ${i*j}`)
    }
}

연습:

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

• key값 마지막 문자에 한자릿수 숫자가 섞여있으면 그걸 다 제거할 것

• (예시):
  array안의 object안에 들어있는
  name1 : 'chair' 이게
  name : 'chair' 이렇게 숫자만 깔끔하게 없어져야 한다.

1. name1 (여기 가장 뒷자리) 문자가 숫자인지 확인
2. 그게 숫자면 일단 newValue, newKey를 만들어준다.
3. newKey는 맨 뒷 문자를 제거 후,
4. 기존 오브젝트에 { newKey : newValue } 데이터를 추가
5. 마지막으로 delete 키워드 쓰면 object에 있던 property 지울 수 있다.

let sample = {
	name1: 'chair'
}
// 마지막 글자를 숫자로 변환했을 때
// NaN이 안나오면(숫자면)
if(isNaN(parseInt('name1'.slice(-1))) == false){
	let newValue = sample['name1'];//새로운 변수에 값 대입
  	let newKey = 'name1'.slice(0,-1) //맨 뒷 문자 제거 방법
    sample[newKey] = newValue;
  	delete sample['name1']; // 원래 있던 key 제거
}

console.log(sample)

그렇다면 이제, 여러 키:값을 가진 객체 products로 확대해서 코드를 짜보면,

let newValue;
let newkey;

for(let item of products){ // array
	for(let key in item){ // object
    	// 마지막 글자를 숫자로 변환했을 때, 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)

참고:
(MDN) isNaN() 함수