게시글

5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭
강좌6 - JavaScript - 9년 전 등록 / 8년 전 수정

반복문(loop - while, for, do)

이번 시간에는 반복문에 대해 알아보겠습니다!

반복문

프로그래밍에서는 코드를 반복해야 할 일이 많습니다. 제 홈페이지만 보더라도 많은 반복문이 사용되었습니다. 어디에  사용되었을 지 한 번 찾아보세요. 카테고리 메뉴의 카테고리를 만드는 데 사용되었고, 댓글을 반복적으로 표시하는 데에도 사용했습니다. 또한 게시글의 리스트를 만들 때 리스트 아이템을 만들 때도 사용했네요. 반복문을 사용하면 단순히 똑같은 코드를 반복하기도 하지만, 반복할 때마다 숫자를 1씩 더한다든지의 행동을 할 수도 있습니다.

반복문은 forwhile이 대표적입니다.

For

for (var i = 0; i < 10; i++) {
  alert(i);
}

뭔가 복잡해 보이네요. for문은 for (시작; 조건; 끝) { 내용 } 이렇게 구성 되어 있습니다. 위의 예시를 분석해보면 시작은 var i = 0;으로 하고, 조건은 i < 10이고, 끝은 i++입니다.

즉, for문을 돌기 전에 var i = 0;으로 시작합니다. i라는 변수를 만들고 0 값을 넣어 초기화했죠? 

그러고나서 조건을 비교합니다. i가 0이니까 10보다 작죠? 그러면 내용을 실행합니다. alert(i);를 해서 0 메시지가 출력되었습니다. 그 후 끝인 i++를 실행합니다. 그래서 i가 1이 됩니다.

이제부터 반복입니다. 조건을 비교하고, 조건과 맞으면 내용을 실행한 후  i++를 합니다. i가 10이 될 때까지 반복됩니다. 결과적으로는 0부터 9까지 메시지가 10번 출력되겠죠?

While

while도 비슷합니다. 위의 for문을 while로 만들어 보겠습니다.

var i = 0;
while (i < 10) {
  alert(i);
  i++;
}

while문은 while (조건) { 내용 } 이렇게 구성됩니다. 위의 for문과는 같은 결과를 내지만, 시작부분은 while 전에 써주고, 끝 부분은 while 내용 안에 직접 써주어야 합니다.

for과 while의 사용법

언제 for을 사용하고, 언제 while을 사용하느냐가 궁금하실 겁니다. while은 조건밖에 없기 때문에 몇 번 반복될 지 모를 때 주로 사용되고, for문은 반복 횟수를 정할 수 있기 때문에 몇 번 반복될 지 알 때 주로 사용됩니다.

break과 continue

while문 안에 break;를 반복문을 넣으면 중단할 수 있습니다.

var i = 0;
while (i < 10) {
  if (i > 5) {
    break;
  }
  alert(i);
  i++;
}

원래 0부터 9까지 alert해야하는데 5까지만 alert하고 중단됩니다. break를 적시적소에 활용하면 좋습니다. 특히 원하는 결과값은 이미 찾았지만 반복문은 남은 상황에서 사용하면 좋습니다. break을 사용하면 쓸데없이 끝까지 반복문을 돌릴 필요 없이 반복문에서 탈출할 수 있으니까요.

break과 비슷한 것으로 continue가 있습니다.

var i = 0;
while (i < 10) {
  i++;
  if (i % 2 === 0) {
    continue;
  }
  alert(i);
}

반복문을 끝까지 돌기는 하지만, continue가 있으면 그 아랫부분은 실행하지 않고 다음 반복문으로 넘어갑니다. 위의 경우는 i가 짝수일 때 continue를 합니다. 따라서 1부터 10 사이의 홀수만 alert를 하고 넘어갑니다. continue는 반복문의 공통된 수행 작업에서 예외를 두고 싶을 때 사용하면 좋습니다.

Do ~ While

while의 변형으로 do ~ while도 있습니다.

var i = 0;
do {
  alert(i);
  i++;
} while (i < 10)

