반복문

반복문이란 ?

• 특정 명령을 반복해서 수행 하는 행위

for 반복문 사용법

• for문은 배열에 한번씩 접근할때 사용

for (let i = 1; i <= 100; i++) {
	//반복 수행할 명령어
	console.log("반복하세요");
}

//결과값 : 반복하세요 100번 출력

객체를 키값 순회하는법

let person = {
  name : "비밀",
  tall : 200,
  age : 24
}

const personKey = Object.keys(person); // 오브젝트 키 함수에 객체자체를 넣어준다.
console.log(personKey);

for(var i = 0; i < personKey.length; i++) {
  console.log(personKey[i]);
}

객체를 value값 순회하는법

let person = {
  name : "비밀",
  tall : 200,
  age : 24
}

const personValue = Object.values(person); // 오브젝트 키 함수에 객체자체를 넣어준다.
console.log(personValue);

for(var i = 0; i < personValue.length; i++) {
  console.log(personValue[i]);
}

객체를 value값 보는법(for in) - 2

let person = {
  name : "비밀",
  tall : 200,
  age : 24
}

for(let x in person) {
  console.log(person[x]);
}

객체의 key 와 value 값 보이는법

let person = {
  name: "비밀",
  tall: 200,
  age: 24
};

const personKey = Object.keys(person); // 오브젝트 키 함수에 객체자체를 넣어준다.
console.log(personKey);

for (var i = 0; i < personKey.length; i++) {
  const currentKey = personKey[i];
  const currentValue = person[currentKey];

  console.log(`${currentKey} :  ${currentValue}`);
}

예제문제

아래 html name안에 상품명 및 가격을 바꾸세요

HTML
<div class="container mt-3">
        <div class="card p-3">
            <span class="name">상품명</span>
            <span class="price">가격</span>
        </div>
        <div class="card p-3">
            <span class="name">상품명</span>
            <span class="price">가격</span>
        </div>
        <div class="card p-3">
            <span class="name">상품명</span>
            <span class="price">가격</span>
        </div>
    </div>

배열
let person = [
        {
            id : 1,
            car : "car1",
            car2 : "car2",
            name : "JoYoonHoo1",
            price : 5000
        },
        {
            id : 2,
            car : "car1",
            car2 : "car2",
            name : "JoYoonHoo2",
            price : 6000
        },
        {
            id : 3,
            car : "car1",
            car2 : "car2",
            name : "JoYoonHoo3",
            price : 7000
        }
    ]

for문

for (let i = 0; i < person.length; i++) {
	document.querySelectorAll(".name")[i].innerHTML = person[i].name;
	document.querySelectorAll(".price")[i].innerHTML = person[i].price;
}
    
for in 문

for (let data in person) {
	document.querySelectorAll(".name")[data].innerHTML = person[data].name;
    document.querySelectorAll(".name")[data].innerHTML = person[data].price;
}