JavaScript 반복문과 제어

• JavaScript 반복문
• • while 문
  • do...while 문
  • for 문
  • forEach 문 (배열 전용)
  • for...in 문 (객체 전용)
  • for...of 문 (Iteralbe 객체)
  • for await...of 문 (비동기)
• 반복문 제어문
• • continue
  • break

NEW 키워드
배열 전용 반복, 객체 전용 반복, Iterable 객체, Set 객체, Map 객체, 비동기, Promise 객체

---

# JavaScript 반복문

• 특정 조건이 만족될 때까지 코드를 반복 실행하는 문법

반복문	사용 대상	특징
while	모든 반복	조건이 만족하는 동안 반복 실행
do...while	모든 반복	최소 한 번 실행 후 조건 검사후 반복 실행
for	모든 반복	반복 횟수가 정해져 있을 때 사용
forEach	배열 전용	배열의 모든 요소를 순회하며 반복 실행
for...in	객체 전용	객체의 속성(키, key)를 순차적으로 반복 실행
for...of	배열, 문자열, Set, Map	Iterable 객체의 값(value)을 순차적으로 반복 실행 (일반 객체 사용 불가)
for await...of	비동기 반복	async 함수 내에서 비동기 데이터, Iterable 객체를 순차적으로 반복 실행

---

# while 문

• 조건이 만족하는 동안(참일 동안) 반복 실행
• 반복 횟수가 정해져 있지 않을 때 유용하다
• 주의점 : 조건이 항상 참이면 무한 루프가 발생할 수 있다
• 때문에 반복문 제어(break; continue)를 적절히 사용해야 한다

문법

while(조건){
  /* 반복 실행 코드 */
}

예제 코드

let num = 0;
while (num < 3) {
  console.log(num);   // 출력 : 0, 1, 2
  num++;
}

---

# do...while 문

• 최소 한 번 실행 후 조건 검사후 반복 실행
• 코드 블록을 최소 한번 실행 후, 조건을 확인하고 조건이 참이면 반복, 거짓이면 종료한다
• while과의 차이점: do...while은 조건이 거짓이어도 최소 한 번은 실행

문법

do {
  /* 반복 코드 */
} while (조건식);

예제 코드

let num = 0;
do {
    console.log(`실행 ${num}`); // 출력 : 실행 0
    num++;
} while (false);    // 조건이 거짓이어도 최소 한번 실행

---

# for 문

• 반복 횟수가 정해져 있을 때 사용
• 구조 : 초기값(초기화), 조건(조건식), 증감식(번화식)을 사용하여 반복

문법

for (초기화; 조건식; 변화식) {
  /* 반복 코드 */
}

• 초기화 : 반복문이 시작될 때 한 번 실행되는 부분 (예: let i = 0)
• 조건식 : 반복문이 실행될 때마다 평가되는 조건 (예: i < 5)
• 변화식 : 각 반복이 끝날 때마다 실행되는 부분 (예: i++)

얘제 코드

for (let i = 0; i < 5; i++) {
  console.log(i); // 출력 : 0, 1, 2, 3, 4
}

---

# forEach 문

• 배열 전용 메서드 : 배열의 모든 요소를 순회하며 반복 실행
• 배열의 각 요소를 처리하는 콜백 함수를 전달하여 반복 실행
• forEach는 return 문, break문, continue문을 사용하지 않으며, 반복문을 중단할 수 없다
• forEach는 객체 내장 메서드인 Object.keys(obj), Object.values(obj), Object.entries(obj)을 활용하여 객체에도 사용 가능하지만 권장되지는 않는다 (객체 순회시 for...in 권장)

문법

배열.forEach(function(요소, 인덱스, 배열) {
    /* 각 요소를 처리할 코드 */
});

• 요소 (element) : 현재 반복 중인 배열의 요소 값
• 인덱스 (index) : 현재 요소의 인덱스 번호 (0부터 시작)
• 배열 (array) : forEach를 호출한 원본 배열

예제 코드 1

let arr = ["사과", "바나나", "포도"];

arr.forEach((el, index, array) => {
    console.log(`요소: ${el}, 인덱스: ${index}, 배열: ${array}`);
});

