|JavaScript | 반복문 for...in , for...of

for..in문

• 객체 안에 속성을 조회하는데 사용되는 반복문이다.
• 객체의 key와 value값을 뽑을 때 유용하게 사용된다. 
• 💡 배열에 사용될 경우에는 object이기 때문에 배열의 index가 출력된다. 

for(변수명 in 객체명){
  실행문;
}

 

❗️하지만 for ..in는 기본적으로 key 값만 출력한다❗️ 
< value값만 출력하기 위한 3가지 방법  >
console.log(value[변수명])
템플릿 리터널 사용 :  console.log(`${value[변수명]}`)
object 메스드 이용:  Object.values(객체명);

 

let 포켓몬 = {
        피카츄: 1,
        라이츄: 2,
        파이리: 3,
        꼬부기: 4,
        버터플: 5,
        야도란: 6,
        피죤투: 7,
        또가스: 8,
        메타몽: 9,
};

// key 값 출력
for (let pocketmon in 포켓몬) {
	console.log(pocketmon);
}
// 피카츄
// 라이츄
// 파이리
// 꼬부기
// 버터플
// 야도란
// 피죤투
// 또가스
// 메타몽

// value 값 출력
for ( let pocketmon in 포켓몬 ) {
	console.log(포켓몬[pocketmon]);
}

for (let pocketmon in 포켓몬) {
	console.log(`${포켓몬[pocketmon]}`);
}
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

 

💡 Object.keys()
주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다.

Object.keys(포켓몬);
// ['피카츄', '라이츄', '파이리', '꼬부기', '버터플', '야도란', '피죤투', '또가스', '메타몽']

 

💡 Object.values() 
전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴한다.

Object.values(포켓몬);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

💡 Object.entries()
for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다.

Object.entries(포켓몬);
//  ['피카츄', 10]
//  ['라이츄', 20]
//  ['파이리', 30]
//  ['꼬부기', 40]
//  ['버터플', 50]
//  ['야도란', 60]
//  ['피죤투', 70]
//  ['또가스', 80]
//  ['메타몽', 90]

---

 

for...of문 

• 배열을 순회하는데 사용되는 반복문 
• for 문을 써도 되지만 for ..of문이 가독성이 좋다. 
• 💡 객체에 사용될 경우에는 TypeError를 뱉어낸다

for(변수명 of 배열명 또는 []){
  실행문;
}

let 포켓몬 =['피카츄', '라이츄', '파이리', '꼬부기', '버터플', '야도란', '피죤투', '또가스', '메타몽'];

for ( let pocketmon of 포켓몬 ) {
	console.log(pocketmon);
}
// 피카츄
// 라이츄
// 파이리
// 꼬부기
// 버터플
// 야도란
// 피죤투
// 또가스
// 메타몽

// for..of문을 사용하여 완전 쉽게 거꾸로 출력할 수 있다!

let s='';
for(let i of 'hello world'){
    s=i+s;
}