자바스크립트 - 반복문

컴퓨터는 인간보다 연산 능력이 뛰어나므로 작업을 바르게 반복할 수 있습니다. 자바스크립트로 컴퓨터에 반복을 명령하는 방법은 아주 간단합니다. 프로그래머 최후의 무기인 복사해서 붙여 넣기 기술을 사용하면 됩니다. 예를 들어 다음 코드는 '출력'을 다섯 번 출력합니다.

<script>

alert('출력');

alert('출력');

alert('출력');

alert('출력');

alert('출력');

</script>

하지만 복사해서 붙여넣기를 사용해 경고장을 1000번 출력하는 것은 무리입니다.

"저는 할 수 있습니다!"

물론 할 수는 있겠지만, 반복문을 사용하면 훨씬 쉽게 출력할 수 있습니다. 다음 코드는 경고창을 1000번 출력합니다. 단 인터넷 익스플로러는 경고장 출력을 중간에 종료할 수 없기 때문에 코드를 실행하면 무서운 현실과 마주할 수 있습니다.

<script>

for (var i = 0; i < 1000; i++) {

alert('출력');

}

</script>

이렇게 여러 번 반복하는 일을 간편하게 처리할 수 있는 배열과 반복문을 알아보겠습니다.

6.1 배열

배열은 변수 여러 개를 한꺼번에 다룰 수 있는 자료형입니다.자바스크립트에는 숫자, 문자열, 불, 함수, 객체, 정의되지 않은 자료형까지 총 6개의 자료형이 있습니다. 배열은 객체의 일종이며, 다음 코드처럼 대괄호([])를 사용해 생성합니다. 대괄호 내부의 각 자료는 쉼표로 구분합니다.

// 변수르 선언합니다.

var array = [273, 32, 103, 57, 52];

배열 내부에 입력된 자료 하나하나를 요소라고 합니다. 다음 코드는 요소가 6개인ㅇ 배열입니다. 배열 내부에 다양한 자료형을 입력할 수 있고, 배열 전체를 출력하면 [그림 9-6]처럼 요소가 순서대로 표시됩니다.

<script>

// 변수를 선언합니다.

