[JavaScript] 반복문

☀️일반적인 반복문(코드 반복)

1. for 문

1-(1). for 문이란?

for 문은 반복적인 작업을 수행할 때 사용되는 반복문입니다. 일반적으로 지정된 횟수만큼 반복하는 경우에 주로 사용됩니다

• 반복 횟수가 정해져 있고, 조건에 따라 반복을 제어해야 할 때 for 문을 사용합니다.
• 가장 많이 쓰이는 반복문 중의 하나입니다.

1-(2). for 문 구조

for (초기식; 조건식; 증감식) {
  // 반복 실행할 코드
}

• 초기식 : 반복문이 시작될 때 단 한 번 실행되는 부분으로, 반복 변수를 초기화하는 역할을 합니다.
• 조건식 : 각 반복마다 검사되는 조건으로, 조건식이 true인 동안 반복문이 실행됩니다.
• 증감식 : 반복문이 실행된 후에 실행되는 부분으로, 반복 변수를 증가 또는 감소시키는 역할을 합니다.

1-(3). for 문 사용 예시

for (let i = 0; i < 5; i++) { 
  // i가 초기값인 0부터 시작하여 조건식인 i < 5가 true인 동안 반복
  console.log(i);
}

//실행 결과
0
1
2
3
4

---

2. while 문

2-(1). while 문이란?

while 문은 주어진 조건식이 참인 동안 반복하는 반복문입니다. 조건식이 true인 경우에만 반복이 수행되며, 반복 조건이 false가 되면 반복문을 종료합니다.

• 반복 횟수가 정해져 있지 않을 때, 조건에 따라 반복을 유연하게 제어해야 할 때 사용합니다.
  ➡️ 반복 횟수가 불확실한 경우에 유용하게 활용될 수 있습니다.
• 반복 조건을 제대로 설정하지 않으면 무한 루프에 빠질 수 있으므로 주의해야 합니다.

2-(2). while 문 구조

초기문
while (조건문)  { 
  // 조건식이 true인 동안 반복 실행할 코드
  // '반복문 본문(body)'이라 불림
증감문;
}

2-(3). while 문 사용 예시

//i가 초기값인 0부터 시작하여 조건식인 i < 5가 true인 동안 반복
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

//실행 결과
0
1
2
3
4

---

3. do...while 문

3-(1). do ... while 문이란?

do...while 문은 while 문과 유사하지만, 반복문이 실행되기 전에 먼저 코드 블록을 한 번 실행하고, 그 후에 주어진 조건식이 참인 동안 반복하는 반복문입니다.

• 최소한 한 번은 코드 블록 내의 실행을 보장하고, 반복 조건이 뒤로 온다는 점이 while 문과 차이점입니다.
• 코드 블록이 무조건 한 번 이상 실행되어야 할 때 사용합니다.

3-(2). do ... while 문 구조

초기문
do {
  코드;
  증감문;
}
while (조건);

• 코드 블록 내의 코드가 먼저 실행되고, 그 다음에 while 키워드 뒤의 조건식으로 갑니다.

3-(2). do while 문 사용 예시

do {
  i += 1;
  //i가 초기값인 1로 설정되어 먼저 코드 블록이 실행됩니다.
  console.log(i);
} while (i < 5);
  //i가 1씩 증가하면서 while 키워드 뒤의 i < 5 조건식을 검사

//실행 결과
1
2
3
4
5

---

⛅반복문에서 사용되는 제어문

1. break

1-(1). break란?

break는 반복문과 함께 사용되어 반복을 중단하는 데 사용되는 제어문입니다.

• break는 반복문의 특정 조건에서 반복을 중단해야 할 때 유용하게 사용됩니다.
• 반복문이 종료되는 시점을 명시적으로 제어하여 원하는 시점에 반복을 중단할 수 있습니다.

1-(2). break사용 예시

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; 
    // for 반복문에서 i가 3일 때 break 문을 만나면 바로 반복을 중단
  }
  console.log(i);
}

//실행 결과
0
1
2

---

2. continue

2-(1). continue란?

continue는 반복문과 함께 사용되어 반복 중 특정 조건을 만족할 경우 현재 반복을 건너뛰고 다음 반복으로 넘어가는데 사용되는 제어문입니다.

• 반복 중 특정 조건에 따라 현재 반복을 건너뛰고 다음 반복 단계로 이동할 때 유용하게 사용됩니다.
  ➡️ 특정 조건을 만족하는 요소들을 제외하거나 특정 작업을 건너뛰는 등 반복문을 유연하게 제어할 수 있습니다.

2-(2). continue 사용 예시

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // i가 2일 때 현재 반복 건너뜀
  }
  console.log(i);
}

• i가 2일 때 console.log(i)가 실행되지 않고, 해당 반복은 건너뛰어집니다.

//실행 결과
0
1
3
4

• 결과적으로 0, 1, 3, 4가 출력되며, i가 2인 경우의 반복이 건너뛰어집니다.

---

🌧️배열 또는 객체의 반복문

1. for...in 문

1-(1). for ... in 문이란?