/* 출력
요소: 사과,    인덱스: 0,   배열: 사과,바나나,포도
요소: 바나나,  인덱스: 1,   배열: 사과,바나나,포도
요소: 포도,    인덱스: 2,   배열: 사과,바나나,포도	 */

예제 코드 2 - 원본 수정 (미권장)

let numbers = [1, 2, 3];

numbers.forEach((num, index, arr) => {
    arr[index] = num * 2;  // 원본 배열 변경
    console.log(`요소: ${num}, 인덱스: ${index} 변경, 배열: ${arr}`);
});

/* 출력
요소: 1, 인덱스: 0 변경, 배열: 2,2,3
요소: 2, 인덱스: 1 변경, 배열: 2,4,3
요소: 3, 인덱스: 2 변경, 배열: 2,4,6 */

• 이해를 돕기 위한 예제이므로, 원본 배열이 수정(변경)되는 것은 권장하지 않는다

예제 코드 3 - 객체 반복 (미권장)

let obj = { name: "영희", age: 25, city: "Seoul" };

Object.keys(obj).forEach((k) => {
    console.log(k); //출력 : name, age, city
});
Object.values(obj).forEach((v) => {
    console.log(v); //출력 : 영희, 25, Seoul
});
Object.entries(obj).forEach(([key, value]) => {
    console.log(`${key} - ${value}`);
    //출력 : name - 영희, age - 25, city - Seoul
});

• Object.keys(객체) : 객체의 속성명을 배열로 반환한다
• Object.values(객체) : 객체의 속성값을 배열로 반환한다
• Object.entries(객체) : 객체의 속셩명과 속성값을 배열로 반환한다
• 하단의 객체 전용 반복문인 for...in 을 사용하면 더 쉽게 반복이 가능하다

---

# for...in 문

• 객체의 속성(키)을 순차적으로 반복 실행
• 배열에도 사용 가능하지만 권장되지 않음 (배열 순회 시 for...of 사용 권장)

문법

for (let 키 in 객체) {
  /* 객체의 각 속성에 대해 반복하는 코드 */
}

• 객체 : 순회하고자 하는 객체
• 키 : (속성명, key) 객체의 각 속성
• 값 : (속성값, value) 객체의 각 값, "객체[속성]" 로 속성값에 접근할 수 있다

예제 코드 1

let obj = { name: "영희", age: 25, city: "Seoul" };

for (let key in obj) {
    console.log(`${key} - ${obj[key]}`);  // 출력 : name - 영희, age - 25, city - Seoul
}

예제 코드 2 - 배열 반복 (미권장)

let arr = ["사과", "바나나", "포도"];

for (let key in arr) {
    console.log(`${key} - ${arr[key]}`);  // 출력 : 0 - 사과, 1 - 바나나, 2 - 포도
}

• "키"가  "인덱스" 역할을 하고 "배열[인덱스]"로 값에 접근한다

---

# for...of 문

• Iterable 객체(배열과 같이 반복 가능한 객체)의 값(value)를 순차적으로 반복 실행
• Iterable 객체 : 배열, 문자열, Map, Set, Arguments
• for...of는 일반 객체는 사용할 수 없다
• for...in은 키를 반복하는 반면, for...of는 값(value) 자체를 반복한다

문법

for (let 값 of 객체) {
  /* Iterable Object(객체)의 각 요소에 대해 반복하는 코드 */
}

예제 코드 1 - 배열

let arr = ["사과", "바나나", "포도"];

for (let el of arr) {
    console.log(el); // 출력 : 사과, 바나나, 포도
}

예제 코드 2 - 문자열

let str = "Hellow!";

for (let el of str) {
    console.log(str); // 출력 : H, e, l, l, o, w, !
}

예제 코드 3 - Set 객체

let setObj = new Set([6, 6, 2, 2, 3, 4]);

console.log(setObj); // set(4){6,2,3,4} (4개의 요소만 존재)
console.log(setObj.size); // 객체.size(객체의 값의 개수) : 4 

for (let el of setObj) {
  console.log(el);  // 출력 : 6, 2, 3, 4
}

