자바스크립트 기본 문법 10 - 반복문 알아보기

반복문은 어떤 동작을 여러 번 실행할 때 사용한다. 불필요한 명령을 여러 번 복잡하게 쓰지 않고 반복문 하나로 간단하게 코드를 작성할 수 있다. 코드가 간단해지면 컴퓨터의 실행 속도는 더 빨라진다.

---

 

 

 

반복문은 왜 필요한까?

어떤 경우에 반복문이 필요한지 예를 들어 살펴보겠다.

1부터 5까지 더하는 프로그램을 생각해보자. 반복문을 사용하지 않는다면 다음과 같이 결과값에 숫자를 계속해서 더해야 한다.

 

반복문 없이 1부터 5까지 숫자 더하기

 

 

이럴 때 사용하는 것이 바로 반복문이다.

---

 

 

 

 

for 문 사용하기

for 문은 자바스크립트에서 가장 많이 사용하는 반복문이다. 기본 형식은 생략하고 다음 예제를 살펴볼 것이다. 앞의 코드를 for 문을 사용해 작성해보겠다.

 

for 문을 사용해 1부터 5까지 숫자 더하기

 

카운터 변수(i)에 초기값을 지정하고 조건(i < 6)이 맞으면 명령을 실행하고 마지막으로 카운터를 증가(i++)시킨다. 이제 1부터 1000까지 숫자를 더하는 코드를 작성해보자.

 

 

for 문을 사용해 1부터 1000까지 숫자 더하기

 

---

 

 

 

 

중첩된 for 문 사용하기

for 문 안에 다른 for 문을 넣어 사용할 수 있는데 이것을 중첩된 for 문이라고 한다. for 문은 중첩해서 사용하는 경우가 많다. 이 경우 안쪽 for 문을 모두 실행한 후 바깥쪽 for 문을 실행한다.

 

 

구구단의 경우 먼저 바뀌는 카운터 변수 j를 사용하는 for 문은 안쪽에, 나중에 바뀌는 카운터 변수 i를 사용하는 for 문은 바깥쪽에 배치한다. 여기서는 몇 단인지 제목을 <h3> 태 그로 표시하고 그 아래에 구구다을 표시한다.

 

for 문 2개로 구구단 만들기

 

 

 

 

구구단 전체 내용을 세로로 길게 표시하므로 한눈에 보기 어렵다. 각 단을 <div> 태그로 묶고 가로로 나열하여 구구단을 보기 좋게 만들어보겠다. 먼저 CSS 파일을 다음과 같이 작성한다.

 

 

구구단 스타일 시트 만들기

 

이렇게 스타일 시트를 만들었다면 구구단 소스 앞뒤에 <div>와 </div> 태그를 각각 추가한다.

 

 

 

스타일 시트를 반영한 구구단

 

---

 

 

 

 

while 문과 do~while 문 사용하기

while 문은 조건이 true인 동안 명령을 반복한다. for 문과 마찬가지로 while 문도 조건을 체크하고 true일 때만 명령을 반복하여 실행한다. 결국 조건이 false라면 명령은 한 번도 실행되지 않을 수 있다.

 

while 문과 달리 do~while문은 조건이 맨 뒤에 붚는다. 그리고 do 문은 일단 명령을 한번 실행한 후 while 문에서 조건을 체크한다. 그러므로 조건이 false라 하더라도 일단 명령은 최소한 한 번 실행된다. while 문은 조건부터 체크하지만 do~while 문은 일단 명령을 실행한 후 조건을 체크한다는 점에서 다르다.

 

다음 예제는 while 문을 사용하여 팩토리얼을 계산하는 프로그램이다. 팩토리얼은 반복문을 연습하기 좋은 예제라서 프로그래밍을 공부할 때 자주 등장한다. 여기에서 입력값은 변수 n이며 1부터 n까지 곱한 결과를 보여준다.

 

while 문으로 팩토리얼 만들기

 

 

---

 

 

 

 

break 문과 continue 문 사용하기

반복문은 지정한 횟수만큼 명령을 반복할 때 사용한다. 하지만 특정 조건에서 반복문을 멈추어야 하거나, 반복문 중간에서 앞으로 되돌아가야 할 경우가 있다. 이럴 때 break 문과 continue 문이 필요하다.

 

멈추는 break 문

반복문에서 조건의 역할은 면령이 조건에 맞는지 체크하고 명령을 반복한다. 조건 안에는 종료 조건도 포함되어 있 다. 하지만 종료 조건이 되기 전에 반복문을 빠져나와야 할 경우도 있다. 이럴 때 break 문을 사용한다.

 

