[JS] 반복문 for와 그 형제들(for of, for in, forEach)

1.반복문

• 1. for 문 : 반복 횟수가 명확할 때 주로 사용한다.
     • 참고로 for 루프(블록 스코프)내에서 var 키워드로 선언된 변수는 for 루프 밖에서도 사용할 수 있으므로 주의.

  for (변수 선언문 또는 할당문; 조건식; 증감식) {
    조건식이 참인 경우 반복 실행될 문;
  }

• 2. while 문 : 반복 횟수가 불명확할 때 주로 사용한다.

  var count = 0;
  while (true) {
    console.log(count);
    count++;
    if (count === 3) break;  //무한루프 탈출하려면 코드 블록 내에 if 문으로 조건을 만들고 break 문으로 코드 블록 탈출
  }

• 3. do...while 문 : 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한 번 이상 실행된다.

  var count = 0;
  do {
    console.log(count); // 0 1 2
    count++;
  } while(count <3);

2. for of 문

이터러블을 순회할 수있는 for...of 문

• 배열에 대한 반복

  const fruits = ['a', 'b', 'c'];
  for (const fruit of fruits) {
    console.log(fruit);
  }
  // a, b, c

• 객체에 대한 반복

  • 객체는 이터러블이 아니다. 그러면 객체의 키/값 쌍에 대한 반복은 어떻게 구현할 수 있을까?

    • 먼저 Object.keys()를 사용하여 객체의 모든 키를 가져온 후, 키에 대한 반복을 수행하면서 값에 접근하는 것이 가능하다.
    • 또는 Object.entries()를 사용하여 객체의 모든 키/값 쌍을 가져온 후, 각 키/값 쌍에 대한 반복을 수행하는 방법도 있다.

    const car = {
      maker: 'Bmw',
      color: 'red',
      year: '2010',
    };
    
    for (const key of Object.keys(car)) {
      const value = car[key];
      console.log(key, value);
    }
    /* maker Bmw
    color red
    year 2010 */

3. for in 문

객체의 프로퍼티를 열거할 때 사용하는 for...in 문

for in은 배열의 속성(키)의 목록을 반환한다.
for in 루프는 순서 없이 객체의 모든 열거 가능한 속성을 반복한다.

const car = {
  maker: 'Bmw',
  color: 'red',
  year: '2010',
};

for (const key in car) {
  console.log(key, car[key]);
}
/* maker Bmw
color red
year 2010 */

4. forEach 문

• Array.prototype.forEach : for 문을 대체할 수 있는 고차 함수이다. 반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다. undefined를 반환한다.

  • 매개변수 3개(요소값, 인덱스, this)

    const numbers = [1, 2, 3];
    const pows = [];
    
    numbers.forEach((number) => pows.push(number ** 2));
    console.log(pows); //[1, 4, 9]

    const numbers = [1, 2, 3];
    //forEach 메서드는 원본 배열을 변경하지 않지만 콜백 함수를 통해 원본 배열을 변경할 수는 있다.
    // 콜백 함수의 세 번째 매개변수 arr은 원본 배열 numbers를 가리킨다.
    //따라서 콜백 함수의 세 번째 매개변수 arr을 직접 변경하면 원본 배열 numbers가 변경된다.
    numbers.forEach((item, index, arr) => {
      arr[index] = item ** 2;
    });
    console.log(numbers); //[1, 4, 9]