자바스크립트 기초 : 반복문(Loop) 쉽게 이해하기

프로그래밍에서 똑같은 코드 여러번 작성하지 않고 특정 조건에 도달할 때까지 같은 동작을 반복하도록 하는 방법을 익히는 건 사실상 필수다.

본 포스팅에서는 JavaScript에서 사용할 수 있는 여러가지 반복문을 예제와 함께 다룬다. 최대한 쉽게.

  • for 문
    • 반복문에서 배열(array) 활용하기
    • 반복문 중첩해서 사용하기
  • while 문
  • do…while 문
  • break로 반복문 중단하기

for 문

가장 기본이라 할 수 있는 for 문부터 알아보자.

일단 기본 구조는 이렇다.

for ([initialExpression]; [conditionExpression]; [incrementExpression])
  statement
  • initialExpression (초기문) : 반복문 시작하기 위한 초기 조건 설정
  • conditionExpression (조건문) : 반목문을 끝내기 위한 종료 조건을 설정 (조건이 true이면 다음 반복, false이면 종료)
  • incrementExpression (증감문) : 반복문을 한 번 실행할 때마다 반복문에 사용되는 변수를 업데이트

그래서 예시를 보면 아래와 같다.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

i라는 변수를 0으로 설정한 후, i가 5보다 작을 때까지는 계속 실행하는 건데, 이 때 반복문을 돌 때마다 i는 1씩 더해진다. 그래서 위 코드를 실행하면 0, 1, 2, 3, 4가 차례로 출력된다.

만약 4부터 0까지 거꾸로 출력하고 싶다면 이렇게 응용해볼 수 있겠다.

for (let i = 4; i >= 0; i--) {
  console.log(i);
}

반복문에서 배열(array) 활용하기

배열에 있는 항목들을 하나씩 가져와서 무언가를 하고 싶을 때도 for문이 유용하다.

예를 들면 이렇게 쓸 수 있겠다.

const colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors .length; i++){
  console.log(animals[i]);
}

배열의 .length를 활용해서 전체 반복할 횟수를 구해놓은 뒤, i라는 인덱스를 1씩 증가시키면서 처리하는 방식.

위 코드를 실행하면 배열 안에 있는 항목들이 하나씩 순서대로 출력되는 걸 확인할 수 있다.

반복문 중첩해서 사용하기

반복문 안에 다른 반복문을 넣어서 사용할 수도 있다. 이를 Nested Loop 라고 부르는데 아무튼…

일단 예제를 보자. 숫자들이 담긴 두 개의 배열이 있는데, 그것들을 하나씩 꺼내서 비교하다가 똑같은 숫자가 있을 경우 그것만 출력하기.

const array1 = [5, 10, 15];
const array2 = [10, 20, 30];
for (let i = 0; i < array1.length; i++) {
  for (let j = 0; j < array2.length; j++) {
    if (array1[i] === array2[j]) {
      console.log(array[j])
    }
  }
};

우선 상위 반복문에서 array1의 첫번째 항목을 꺼내고, 그 안에서 하위 반복문으로 array2의 각 항목들을 차례로 꺼내 비교해본다. 그 다음 다시 array1의 두번째 항목을 꺼내고, 그 안에서 하위 반복문으로 array2 각 항목들을 차례로 꺼내 비교… 이걸 반복하는 거다.

while 문

while (조건문) 형식으로 반복문을 쓰면 이 조건이 참이기만 하면 무조건 반복한다.

1부터 4까지 차례로 출력하는 for문을 while문으로 고쳐쓰면 아래 예시와 같다.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

do…while 문

때로는 일단 코드를 실행한 다음 특정 조건에 따라 반복할지 그만둘지 결정하는 반복문을 만들어야 할 때도 있다. 이때 필요한 게 do…while 문이다. do…while 문은 일단 작업을 한 번 수행한 후 지정된 조건이 참인지 거짓인지 확인해서 참이면 반복, 거짓이면 중단한다.

0부터 4까지 차례로 출력하는 for문을 do…while문으로 고쳐쓰면 아래와 같을 거다.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let j = 0;
do {
  console.log(j);
  j++;
} while (j < 5);

while문과의 차이점이 있다면, do…while은 일단 코드를 실행하고 그 다음에 조건을 본다는 것.

while (true === false){
  console.log('이건 출력 안 된다.')
};

do {
 console.log('이건 출력된다.')
} while (true === false);

break로 반복문 중단하기

반복문 중간에 break를 사용해서 특정 조건이 참일 경우 반복문을 중단하고 빠져나올 수 있다.

예시를 보자.

let i = 0;
while (true) {
  console.log(i);
  i++;
  if (i === 5 ) {
    console.log("THE END");
    break;
  }
}

일단 while문 조건으로 true를 써줬기 때문에 무한 반복하는 반복문이다. i라는 변수를 출력하고 1 더하는 작업을 반복.

그런데 만약 중간에 만약 i가 4라면 중단하는 조건을 추가해보았다. 그러면 0,1,2,3,4까지는 제대로 반복하는데, 5차례에서는 if 조건문을 타고 가서 break를 만나고 반복문을 탈출한다.


자바스크립트 반복문 기초 예제는 여기까지.

추천 글

댓글 남기기