[JavaScript 심화] 순회 정리

순회란 배열/객체에 저장된 여러 값들 순서대로 하나씩 접근하는 것

---

1. 배열 순회

---

1-1. 인덱스 `for`루프

const arr = [1, 2, 3];

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

const arr2 = [4, 5, 6, 7, 8];
for (let i2 = 0; i2 < arr2.length; i2++) {
  console.log(arr2[i2]);
}

• 장점: 인덱스(`i`)를 직접 다룰 수 있어 범위, 간격, 역순 등 세밀 제어 가능
• 주의: 루프 도중 `arr.length`가 변하지 않도록 주의! (배열 수정 X)

---

1-2. `for...of` (값 중심 순회)

for (const item of arr) {
  console.log(item);
}

• 값을 바로 꺼내 쓰는 가장 간단한 방식
• 배열, 문자열, `Map`/`Set`같은 iterable에 사용
• 인덱스가 필요하면 `arr.entries()`를 함께 사용

for (const [i, v] of arr.entries()) {
  console.log(i, v);
}

콜백 스타일을 원하면 `arr.forEach(v => console.log(v))`도 동일 목적에 자주 씀

---

2. 객체 순회

const person = { name: "도서", age: 28, hobby: "게임" };

---

2-1. `Object.keys` (key 배열)

const keys = Object.keys(person); // ["name", "age", "hobby"]
console.log(keys);

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

for (const key of keys) {
  console.log(key);
}

for (const key of keys) {
  const value = person[key];
  console.log(key, value);
}

• 자기 자신의 키만 배열로 반환

---

2-2. `Object.values` (value 배열)

const values = Object.values(person); // ["도서", 28, "게임"]
console.log(values);

for (const value of values) {
  console.log(value);
}

---

2-3. `Object.entries` (key-value) - 실무에서 편리할 듯?

for (const [key, value] of Object.entries(person)) {
  console.log(key, value);
}

• 키와 값을 동시에 구조분해로 받기 좋아서 가장 깔끔

---

2-4. `for...in` (객체의 키 순회)

for (const key in person) {
  const value = person[key];
  console.log(key, value);
}

• 주의할 점 : 상속된 프로퍼티까지 순회할 수 있음
  -> 보통은 `Object.hasOwn`같은 체크를 함께 사용

for (const key in person) {
  if (Object.hasOwn(person, key)) {
    console.log(key, person[key]);
  }
}

• 배열에는 사용 비권장
• 인덱스 순서가 보장되지 않으며, 의도치 않은 속성까지 순회될 수 있음
  -> 배열은 `for`, `for...of`, `forEach`를 사용 권장!

---

그럼 언제 무엇을 씀??

 

대상 추천 구문 이유

대상	추천 구문	이유
배열 값만 필요	`for...of`	가장 간단하고 안전
배열 인덱스/세밀 제어	`for`	범위·간격·역순 등 제어 쉬움
객체 키·값 모두	`Object.entries + for...of`	key/value 동시 접근이 깔끔
객체 키만/값만	`Object.keys / Object.values`	필요한 것만 추출
객체 전통 순회	`for...in (+ Object.hasOwn)`	상속 프로퍼티 주의 필요