[JS] for of 과 for in

🚀 in ?

in 연산자는 객체 내 특정 프로퍼티가 존재하는지 여부를 확인한다.

const person ={
    name:'delina',
    age:24
};

console.log('name' in person);  //true 
console.log('address' in person);  //false

 

name 프로퍼티는 person객체에 있으므로 true,

address 프로퍼티는 person객체에 없으므로 false

 

 

🚀 for in ?

객체의 모든 프로퍼티를 순회하며 열거하기 위해 사용한다.

 

const person ={
    name:'delina',
    age:24
};

for (const key in person){
    console.log(key +':'+person[key]);
}

 

- 이때 기본적으로 key값이 출력 된다는 점을 알아두자. 

- person객체는 2개의 프로퍼티가 있으므로 2번 순회한다.

 

 

* 기본적으로 배열 요소의 인덱스(key)에 접근한다.

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

// key 값 출력 
for ( let pocketmon in pocketmons) {
	console.log(pocketmon);
}

// value 값 출력
for ( let pocketmon in pocketmons) {
	console.log(`${pocketmons[pocketmon]}`);
}

 

 

 

*  정확히말하자면 for ... in문은 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중

  프로퍼티 어트리뷰트 값이 true인 프로퍼티를 순회하며 열거한다.

 

-> 아직 프로토타입을 정확히 모르므로 정리후 내용을 추가 해야겠다.

 

 

---

 

🚀 for of ?

 

배열의 요소 값(value)에 바로 접근 가능하다.

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

//for 문 사용
for (let i = 0; i < seat.length; i++) {
    const row = seat[i];
    for (let j = 0; j < row.length; j++) {
        console.log(row[j]);
    }
}

//for of 문 사용
for (let row of seat) {
    for (let pocketmon of row) {
        console.log(pocketmon);
    }
}

두 함수 모두 배열의 값을 출력하지만 for of가 가독성이 높아보이는것을 알 수 있다. 

 

 

 

---

 

[  for in 과 for of 의 차이점  ]

 

🍄 일반적으로 객체리터럴 , { key : value } 를 가진 객체는 반복 가능한 객체가

아니기 때문에 for of 문을 쓰면 에러가 발생한다 . 이러한 경우 for in을 쓴다.

 

🍄 Object 메소드들을 활용해 객체로 반환해서 for of 를 쓸 수 있다.