비슷하긴 한데요. do ~ while은 그냥 while에 비해 내용을 먼저 실행한 후에 조건을 비교합니다. while은 조건을 먼저 비교한 후에 내용을 실행하고요. 그러니까 do ~ while은 내용이 최소 1번은 실행된다는 거죠. while이나 for보다는 잘 쓰이지 않습니다.

주의

반복문을 할 때 조심해야할 점은, 절대로 무한 반복되는 상황을 만들어서는 안 된다는 겁니다. 바로 위의 코드에서 i++;를 빼면, i는 영원히 0이고, i는 영원히 10보다 작기때문에 계속해서 반복문이 실행됩니다. 그렇게 되면 프로그램은 메모리 부족이나 CPU 풀가동으로 멈추고 맙니다. 항상 결과를 예측하고 반복문을 만드세요! (물론 예측을 하고 만든다고 해서 오류가 나지 않는 것은 아닙니다. 여러분은 앞으로 제대로 예측한 줄 알았지만 실제로는 아니었던 상황과 싸우셔야합니다...)

이상으로 기초적인 반복문에 대해서 알아봤습니다. 다음 시간은 지금까지 배운 것을 바탕으로 간단한 프로그램을 만들어 보겠습니다. 이왕이면 게임이 좋겠죠? 재밌으니까요.

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.
5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭

댓글

7개의 댓글이 있습니다.
4년 전
for 문 오타 문제 였네요. 해결 했습니다.
4년 전
안녕하세요. 별찍기 반복문 관련 질문 있습니다.
While 문을 for 문으로 변환시 결과 값이 다르게 나오는 이유를 알 수가 없네요.

let n = 4;
while (n >= -4) {

console.log(' '.repeat(Math.abs(n) / 2) + '*'.repeat(5 - Math.abs(n)));
n = n - 2
} // let 별찍기


for (let n = 4; n >= -4, n = n -2;) {
console.log(' '.repeat(Math.abs(n) / 2) + '*'.repeat(5 - Math.abs(n)));
} // for 별찍기
5년 전
👍
7년 전
zero님 질문이있습니다.
자바스트립트에서 do~while문의 경우 do{ }while( )과 do{ } while( );이 동일하게 제대로 작동이 됩니다.
C/C++에서는 do~while문에서 반드시 ;을 붙이게 되어 있는데 자바스크립트에서는 굳이 do~while문에서 ;을 붙이지 않아도 되는지 알고 싶습니다.
5년 전
안 붙여도 됩니다.
7년 전
그럼 for in문을 쓰게 될 경우
객체 외에 배열을 함수 내에 작성하면 안 되는 건가요???

아니면 용도에 맞게 작성할 경우
객체와 배열을 동시에 작성 할 수 있는 건가요???
7년 전
for in문으로 배열을 직접 반복문 돌리지 않는 이상 써도 됩니다. 그냥 for (i in 배열)만 하지 말라는 뜻이에요
7년 전
저도 질문이 하나 있습니다.
For in을 쓸 때 배열을 사용하지 말라고 하면서
var data = [.....]
Array.prototype.test = function(){...}

for(i in data) {console.log(data[i])
라는 예시를 들어줍니다.

그러면서 프로토타입으로 확장된
멤버까지 열거된다고 하는데

왜 명시하지 않은 프로토타입이
열거 되는 건가요???
7년 전
for in은 원래 객체의 속성을 반복하는 반복문입니다. 특성상 객체의 속성을 모두 나열합니다. 이 때 프로토타입까지 나열합니다. 배열도 객체이긴 하지만 for in문이 배열 전용 반복문이 아니기 때문에 사용하지 말라는 것입니다.
8년 전
안녕하세요 질문이 하나 있는데요

var i = 0;
while (i \u003c 10) {
i++;
if (i % 2 === 0) {
continue;
}
alert(i);
}

해당 문으로 하면 첫번째 값이 1 로 시작을 합니다
그래서 i++ 와 alert(i) 코드순서를 이리저리 다 바꾸어 봤는데
문구상의 의미는 맞는데 결과값은 제대로 작동을 안하더군요

첫번째 지정된 0 값부터 나올 수 있게 하려면 어떻게 코딩해야 할까요?
8년 전
위 코드에서 0은 안 나옵니다. 왜냐면 0은 짝수이기 때문이죠.