[JS] 반복문 (for, while, for in, for of, do-while)

반복문이란?

반복문은 반복적인 일을 수행해야할 때 사용한다

똑같은 코드를 10번 반복하는 것은 굉장히 비효율적임

때문에 반복적인 코드의 양을 획기적으로 압축하고 반복적인 일의 수행을 효율적으로 처리하도록 도와줌
for, while이 대표적이며 for in, for of, do-while이 존재함

반복문에서 사용할 수 있는 break와 continue도 알아보자

for문

for (let i = 0; i<10; i++){
    // 반복을 수행할 코드
}

• 최초식(반복의 기준) : let i=0 // 반복문에서 선언되는 변수는 for문 내부에서만 활용 가능
• 조건식(해당 조건인 경우 반복실행) : i < 10 // i가 10이하일 경우 반복 실행
• 증감문 : i++ // 로직이 종료할 때 마다 i에 1을 더해 재할당

for 문은 특정 숫자를 가지고 숫자의 값을 비교

while문

let i = 0;

while (i<10){
    //반복할 코드
    i++
}

• 최초식 : let i=0
• 조건식: i < 10
• 증감문 : i++

while 문은 특정 조건을 가지고 비교를 함. 참일 경우 무한실행. 고로 false가 되는 조건을 붙여줘야함

 

🧨while문 주의사항

: 종료 조건을 제대로 설정하지 않으면 무한반복하여 메모리에 과부하 우려 (무한루프)

// 1. 종료조건 제대로 설정안함
let i = 0;
let status = true

while(status === true){
    console.log(i)
    i++
}

// 2. 수정 ver
let i = 0;
let status = true

while(status === true){
    console.log(i)
    if (i >10){
        status = false
    }

    i++
}

 

🔍 실전! 반복문 활용방법

: 배열에 담겨져있는 요소 하나하나에 접근가능

let arr = [1,2,3,4,5]

for(let i=0; i<arr.length; i++){
  console.log(arr[i]) // 1,2,3,4,5 출력
}

for...in문

for...in문은 객체에서 사용한다

객체(Object)의 프로퍼티 갯수에 따라 반복한다

const dog = {
  name : 'chu',
  age : 23
}

for (let key in dog){
  console.log(key) // name, age (key 반환)
  console.log(dog[key]) // 'chu', 23 (value 반환)
}

for...in문을 사용하지 않고 객체의 정보를 배열 형태로 받아올 수 있는 함수 Object.entries(), Object.keys(), Object.values()를 사용해도 된다

 

for...of문

for...of 문은 반복 가능한 객체(Array, Map, String, Argument object 등)에서 사용할 수 있다

마찬가지로 객체의 프로퍼티 갯수에 따라 반복한다

const arr = [1, 2, 3, 4, 5]

for(let el of arr) {
    console.log(el) // 1,2,3,4,5
}

do...while문

do...while문은 조건문을 확인하기전 코드를 한 번 실행한다. 고로 조건이 맞지 않더라도 최소한 한 번은 실행한다

실무에서 거의 쓰이지 않는다

let i = 5;
do {
  i += 1;
  console.log(i);
} while (i < 5); // 6

 

break와 continue

반복문은 break와 continue를 사용해 반복문을 빠져나오거나 건너 뛸 수 있다

 

break

반복문에서 break를 만나면 즉시 반복문에서 빠져나온다

for (let i = 0; i < 10; i++) {
  if (i === 5) break; // 반복문을 끝냄
  console.log(i); // 0,1,2,3,4
}

 

continue

continue는 반복문에서 현재 반복을 종료하고, 다음 반복으로 이동함

break문과 달리 전체 루프의 실행을 종료하는 것은 아님

while에서는 다시 조건으로 이동, for에서는 증가 표현으로 이동함

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

 

참고

본 글은 훈훈한 자바스크립트 강의의 내용과 참고글을 참고해 정리한 글입니다

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration