[JavaScript] 반복문 (for, forEach, for...of, for...in, while, do while)

반복문

• 같은 코드를 여러 번 실행할 때 사용되는 구조

---

for 문

• 가장 기본적인 반복문
• 시작 값, 조건, 증감식을 명시적으로 지정하여 반복
• 사용 시기 : 반복 횟수가 명확할 때, 인덱스 필요할 때 , 배열, 숫자 범위 등에서 유용.

// [문법]
for (초깃값; 반복문 조건; 증감식) {
	반복처리 내용
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

---

for...in 문

• 객체(Object)의 키(key) 를 순회할 때 사용
• 반환값 : 객체의 속성 이름(key), 배열의 인덱스 
• for of 나 for문을 대신 사용하기를 권장
• 배열(배열의 인덱스(index) 순회)에도 사용할 수 있지만, 권장되지 않음 (인덱스 순서 보장 X)
• 사용 시기 : 객체 속성(key) 순회 시

✓ 배열이나 객체안에(in) 키들을 하나씩 꺼내서 뭔지 확인하는 것

---

배열에 대한 반복

• 배열의 인덱스를 순회활 때 사용
• 변수명에는 각 속성의 인덱스가 됨

// [문법]
for (변수명 in 객체) {
  
}

const todos = ['a', 'b', 'c'];
for (const i in todos) {
  console.log(`${i}, ${todos[i]}`);
  //0, a
  // 1, b
  // 2, c
}

---

객체에 대한 반복

• 객체의 키를 순회할 때 사용

// [문법]
for (key in 객체) {
  // 객체의 키(key)를 순회하며 실행할 코드
  
}

const obj = {name: 'Alice', age: 25};
for (const key in obj) {
  console.log(key, obj[key]);
}

/*
name Alice
age 25
*/

---

for...of 문 (ES6)

• 배열, 문자열, Map, Set 등 이터러블(Iterable)객체의 값(value)을 순회할 때 사용
• 반환값 : 실제 값(Value)
• 인덱스가 필요 없고 값에 바로 접근 가능
• 이터러블 객체가 아닐 시 오류 발생
• 사용 시기 : 배열/이터러블 순회 시, 값 중심

✓ 배열이나 문자열 등 여러 값(value) 중에서 꺼내는 반복문

배열에 대한 반복

// [문법]
for(const 변수명  of 배열){
    문장
}

const todos = ['a', 'b', 'c'];
for (const todo of todos) {
  console.log(`${todo}`); // a, b, c
}

객체에 대한 반복

• 객체는 이터러블(반복가능한 객체)이 아니므로, Object.keys()를 사용하여 객체의 모든 키를 가져온 뒤, 키에 대한 반복을 사용하여 값에 접근

/* 구문 */
for(const 선언 변수 of Object.keys(객체명)){
	const value = 객체명[선언 변수]
	// 선언 변수에 key가 저장되고, value에 값을 저장
}

 

[javascript] 이터러블(iterable)

---

for of 와 for in 차이

• for of는 값을 for in은 키의 목록을 반환

const webs = ['google', 'daum'];

for (const i of webs) {
  console.log(i); // ⇒ google 	daum
}

for (const i in webs) {
  console.log(i); // ⇒ 0 1
}

---

forEach() 메서드

• 배열 전용 메서드로, 콜백 함수를 이용하여 요소를 반복
• for, for..of와 달리 map(), filter() 등의 반환값을 그대로 루프처리 할 수 있음
• 반환값이 없고, break나 continue를 사용할 수 없음
• ⚠️ 주의: forEach()는 반복 중간에 멈출 수 없어서, 조건에 따라 멈춰야 한다면 for나 for...of가 필요함.
• 사용 시기 : 배열 순회 시, 함수형 스타일 선호 시

메서드	설명
배열.forEach()	주어진 콜백함수를 활용하여 배열의 요소를 순서대로 처리
([요소], [인덱스],[기존배열])=> {}	요소, 인덱스, 기존 배열을 활용하여 처리 - 콜백함수에서 인덱스와 기존배열 생략 가능

const arr = ['a','b','c']
arr.forEach((value, idx)=>{
	console.log(value, idx);

})

 

// ex) 짝수 출력
const arr = [1,2,3,4,5]
arr.filter((value)=> value %2 ===0)
.forEach((value)=>{
	console.log(value);
})

// ex) API 등을 통해 가져온 객체 형태 배열 요소 출력
const arr = [
{name: 'a', num:1},
{name: 'b', num:2}
]

arr.forEach((list)=>{
	console.log(list.name, list.num);

})

 

---

while문

• 괄호안에 조건이 참일 동안 실행문을 계속해서 반복
• 변수는 while문 밖에서 지정해야 함
• for문 보다 좀 더 단순화된 반복문
• 조건을 먼저 확인하고 반복
• 사용 시기 : 반복 횟수가 불확실할 때, 조건 기반 반복

// [문법]
while (조건문) {
조건이 참인동안 실행
}

// ex)
let num=0
while(num <5) {
	console.log(num);
	num++
}

// ex)
let x = 0;
while (x < 100) {
	const toprint  = x++;
	if(toprint % 3 === 0) continue; 
	if(toprint > 10) break;
	console.log(toprint); // ⇒ 1, 2, 4, 5, 7, 8, 10

}

---

do...while문

• while문과 비슷하지만, 최소 한 번은 실행
• 사용 시기 : 최소 1회 실행이 필요할 때

// [문법]
do {
조건이 참인 동안 실행
} while(조건문)

// 조건을 비교하기 전에 우선 한 번은 먼저 실행되므로 5가 출력됨
let x = 5;
do {
  console.log(x); // ⇒ 5
} while (x < 5);

---

반복문 제어문

• 반복문 안에 흐름을 제어할 때 사용

continue

• 해당 반복문만 건너뛰고, 다음 반복작업을 실행
• continue 이후 코드를 실행하지 않음
• 반복문 안에서만 작동

for (let i=0; i<5; i++){
	continue; 
	console.log(i); // 실행되지 않음
	
}

---

break

• 특정 조건을 충족할 때 해당 반복문 자체를 종료하는데 사용
• break를 만나면 해당 루프를 빠져나가 그 다음 코드로 이동
• switch 조건문에서도 자주 사용

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i); // ⇒ 0 1 2 3 4
}

---

반복문 선택 기준

반복문	사용 시기
for	반복 횟수가 명확할 때, 인덱스 필요할 때
while	반복 횟수가 불확실할 때, 조건 기반 반복
do...while	최소 1회 실행이 필요할 때
for...of	배열/이터러블 순회 시, 값 중심
for...in	객체 속성(key) 순회 시
forEach	배열 순회 시, 함수형 스타일 선호 시