[JS] 반복문 정리 (for, while, forEach 등...)

 

for 문

for 문은 조건식이 참일 경우에 증감식 구문을 거쳐 명령문 구문을 반복하여 실행합니다.

for (초기값; 조건식; 증감식) {
  조건이 참인 동안 실행할 명령문
}

// 예시
for (let i = 0; i < 10; i++) {
  console.log(i);
}

 

 

for in 문

for in 문은 객체의 모든 문자열로 된 키를 반복하여 열거합니다.

하지만 해당 문법은 자주 사용되지 않고 아래에 소개드릴 for of, forEach의 사용을 추천드립니다.

const object = { a: 1, b: 2, c: 3 };

for (const key in object) {
  console.log(`${key}: ${object[key]}`);
}

 

 

for of 문

for of 문은 반복 가능한 객체 ( String, Array, Map, Set ) 등의 객체의 값을 반복하여 열거합니다.

const fruits = ["Apple", "Banana", "Strawberry"];

for (const item of fruits) {
  console.log(item);
}

 

 

while 문

while문은 조건식이 참인 동안 반복하여 실행문을 실행합니다.

while (조건식) {
  조건식이 참인 동안 반복적으로 실행하고자 하는 실행문
}

// 예시
const fruits = ["Apple", "Banana", "Strawberry"];

while (fruits.length) {
  console.log(fruits.shift());
}

 

 

forEach 메서드

forEach 메서드는 배열의 각 요소에 대해 한 번씩 순회를 하며 콜백 함수를 호출합니다.

• value : 현재의 요소 값
• index : 현재의 Index(위치)
• array : forEach를 호출한 배열

Array.forEach((value, index, array) => { 
  배열을 순회할 동안 실행될 실행문 
});

// 예시
const fruits = ["Apple", "Banana", "Strawberry"];

const result = fruits.forEach((value, index) => {
  console.log(value, index);
});

console.log(result); // 반환값 없음

 

 

map 메서드

forEach 메서드와 마찬가지로 배열의 각 요소에 대해 한 번씩 순회를 하며 콜백 함수를 호출합니다.

 

하지만 map 메서드는 각 콜백 함수에 반환되는 결과를 모아 새로운 배열을 만들어 반환합니다.

• value : 현재의 요소 값
• index : 현재의 Index(위치)
• array : forEach를 호출한 배열

const newArray = Array.map((value, index, array) => { 
  배열을 순회할 동안 실행될 실행문 
  
  return 새로 구성할 값
});

// 예시
const fruits = ["Apple", "Banana", "Strawberry"];

const result = fruits.map((value, index) => {
  console.log(value, index);
  
  return `${index}: ${value}`;
});

console.log(result); // 반환 결과를 모아 새로운 배열 생성