반복문 for-loop, for-in, for-of, forEach, while 문 비교

Introduction

조건문과 반복문만 있으면 어떤 프로그래밍이든 할 수 있다는 말이 있는 만큼 반복문은 중요하다.
반복문은 특정 코드 블록을 정해진 횟수만큼 반복해서 실행되게 만드는 제어문으로, 여러 가지 형태로 제공된다.
for-loop, for-in, for-of, forEach, while문의 특징을 비교하여 차이점을 알아보자.

for-loop문

for-loop는 가장 일반적으로 사용되는 반목문이다.

// syntax
for(initialisation; condition; update) {
  // 실행될 코드
}

// example
let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];

for (let i = 0; i < length; i++) {
  console.log(brands[i]);
  // **결과**
  // 애플
  // 구글
  // 아마존
  // 마이크로소프트
  // 메타
}

• initialisation: for-loop문 실행할때 무조건 딱 한번 실행되는 초기화 부분
• condition: 코드 블록을 실행시킬 조건절이며, false이면 루프가 중지된다.
• update: 코드 블록을 실행한 후 실행되는 코드이다.

실행될 코드 부분에서 break;를 만나면 for-loop가 종료되며, continue;를 만나면 update로 바로 이동한다.

for-in문

// syntax
for (key in object) {
  // 실행될 코드
}

// example
let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];

for (const key in brands) {
  console.log(key, brands[key]);
  // **결과**
  // 0 애플
  // 1 구글
  // 2 아마존
  // 3 마이크로소프트
  // 4 메타
}

let person = {
  name: "홍길동",
  age: 22,
  tel: "010-0000-0000",
  city: "Seoul",
};

for (const key in person) {
  console.log(key, person[key]);
  // **결과**
  // name 홍길동
  // age 22
  // tel 010-0000-0000
  // city Seoul
}

위 코드처럼 사용하며, object(객체) 반복에 유용하다.

참고로 key값은 string이다.

for-of문

// syntax
for (let value of array) {
  // 실행될 코드
}

// example
let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"]; // Array Object
for (const brand of brands) {
  console.log(brand);
  // **결과**
  // 애플
  // 구글
  // 아마존
  // 마이크로소프트
  // 메타
}

const lang = "JavaScript"; // String Object

for (const char of lang) {
  console.log(char);
  // **결과**
  // J a v a S c r i p t
}

let num = 90123; // Number Object
let numString = num.toString(); // Number Object -> String Object 변환

for (const n of numString) {
  console.log(n);
  // **결과**
  // 9 0 1 2 3
}

위 코드처럼 사용하며, array(배열), string(문자열) 반복에 유용하다.

forEach문

// syntax
array.forEach(function(item, index) {
  // 실행될 코드
});

// example
let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"];

brands.forEach(function(item, index) {
  console.log(item, index);
  // **결과**
  // 애플 0
  // 구글 1
  // 아마존 2
  // 마이크로소프트 3
  // 메타 4
});

함수를 파라미터로 가지며, 그 함수를 통해 반복문을 제어한다.

break;로 종료되지 않는다.

while문

// syntax
while(expression) {
  // 실행될 코드
}

// example
// 반복을 몇번해야 할지 모를 때 주로 많이 사용
let inputCoin = 7000;
let coinUnit = 500;
let coinCount = 0;

console.log("고객이 넣은 금액", inputCoin); // 고객이 넣은 금액 7000

while (inputCoin > 0) {
  inputCoin = inputCoin - coinUnit;
  coinCount++;
}

console.log("교환 동전 유닛", coinUnit); // 교환 동전 유닛 500
console.log("교환 동전 개수", coinCount); // 교환 동전 개수 14

조건을 평가하는 것으로 시작하며, 조건식을 만족하는 동안 코드 블록을 실행함.
while문 안에 while문을 종료할 수 있는 코드가 반드시 존재 해야 한다.

무한루프에 빠지지 않도록 유의해서 사용하자.

결론

반복문들을 그냥 보았을 때 forEach문이 함수 형태로 제공되어 명시적으로 읽기가 편했다.
하지만 javascript에서는 같은 기능이라도 적재적소에 쓸 수 있도록 여러 가지 형태로 제공되기에 모든 반복문을 잘 숙지해놓는 것이 좋을 것 같다.