var array = [273, '문자열', trye, tunction () { }, {}, [32, 103];

alert(array);

</script>

배열의 각 요소에 접근하려면 배열 이름 뒤에 대괄호를 사용해 순번을 입력합니다. 예를 들어 앞의 코드에서 true에 접근하려면 array[2]를 입력합니다. 배열의 요소에 접근하는 데 사용하는 대괄호안의 숫자는 인덱스라고 하며 0부터 시작합니다. 인덱스라는 이름은 자주 등장하므로 꼭 기억해 주세요.

기본 예제 9-8 배열 생성하고 접근

다음 코드는 배열을 생성하고 인덱스를 사용해 요소에 접근합니다. 인덱스의 시작 숫자에 주의해서 봅니다.

[코드 9-26] 배열 생성과 배열 요소 ㅈ덥근

<script>

// 변수를 선언합니다.

var array = ['가', '나', '다', '라'];

// 배열의 요소를 변경합니다.

array[0] = '윤';

// 요소를 출력합니다.

alert(array[0]);

alert(array[1]);

alert(array[2]);

alert(array[3]);

</script>

NOTE_ length 속성

배열 변수의 length 속성을 사용하면 배열 요소의 개수를 간단하게 알 수 있습니다. [코드 9-27]을 실행하면 위 코드의 결과와 같이 배열의 요소 개수인 5를 출력합니다. 사실 객체를 배운 이후에 다루어야 하지만 간단한 내용이므로 지금 다루었습니다.어려운 내용이 아니므로 기억하기 바랍니다.

[코드 9-27] 배열의 length 속성

<script>

// 변수를 선언합니다.

var array = [10, 20, 30, 40, 50];

// 출력합니다.

alert(array,length);

</script>

6.2 while 반복문

while 반복문은 가장 기본적적인 반복문입니다. if 조건문과 형식이 비슷하지만 , if 조건문과 달리 불 표현식이 참이면 중괄호 안의 문장을 계속 실행합니다.

while (불 표현식) {

문장

}

while 반복문 순서도와 기본 형태 [그림 9-8]

조건이 변하지 않으면 무한 반복하므로 반드시 조건을 거짓으로 만들 수 있는 문장을 포함해야 합니다. 다음 코드를 작성하면 조건이 항상 참이므로 경고창을 계속 출력합니다. 이번 예제도 인터넷 익스플로러에서 실행하며 ㄴ웹 브라우저를 종료할 수 없는 무서운 현실과 또 다시 마주할 것입니다.

이때는 작업관리자에서 강제로 웹 브라우저를 종료합니다.

<script>

// 반복을 수행합니다.

while (true) {

alert('무한 반복');

}

</script>

기본 예제 9-9 while 반복문

다음 코드는 특정한 숫자를 증가시켜 볼 표현식을 거짓으로 만들어 반복문을 벗어납니다.

[코드 9-28] while 반복문 사용

<script>

// 변수를 선언합니다.

var i = 0;

var array = ['가', '나', '다'];

// 반복을 수행합니다. i가 배열 원소 개수인 3보다 작을 때 반복합니다.

while (i < array.length) {

// 출력합니다.

alert(i + '번째 출력: ' + array[i];

// 탈출하려고 변수를 더합니다.

i++;

}

</scirpt>

6.3 for 반복문

while 반복문 외에도 for 반복문이 있습니다. for 반복문은 원하는 횟수만큼 반복하고 싶을 때 사용합니다. 처음 접한다면 굉장히 어려운 반복문이므로 그림으로 설명하겠습니다.

for 반복문은 먼저 초기식을 실행하고 조건식을 확인합니다. 이 때 조건식이 거짓이면 반복문을 빠져나가고, 참이면 문장과 종결식을 차례로 실행한 후 다시 조건식이 참인지 확인합니다. for 반복문은 이러한 일을 계속 반복합니다.

for (초기식; 조건식; 종결식) {

문장

}

[그림 9-9] for 반복문 순서도와 기본 형태

for 반복문을 각 단계별로 설명하면 다음과 같습니다. 한두 번 직접 사용해 보면 쉽게 이해할 수 있을 것입니다.

1. 초기식을 비교합니다.

2. 조건식을 비교합니다. 조건이 거짓이면 반복문을 종료합니다.

3. 문장을 실행합니다.

4. 종결식을 실행합니다.

5. 2단계로 이동합니다.

어렵게 설명했지만 for 반복문은 일반적으로 다음 코드 형태로 특정한 횟수만큼 반복합니다.

for (var i = 0; i < length; i++) {

}

기본 예제 9-10 for 반복문

다음 코드는 while 반복문을 살펴보면서 다루었던 예제와 같은 기능을 수행합니다.

[코드 9-29] for 반복문 사용

<script>

// 변수를 선언합니다.

var array = ['가', '나', '다'];

// 반복을 수행합니다.

for (var i = 0; i < 3; i++) {

// 출력합니다.

alert(i + '번째 출력: ' + array[i]);

}

</script>

NOTE_ 외부 요인으로 조건 변경

"언제 while 반복문을 사용하고, 언제 for 반복문을 사용해야 하나요?"

대개 for 반복문을 만힝 사용하고, while 반복문은 외부 요인으로 조건이 변경될 때 사용합니다.

외부 요인으로 조건이 변경된다는 것이 어떤 의미인지 예제로 살펴보겠습니다. [코드 9-30]처럼 Date 객체의 get Time() 메소드를 사용하면 1970년 1월 1일 자정부터 밀리초 간격을 알 수 있습니다. 코드를 실행하면 [그림 9-10]처럼 출력됩니다. 웹 페이지를 실행하고 1초(1000밀리초)가 지난 이후에 반복 횟수를 출력합니다. 시간이 지나면서 외부 요인으로 조건이 변경되어 반복문을 빠져나갑니다.

[코드 9-30] 외부 요인으로 조건 변경

<script>

// 변수를 선언합니다.

var start = new Date(),getTime();

var count = 0;

// 반복을 수행합니다.

while (start + 1000 > new Date(),getTime()) {

count++;

}

// 출력합니다.

alert(count + '만큼 반복했습니다.');

</script>

[그림 9-10] 외부 조건 변경

기본 예제 9-11 for 반복문을 사용한 덧셈

0부터 100까지 더하는 예제를 만들어 보겠습니다. 먼저 스스로 생각해 보고 코드를 살펴보세요. for 반복문을 처음 접하면 굉장히 어렵습니다. 반드시 직접 사용해 보면서 익히기 바랍니다.

[코드 9-31] 1부터 100까지 합 계산

<script>

// 변수를 선언합니다.

var output = 0;

// 반복을 수행합니다.

for (var i = 0; i <= 100; i++) {

output += i;

}

// 출력합니다.

alert(output);

</script>

〔<= 100까지 더해야 하므로 <=연산자를 사용합니다.〕