break 문은 단독으로 사용할 수도 있고 반복문을 끝낼 조건과 함께 사용할 수도 있다. 예를 들어 앞에서 작성한 구구단 프로그램은 9단까지 표시했는데, 3단까지만 표시하게 할 수 있다. 이 예시는 카운터 변수값(i)이 3이면 종료하는 프로그램이다.

 

break 문으로 구구단을 3단까지만 표시하기

 

---

 

 

 

건너뛰는 continue 문

continue 문은 주어진 조건에 해당하는 값을 만나면 해당 반복문을 건너뛴다. 그리고 반복문의 앤 앞으로 되돌아가 다음 과정으로 넘어가도록 한다. 쉽게 말해 반복 과정을 한 차례 건너뛰게 하는 것이다.

 

다음은 숫자 1부터 10까지 중에서 짝수만 더하는 예제이다. i % 2는 짝수인지 홀수인지를 체크한다. i를 2로 나누어 나머지가 1이라면 i는 홀수이므로 i값을 계속 증가시키고, i % 2가 0이라면 짝수이므로 sum 변수에 i값을 더한다.

 

1부터 10까지 짝수만 더하기

 

---

 

 

 

DO IT 실습 - 자리 배치도 만들기 2

앞에서 작성한 실습에 이어 이번에는 입력한 값에 따라서 화면에 좌석을 배치하는 방법을 알아보겠다.

 

1단계 : for 문 구조 만들기

자리 배치도 만들기 1에서는 입장객 수(memNum)와 한 줄에 앉을 사람 수(colNum)를 입력받아 줄 개수(rowNum)를 결정했다. 이제 반복문을 사용해 좌석 번호를 그릴 수 있다.

 

다음과 같이 준비 파일에 입력된 document.write() 문을 모두 지우거나 주석 처리하라. 한 줄은 colNum만큼 반복해서 만들고, 그 줄은 다시 rowNum만큼 반복해서 만들어야 하므로 중첩된 for 문을 사용한다. 먼저 실행해야 할 값이 안쪽 for 문에 들어가므로 다음과 같이 for 문을 사용할 수 있다.

---

 

 

 

2단계 : 좌석 번호 만들기

안쪽 for 문에서 카운터 변수 j는 1부터 시작하는데 바깥쪽 for 문의 카운터 변수 i는 0부터 시작한다. 그 이유는 안쪽 for 문은 1부터 memNum까지 입장객의 좌석 번호를 표기하기 때문이다.

한 줄에 colNum만큼 좌석 번호를 표시하면 줄을 바꿔서 그 다음 좌석 번호를 표시해야 한다. 이렇게 하려면 좌석 번호를 나타내는 변수 seatNo를 다음과 같이 계산해야 한다.

이렇게 작성하면 첫 번째 줄의 좌석 번호가 1부터 표시된다.

---

 

 

 

3단계 : 좌석 번호 나열하기

이제 좌석 번호를 나열하는 방법을 알아보겠다. 좌석 번호를 체크해서 전체 입장객 수보다 커지면 반복을 멈추고 그렇지 않다면 화면에 나열하면 된다.

for 문 안에 다음 코드의 내용을 추가해보겠다. 그리고 한 줄에 colNum만큼 좌석 번호를 표시하면 줄을 바꿔야 하므로 바깥쪽 for 문에 줄을 바꾸는 <br> 태그도 표시한다.

 

 

지금까지 입력한 코드를 웹 브라우저에서 확인해보겠다.

 

 

 

---

 

 

 

4단계 : 좌석 번호를 표로 만들기

이번에는 나열된 좌석 번호를 표 형태로 바꿔 보겠다. 다음과 같이 기존 소스에 <table> 관련 태그를 추가하면 된다.

---

 

 

 

5단계 : 표 스타일 추가하고 결과 확인하기

이번에는 HTML 파일 안에 CSS를 추가하여 표의 테두리와 패딩 값을 조절해보겠다. 

 

 

지금까지 작성한 코드 전체

 

 

이제 웹 브라우저에서 HTML 파일을 열어보겠다. 자리 배치도가 표 형태로 보기 좋게 바뀐다.

 

 

---

 

 

 

학습을 마치고

이렇게 해서 반복문에 대한 이론과 실습을 진행해보았다. C언어와 자바 등을 공부할 때 모두 했던 내용이지만 한번 더 복습함으로 이전에는 잘 이해하지 못했던 continue에 대해서도 더 잘 알게 되었다. 그리고 구구단을 출력하는 문제도 이제는 스스로 작성할 수 있을 것 같다.

14장 학습을 마무리하며 연습문제를 풀어볼 것이다.