[JavaScript] for 문 정리 (for, for...in, for...of, forEach, for await...of)

for 문 정리 (for, for...in, for...of, forEach, for await...of)

들어가며

• 자바스크립트(JavaScript)에서 사용할 수 있는 for 문(@for@, @for...in@, @for...of@, @forEach@, @for await...of@)에 대해 간단하게 정리해본다.

 

종류

① @for@ 문

• 특정 횟수만큼 반복할 때 사용한다.

for (initialization; condition; increment) {
  // 반복할 코드
}

 

예제 코드

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

 

② @for...in@ 문

• 객체의 열거 가능한 속성을 반복할 때 사용한다.
• 배열(Array)에서도 인덱스를 반복할 수 있지만, 일반적으로 객체(Object)에 사용된다.

for (const key in object) {
  // key는 객체의 속성 이름
}

 

예제 코드

const person = { name: 'Alice', age: 25 };

for (const key in person) {
  console.log(key, person[key]);  // name Alice, age 25
}

 

③ @for...of@ 문

• 배열(Array), 문자열(String), Map, Set 등 iterable 객체의 값(Value)을 반복할 때 사용한다.

for (const value of iterable) {
  // value는 iterable의 각 값
}

 

예제 코드

const array = [10, 20, 30];

for (const value of array) {
  console.log(value);  // 10, 20, 30
}

 

for...in 문은 객체(Object)의 속성(Property)을 반복할 때 사용되고, for...of 문은 배열(Array), 문자열(String), Map, Set 등의 iterable 객체를 반복할 때 사용한다.

 

④ @forEach@ 문

• 배열의 각 요소에 대해 함수를 호출 할 때 사용한다.
• 배열(Array)에서만 사용할 수 있다.

array.forEach((element, index, array) => {
  // element: 현재 요소
  // index: 현재 요소의 인덱스
  // array: 배열 자체
});

 

예제 코드

const numbers = [1, 2, 3];

numbers.forEach((num, index) => {
  console.log(index, num);  // 0 1, 1 2, 2 3
});

 

(참고) forEach 문과 map 함수

• @forEach@ 문과 @map@ 함수는 둘 다 배열을 반복 처리하는 데 사용되지만, 주요 차이점이 있다.

 

@forEach@ 문

• 배열의 각 요소에 대해 지정한 작업을 수행할 때 사용하며, 반환 값을 생성하지 않는다.
  • 따라서 메서드 체이닝이 불가능하다.
• 배열의 요소를 변경하거나 출력하는 등의 사이드 이펙트가 발생하는 경우에 주로 사용한다.

const numbers = [1, 2, 3];

numbers.forEach((num, index) => {
  console.log(index, num);  // 0 1, 1 2, 2 3
});

 

@map@ 함수

• 배열의 각 요소를 변형하여 새 배열을 생성할 때 사용한다.
  • 원본 배열을 변경하지 않고, 변형된 새 배열을 반환한다.
  • 배열을 반환하므로 메서드 체이닝이 가능하다
• 주로 각 요소를 변형하거나 계산하여 새 배열을 생성할 때 사용된다.

const numbers = [1, 2, 3];

const squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers);  // [1, 4, 9]

 

 

⑤ @for await...of@ 문

• 비동기 이터러블 객체에서 값을 반복할 때 사용한다.
• @async@ 함수 내에서만 사용할 수 있다.

for await (const value of asyncIterable) {
  // value는 asyncIterable의 각 값
}

 

예제 코드

async function* asyncGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

(async () => {
  for await (const value of asyncGenerator()) {
    console.log(value);  // 1, 2, 3
  }
})();