[JavaScript] 19. 반복문으로 배열과 객체 순회하기

서회정's avatar
Jan 28, 2026
[JavaScript] 19. 반복문으로 배열과 객체 순회하기

1. 배열 순회

notion image
 

1. 배열 인덱스

notion image
 

2. for of 반복문

💡
오직 배열을 순회하기 위해서 만들어진 특수한 반복문 of 뒤에 있는 배열(arr)안에 있는 요소를 하나씩 순서대로 꺼내서 변수(item)에 저장한다.
// 1.2. for of 반복문 // 오직 배열을 순회하기 위해서 만들어진 특수한 반복문 // of 뒤에 있는 배열 안에 있는 요소를 하나씩 순서대로 꺼내서 뱐수 item에 저장한다. for (let item of arr) { console.log(item); }
notion image
 

✅ 배열인덱스와 for of 반복문의 차이

💡
성능면에서는 큰 차이가 없지만, 구현하고자하는 기능에 따라 for문 안에서 index 값을 활용하려면 index값을 저장하는 배열인덱스 순회 방법을 사용하는 것이 좋다. 그렇지 않고 단순 순회하여 출력만 하는 경우엔 for of 문법을 사용하여도 된다.
index 값의 필요 여부에 따라 선택하여 사용할 수 있다.
 

2. 객체 순회

1. Object.keys() 내장함수 사용

💡
객체에서 key 값들만 뽑아서 새로운 배열로 반환
// 2. 객체 순회 let person = { name : "서회정", age : 33, hobby : "anime", }; // 2.1 Object.keys 내장함수 사용 // 객체에서 key 값들만 뽑아서 새로운 배열로 반환 let keys = Object.keys(person); console.log(keys);
notion image
 
만들어진 배열인 keys와 그 길이를 활용하여 배열인덱스 순회 방법으로 key 값들을 순회하여 출력할 수 있다.
for(i = 0; i < keys.length; i++) { console.log(keys[i]); }
notion image
마찬가지로 for of 를 활용하여 순회할 수 있다.
 
for(let key of keys) { console.log(key, person[key]); };
notion image
key 값을 순회하며 key와 value를 모두 순회하여 출력할 수도 있다.
코드가 복잡해질때는 value값을 변수에 할당하여 다음과 같이 만들 수도 있다.
for(let key of keys) { const value = person[key]; console.log(key, value); };

2. Object.values() 내장함수 사용

💡
객체에서 value 값들만 뽑아서 새로운 배열로 반환
// 2.2 Object.values 내장함수 사용 // 객체에서 value 값들만 뽑아서 새로운 배열로 반환 let values = Object.values(person); // console.log(values); for(let value of values) { console.log(value); }
notion image
 

3. for in 반복문

💡
오직 객체를 순회하기 위해서 만들어진 특수한 반복문 in 뒤에 있는 객체(person)안에 있는 key값을 하나씩 순서대로 꺼내서 변수(key)에 저장한다.
// 2.3 for in 반복문 // 객체만을 위해서 만들어진 반복문 for (let key in person) { const value = person[key]; console.log(key, value); }
notion image
 

for offor in 차이점에 주의하자

💡
for of배열에만 사용 가능,
for in객체에서만 사용할 수 있다.
 
Share article

clubnerdy