[JavaScript] 반복문 for...of 그리고 for...in

🐣 for... of 와 for ... in 에 대해서

---

오늘은 for ... of 와 for ... in 에 대해서 이전에 Notion 정리 해뒀던 내용들을 다듬어서 작성해보려한다. 처음 for ... of 와 for ... in을 접한 것은 javascript 코딩테스트 걸음마를 떼기 시작하면서부터인데... 크흠! 아무튼 정리해보겠다!

 

 

참고로 아래는 for of와 for in을 이용해서 풀었던 백준 문제 풀이 정리글!

[백준] 복호화 9046

 

 

🐣for... of

---

1. 개념

배열, 문자열, 맵, 세트 등과 같은 반복 가능한 객체를 반복하는 데 사용

• 반복 가능한 항목(예: 배열, 문자열)과 함께 작동
• 반복 가능한 값(value)을 반복
• 프로토타입 체인을 통해 상속된 속성을 포함하여 열거 가능한 모든 속성을 반복
• 쉽게 생각하면 배열 값 순환

 

2. 코드

const array = [1, 2, 3];
for (const value of array) {
  console.log(value); // 1,  2,  3
}

 

 

 

🐣for... in

---

1. 개념

객체의 열거 가능한 속성(상속된 속성 포함)을 반복하는 데 사용

• 객체 및 그 열거 가능한 속성과 함께 작동
• 객체의 키(속성 이름)를 반복
• 객체 속성을 반복하지 않음
• 객체 순환

 

2. 코드

const object = { a: 1, b: 2, c: 3 };
for (const key in object) {
  console.log(key); // 'a', 'b', 'c'
  console.log(object[key]); // 1,  2,  3
}

 

 

🐣 비교하기

---

  1. Iterable과 객체 비교

for...of

반복 가능한 항목(예: 배열, 문자열)과 함께 작동

for...in

객체 및 그 열거 가능한 속성과 함께 작동

 

  2. Values vs Keys

for...of

반복 가능한 값을 반복

for...in

객체의 키(속성 이름)를 반복

 

  3. 상속 속성

for...in

프로토타입 체인을 통해 상속된 속성을 포함하여 열거 가능한 모든 속성을 반복

for...of

객체 속성을 반복하지 않음

 

정리한것들은까먹지말자!