for...in 문은 객체의 속성(key 또는 value값)들을 열거(enumeration)하기 위해 사용되는 반복문입니다. 객체의 속성들에 대해 반복하며, 객체의 속성 이름을 순서대로 가져올 수 있습니다.

열거(Enumeration) : 집합이나 목록의 각 항목을 순차적으로 나열하는 것, 데이터 구조나 객체의 속성들을 순회하고 처리하는데 사용함.

• for...in 문은 객체의 속성들을 반복할 때 유용하게 사용되며, 객체의 속성을 동적으로 확인하거나 조작할 때 활용됩니다. (단, for...in 문은 배열에서 사용하기보다 객체를 순회하는데 더 적합합니다.)

1-(2). for ... in 문의 구조

for (let key in object) {
  // 속성에 대한 처리
}

• key : 객체의 속성 이름을 나타내는 변수입니다. for...in 문을 실행할 때마다 객체의 속성 이름을 key에 할당하여 반복문을 실행합니다.
• object : 객체를 나타내는 변수입니다. for...in 문을 사용하여 해당 객체의 속성을 순회합니다.

1-(3). for ... in 문 사용 예시

const person = {
  name: 'Yejin',
  age: 17,
  city: 'Busan'
};

//person 객체의 속성들을 반복하면서, 각 속성 이름과 해당 속성 값에 접근하여 출력
for (let key in person) {
  console.log(key + ': ' + person[key]);
}

1. person 객체의 속성들을 반복하면서 각 속성 이름과 해당 속성 값에 접근합니다.
2. key 변수에는 객체의 각 속성 이름이 순차적으로 할당되고, person[key]를 통해 해당 속성의 값을 가져올 수 있습니다.

//실행 결과
name: Yejin
age: 17
city: Busan

---

2. for...of 문

2-(1). for ... of 문이란?

for...of 문은 반복 가능한 객체(예: 배열, 문자열, 맵(Map), 세트(Set) 등)의 요소들을 반복하기 위해 사용되는 반복문입니다.

• for...of 문은 배열과 같이 순서가 있는 데이터 구조나 반복 가능한 객체를 다룰 때 유용하게 사용됩니다.
• 반복 가능한 객체의 각 요소에 순차적으로 접근하여 처리할 때 매우 간편하고 가독성이 좋은 반복문입니다.
• 단순 반복 횟수가 아니라 실제 요소에 접근할 때 사용하는 것이 특징입니다.

2-(2). for ... of 문의 구조

for (let element of iterable) {
  // 요소에 대한 처리
}

• element : 반복 가능한 객체에서 각 요소를 나타내는 변수입니다. for...of 문을 실행할 때마다 iterable 객체의 각 요소가 element에 할당되어 반복문을 실행합니다.
• iterable : 반복 가능한 객체를 나타내는 변수입니다. for...of 문을 사용하여 해당 객체의 요소를 순회합니다.

2-(3). for ... of 문 사용 예시

const fruits = ['apple', 'banana', 'orange'];

for (let fruit of fruits) {
  console.log(fruit);
}

• 반복문이 실행될 때마다 fruit에는 배열 fruits의 각 요소가 순서대로 할당됩니다.

//실행 결과
apple
banana
orange

---

3. forEach() 문

3-(1). forEach() 문이란?

forEach()는 JavaScript의 배열 객체에 내장된 메서드로, 배열의 각 요소에 대해 주어진 함수를 실행하는 반복적인 작업을 수행하는 데 사용됩니다.

Array 배열에서만 사용이 가능합니다.

• forEach() 메서드를 사용하면 배열의 모든 요소를 순회하며 간단하게 처리할 수 있습니다.
  ➡️각 요소에 대해 반복적인 작업을 수행해야 할 때 유용하게 사용됩니다.
• forEach() 메서드는 반복 도중 중단할 수 없으며, 배열의 모든 요소를 순회합니다.
  ➡️중간에 반복을 중단하거나 특정 조건에 따라 다른 동작을 해야 한다면
  for 루프나 for...of를 사용하는 것이 더 적절합니다.

3-(2). forEach() 문의 구조

array.forEach(function(element, index, array) {
  // 요소(element)에 대한 처리
});

• array : (맨 앞에 있는 array)반복할 배열 객체입니다.
• element : 배열의 각 요소를 나타내는 변수입니다. forEach() 메서드를 실행할 때마다 배열의 각 요소가 element에 할당되어 주어진 함수가 실행됩니다.
• index (선택적) : 배열 요소의 인덱스를 나타내는 변수입니다. 해당 요소의 인덱스를 나타냅니다.
• array (맨 뒤에 있는 array, 선택적) : 원본 배열 객체를 나타내는 변수입니다. 해당 배열 객체를 참조할 수 있습니다.

3-(3). forEach() 문 사용 예시

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number, index) {
  console.log('Index ' + index + ': ' + number);
});

• forEach() 메서드는 numbers 배열의 각 요소를 반복하면서 해당 요소와 인덱스를 출력합니다.

//실행 결과
Index 0: 1
Index 1: 2
Index 2: 3
Index 3: 4
Index 4: 5