매번 헷갈리는 반복문에 대해서 정리해보자!
1. for문
let arrNum = [1, 2, 3];
for (let i = 0; i < arrNum.length; ++i) {
console.log(`index: ${i}, value: ${arrNum[i]}`);
}
/* 실행 결과
index: 0, value: 1
index: 1, value: 2
index: 2, value: 3
*/특징
1. JavaScript에서 가장 오래되고 전통적인 반복문이다.
2. 누구나 쉽게 접근할 수 있다.
3. 그러나, for문에서 작성된 로직이 간단하지 않은 경우 추후 코드 분석이 어려울 수 있다.
2. forEach문
let num = 10;
let arrNum = [1, 2, 3];
arrNum.forEach((num, index, arr) => {
console.log(`num: ${num}, index: ${index}, arr: ${arr}`);
});
console.log(`num: ${num}`);
/* 실행 결과
num: 1, index: 0, arr: 1, 2, 3
num: 2, index: 1, arr: 1, 2, 3
num: 3, index: 2, arr: 1, 2, 3
num: 10
*/특징
1. 배열의 내장함수이므로, 배열에서만 사용할 수 있다.
2. 배열의 속성과 인덱스, 배열 자체를 가져올 수 있다.
3. continue, break, yield와 같은 제어 흐름을 사용할 수 없다.
4. for문에서 가독성이 향상된 반복문이라고 볼 수 있다.
5. forEach문 안에서 사용되는 변수는 로컬 변수이다.
3. for..of문
let userArr = ['BBIYAC', 'CHICKEN', 'EGG'];
for (let name of userArr) {
console.log(`user: ${name}`);
}
/* 실행 결과
user: BBIYAC
user: CHICKEN
user: EGG
*/특징
1. 반복 가능한 객체(Array, String, Map, Set, NodeList)에 사용할 수 있다.
2. continue, break, yield와 같은 제어 흐름을 사용할 수 있다.
forEach와 for..of 비교
1. for..of가 forEach보다 빠르다.
2. 둘 다 배열의 속성을 가져올 수 있다.
3. forEach는 인덱스를 가져올 수 있지만, for..of는 불가능하다.
4. for..of는 제어 흐름을 사용할 수 있지만, forEach는 불가능하다.
4. for..in문
let userInfo = {
name: 'BBIYAC',
age: 3,
address: 'Cheonan'
};
for (let key in userInfo) {
console.log(`${key}: ${userInfo[key]}`);
}
/* 실행 결과
name: BBIYAC
age: 3
address: Cheonan
*/특징
1. 객체(Object)의 Key값을 추출할 수 있다.
2. 배열에 사용할 경우 속성이 아닌 인덱스로 반환한다. (이 경우 for..of보다 느림)
5. 요약
- 배열에서는 for..of를 사용하고, 인덱스로 접근해야되는 경우에는 forEach를 사용한다.
- 배열에서 인덱스로 접근해야하는데, 중간에 continue, break가 필요하다면 for문을 사용한다.
- 객체에서는 for..in을 사용한다.
보통 배열에서 for..of보다는 배열 내장함수(map, reduce, forEach)를 더 많이 사용한다고 한다.
References
👉 [JavaScript] 자바스크립트 forEach 메서드 이해하기
👉 순회에 사용하는 forEach(+ for - in / for - of), filter, map, reduce에 대해 핵심만 짧게 알아보자!
👉 [JavaScript]다양한 반복문(for, forEach, for of, for in)
👉 forEach, for in, for of 특징 및 성능 비교
👉 for vs for-in vs forEach vs for-of 무엇으로 자바스크립트 리스트를 돌아야 하나