• Set 객체
  • JavaScript에서 제공하는 내장 객체로 중복 값을 허용하지 않음 (중복 없는 값들의 집합)
  • 값의 순서가 보장되며 삽입 순서대로 저장된다

예제 코드 4 - Map 객체

let mapObj = new Map([
  ["name", "영희"],
  ["name", "철수"],
  ["age", 30],
  ["city", "Seoul"]
]);

console.log(mapObj);  // 출력 : Map(3) {'name' => '철수', 'age' => 30, 'city' => 'Seoul'}
console.log(mapObj.size); // 객체.size(객체의 값의 개수) : 4

for (let [key, value] of mapObj) {
  console.log(`${key}- ${value}`); //출력 : name - 철수, age - 30, city-Seoul
}

• Map 객체
  • JavaScript에서 제공하는 키-값 쌍을 저장하는 내장 객체로 중복된 키를 허용하지 않음
  • 키에 어떤 데이터 타입도 사용 가능 (객체, 배열, 함수 등 어떤 값도 키로 사용 가능)
  • 값의 순서가 보장되며 삽입 순서대로 저장된다

---

# for await...of 문

• async 함수 내에서 비동기 데이터(배열, API, 파일) 혹은 Iterable 객체 (반복 가능한 객체)를 비동기적으로 순차적으로 반복 실행 
• 이전 비동기 동작을 기다렸다가 완료되면 순차적으로 하나씩 실행하는 반복문
• 비동기 : 작업이 진행되는 동안 다른 작업을 동시에 할 수 있는 방식
• await 키워드 : 비동기 함수 내에서 순차적으로 실행하기 위해 이전 비동기 작업을 기다리는 것 
• async 함수 (비동기 함수) 내에서만 사용되며, 다른 곳에서 사용하면 구문 오류가 발생한다
• for...of 문은 동기적인 반복문이지만, for await...of 문은 Promise와 같은 비동기 객체를 반복할 때 사용한다

문법

for await (const 요소 of 객체) {
  /* 비동기 처리가 필요한 코드 */
}

예제 코드 1 - 비동기 배열

async function fetchData() {
    let asyncArr = ["사과", "바나나", "포도"];
    for await (let el of asyncArr) {
        console.log(el);
    }
}

fetchData();  // 출력 : 사과, 바나나, 포도

예제 코드 2 - Promise 객체

function delay(ms, message) {
  return new Promise(function(resolve) {    // Promise 객체 생성
    setTimeout(function() { resolve(message);}, ms);
    // resolve() : Promise가 성공 완료되었을 때 상태를 대기(Pending)에서 완료(Fulfilled)로 바꾸고 값을 반환해주는 함수 "나 완료되었어!"
  });
}

const promises = [
  delay(3000, "3초 후 완료!"),  delay(5000, "5초 후 완료!")
];

async function processPromises() {
  for await(const result of promises) {
    console.log(result);
  }
}

processPromises(); // 출력 : (3초후) 3초후 완료, (5초후) 5초후 완료

• Promise 객체
  • JavaScript의 내장 객체로 비동기 작업을 처리할 때 사용
  • "약속(Promise)할게! 조금만 기다려줘!" : 지금은 값이 없지만, 나중에 생길 값 (성공할 수도 실패할 수도 있는 미래의 값)
  • 값을 받을 때까지 기다릴 수도 있고(await), 실패하면 에러를 잡을 수도 있다(catch)
• for await...of가 아닌 for...of 반복문을 사용하면, (비동기) 기다려서 순차적으로 실행되지 않고 곧바로 Promise 객체를 2번 반환한다 

---

# 반복문 제어

• continue와 break을 활용하면 반복문을 제어할 수 있다
• 배열 전용 반복문이 forEach 문에는 continue와 break문을 사용할 수 없다

# continue

• 현재 반복을 건너뛰고 반복을 마저 진행

for (let i = 0; i < 5; i++) {
  if (i === 3) continue;  // i가 3일 때 이번 반복을 건너뜀
  console.log(i);         // 출력 : 0, 1, 2, 4
}

# break

• 현재위치에서 반복문 종료

for (let i = 0; i < 5; i++) {
  if (i === 3) break; // i가 3일 때 멈춤
  console.log(i);     // 출력 : 0, 1, 2
}