프로그래머스 등 코딩 테스트 문제를 풀다 보면 기본 for 문(for(let i=0; i<len; i++)) 대신 더 간결한 형태의 반복문을 마주치게 됩니다.
바로 ES6에서 도입된 for...of와 기존에 있던 for...in 입니다. 얼핏 보면 비슷해 보이지만 용도가 완전히 다르기 때문에 확실히 구분해서 사용해야 합니다. 🧐
이번 글에서는 두 반복문의 차이점과 사용법을 정리해 보겠습니다.
1. for…in 문 (객체 순회용)
for...in 문은 객체의 속성 키(Property Key), 즉 배열에서는 인덱스(Index)를 순회할 때 사용합니다.
- 용도: 객체(Object)의 키를 순회할 때 주로 사용
- 주의: 배열에 사용하면 인덱스가 (문자열 형태로) 나옵니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
const array = ["문동은", "손명오", "박재준", "이사라", "최혜정"];
// index 변수에 배열의 인덱스(0, 1, 2...)가 차례로 들어옵니다.
for (let index in array) {
console.log(index);
}
// 실행 결과
// "0"
// "1"
// "2"
// "3"
// "4"
Tip:
for...in은 배열보다는 일반 객체(Object)의 속성을 꺼낼 때 더 적합합니다.
2. for…of 문 (배열 값 순회용)
for...of 문은 반복 가능한 객체(Iterable)의 값(Value)을 순회할 때 사용합니다. 우리가 흔히 원하는 “배열의 요소 하나하나 꺼내기”에 딱 맞는 문법입니다.
- 용도: 배열(Array), 문자열, Map, Set 등의 요소 값을 순회할 때 사용
- 특징: 코드가 훨씬 직관적이고 간결합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
const array = ["문동은", "손명오", "박재준", "이사라", "최혜정"];
// value 변수에 배열의 실제 값("문동은", "손명오"...)이 차례로 들어옵니다.
for (let value of array) {
console.log(value);
}
// 실행 결과
// "문동은"
// "손명오"
// "박재준"
// "이사라"
// "최혜정"
3. 요약: 언제 무엇을 써야 할까?
가장 헷갈리는 두 가지를 한 줄로 요약하면 다음과 같습니다.
| 구분 | 키워드 | 반환 값 | 추천 사용처 |
|---|---|---|---|
| for…in | Index (Key) | 인덱스 (키) | 객체(Object)의 속성을 돌 때 |
| for…of | Object (Value) | 실제 값 (Value) | 배열(Array)의 값을 돌 때 |
마치며
코딩 테스트나 실무에서 배열의 값을 꺼낼 때는 for...of를, 객체의 키를 확인해야 할 때는 for...in을 사용하는 습관을 들이면 좋습니다!
혹시 궁금한 점이나 피드백이 있다면 편하게 댓글 달아주세요. 👋