[JS] 자바스크립트 반복문으로 배열과 객체 순회하기

자바스크립트에서 데이터를 처리할 때 배열과 객체를 순회(iteration)하는 방법은 매우 중요합니다. 이번 글에서는 배열과 객체를 효과적으로 순회하는 방법을 실무 예제와 함께 알아보겠습니다.

순회(iteration)란?

순회란 배열이나 객체와 같은 데이터 구조에 저장된 여러 개의 값에 순서대로 접근하여 처리하는 작업을 말합니다.

---

1. 배열(Array) 순회하기

1-1. 기본 for 문을 이용한 배열 순회

가장 기본적인 방법으로 배열의 길이를 이용하여 각 인덱스에 접근하는 방법입니다.

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
// 결과: 1, 2, 3

1-2. for...of 반복문을 이용한 배열 순회

for...of는 배열을 순회하는데 특화된 방법으로 값을 바로 접근할 수 있어 편리합니다.

const arr = [1, 2, 3];
for (let item of arr) {
    console.log(item);
}
// 결과: 1, 2, 3

인덱스를 이용한 for문 vs for...of 반복문

• 기본 for문: 인덱스를 활용하여 배열의 요소 접근 시 유리합니다.
• for...of: 값만 바로 접근하고 싶을 때 편리합니다.

실무 활용 예시

배열 내 데이터를 가공하거나 API 응답 데이터를 처리할 때 자주 사용됩니다.

const users = ['홍길동', '김철수', '이영희'];
for (let user of users) {
    console.log(`${user}님 환영합니다!`);
}
// 결과:
// 홍길동님 환영합니다!
// 김철수님 환영합니다!
// 이영희님 환영합니다!

---

2. 객체(Object) 순회하기

2-1. Object.keys()를 이용한 순회

Object.keys()는 객체의 모든 키를 배열로 반환하여 사용할 수 있게 합니다.

const person = { name: "김철수", age: 36, hobby: "OTT시청" };
const keys = Object.keys(person);

console.log(keys);
// 결과: ['name', 'age', 'hobby']

for (let key of keys) {
    console.log(key, person[key]);
}
// 결과:
// name 김철수
// age 36
// hobby OTT시청

2-2. Object.values()를 이용한 순회

Object.values()는 객체의 모든 값을 배열로 반환합니다.

const values = Object.values(person);
console.log(values);
// 결과: ['김철수', 36, 'OTT시청']

for (let value of values) {
    console.log(value);
}
// 결과:
// 김철수
// 36
// OTT시청

2-3. for...in 반복문을 이용한 객체 순회

객체의 키-값 쌍을 직접적으로 접근할 때 유용합니다.

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}
// 결과:
// name: 김철수
// age: 36
// hobby: OTT시청

실무 활용 예시

객체 내 데이터를 동적으로 UI에 표현하거나 API 응답 객체를 처리할 때 유용합니다.

const product = { id: 101, name: "노트북", price: 1500000 };

for (let prop in product) {
    console.log(`${prop} : ${product[prop]}`);
}
// 결과:
// id : 101
// name : 노트북
// price : 1500000

---

for...in과 for...of 비교 요약

반복문 유형 사용 가능한 데이터 타입 특징

for...in	객체(Object)	키(key)를 통해 값에 접근
for...of	배열(Array), 문자열(String)	요소 값을 직접 접근

이러한 차이를 기억하고 데이터 형태에 맞는 반복문을 선택하여 활용하세요.

---

결론

실무에서는 데이터 처리와 조작이 매우 빈번하게 일어나므로, 배열과 객체를 효율적으로 순회하는 방법을 익히는 것이 중요합니다. 각각의 상황에 맞는 순회 방법을 잘 이해하고 활용하면 개발 생산성을 높일 수 있습니다.