[JavaScript] 반복문

반복문 (Loop Statements)

동일한 작업을 여러 번 반복

🍀 for

일정한 횟수만큼 반복

• 세미콜론(;)으로 구분
• 3 영역으로 나뉨
• for (초기값 ; 조건문 ; 코드 실행 후 작업) { 반복할 코드 }

예제 1 ✔️

let s = 5
for (let i=0 ; i<10 ; i++){
       s++;
}

1. i 변수를 0으로 초기값 설정
2. 반복문이 돌면서 조건을 확인 후 false가 되면 반복을 멈추게 됨
   i가 10보다 작으면 true를 반환하기 때문에 계속 반복함
3. s++를 실행함
4. i에 1을 더하며 증가시킴
5. 위 과정을 반복하며 i가 10이 되면 for문을 빠져나오며 종료됨

🍀 while

조건이 참인 동안 코드 블록을 반복

• while (조건문) { 반복할 코드 }
• ⚠️ ❗ 무한루프 주의 ❗ ⚠️
  조건이 항상 참인 경우 while문이 계속 실행되어 종료되지 않기 때문에
  while문 안에서 break문을 통해 빠져나와야함

예제 1 ✔️

let i = 0;
while (i < 5) {
    i++;
}

1. 초기값 i가 0이기때문에 while문 조건의 참에 해당됨
2. i++을 실행하여 1씩 증가시킴
3. 위 과정을 반복 후 i가 5가 되는 경우 while문을 빠져나오며 종료됨

예제 2 ✔️
break문 이용

var v;
while (true) {
   v++;
   if (v==7){
      break;
   }
}

1. v가 참이므로 계속 v++를 실행하여 1씩 증가시킴
2. 위 과정을 반복하다 if문 조건 v가 7이 되는 순간 break를 통해 while문 밖으로 빠져나오며 종료됨

🍀 do.. while

while 루프와 비슷하지만, 조건을 마지막에 체크함
즉, 루프가 적어도 한 번은 실행됨

• do { 반복할 코드} while (조건문 );

예제 1 ✔️

let i = 1;
do {
  i++;
}
while (i <= 5);

1. 우선 do 블록을 실행하여 1을 증가시킴
2. while 조건이 참일 경우 계속 반복함
3. 위 과정을 반복하다 while문 조건 i가 6이되는 순간 조건이 만족되지 않아 종료됨

🍀 for ..in

객체의 속성을 반복하며, 각 속성에 대해 코드 블록을 실행

• 객체의 속성을 열거하기 위해 주로 사용됨
• 객체의 프로퍼티를 반복하면서 해당 프로퍼티의 이름에 대해 코드를 실행함
• for (변수 키 in 객체) {
  // 객체의 속성을 처리하는 코드
  }

예제 1 ✔️

const person = { name: 'John', age: 30, city: 'New York' }; # 객체 초기화
for (let key in person) {
    console.log(key + ": " + person[key]);
    # person[key] = 현재 반복 중인 속성의 값
}

출력 결과 ✔️

name: John
age: 30
city: New York

person의 속성을 반복하여 객체의 모든 속성 반복을 통해 각 속성의 키를 변수 'key에 할당함'
현재 속성의 키와 값을 출력함
-> 결과적으로 객체 'person'의 모든 속성을 순회하면서 각 송성의 키와 값 쌍을 출력하여 객체의 내용을 확인함

🍀 for ..of

배열이나 이터러블 객체의 요소를 반복하며, 각 요소에 대해 코드 블록을 실행

• 배열이나 이터러블 객체의 요소를 반복하기 위해 주로 사용됨
• 반복할 때 배열의 값을 가져와서 해당 값에 대해 코드를 실행함
• for (변수 요소 of 배열) {
  // 요소를 처리하는 코드
  }

예제 1 ✔️

const colors = ['red', 'green', 'blue'];
for (let color of colors) {
    console.log(color);
}

출력 결과 ✔️

red
green
blue

배열 'colors'의 각 요소를 순회하며 요소를 출력
각 요소를 'color' 변수에 순차적으로 할당하여 반복
-> 각 요소가 한 줄에 하나씩 출력됨

🍀 forEach

배열의 각 요소에 대해 주어진 함수를 실행하는 배열 메서드

• 배열의 각 요소를 반복하면서 요소에 대한 특정 작업을 수행하거나 처리할 때 사용
• 배열.forEach(function(요소) {
  코드
  });

예제 1 ✔️

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
   console.log(number);
});

출력 결과 ✔️

1
2
3
4
5

numbers' 배열 정의 (숫자를 요소로 가지고 있음)
배열의 각 요소를 반복
전달된 함수(매개변수 number(= 배열의 각 요소)를 가지고 있음)는 각 요소를 처리하는 데 사용됨

🍀 for...in, for...of, forEach()의 차이

for...in : 객체의 속성을 반복
배열에서 사용할 경우 배열의 인덱스가 아닌 속성 이름을 반환함
주로 객체의 속성을 읽거나 수정하기 위해 사용됨

for...of : 배열의 값을 직접 반복
반복 중 배열의 값을 수정하거나 새로운 배열을 생성할 수 있음

forEach() : 배열의 각 요소에 대해 주어진 함수를 실행
주로 배열의 값을 읽기 위해 사용됨

🍀 map()

🍀 filter()

🍀 reduce()

🍀 some()

🍀 every()