[javascript] 반복문

1. while

 

while안의 조건 결과가 true이면 내부에 문장을 계속해서 실행합니다.

var i = 1;
var j = 0;

while (i <= 10) {
	j += i;
	++i;
}

alert('결과 : ' + j);

예제는 while문이 실행되기 위한 조건으로 i <= 10을 작성하였습니다. 조건은 while 옆에 괄호를 통해 지정합니다.

 

i가 10보다 작거나 같으면(true) 아래 중괄호({}) 내부에 있는 코드를 실행하고 조건이 false가 되면 while반복문을 빠져나와 결과를 표시하게 됩니다.

 

조건이 true이면 계속해서 while문을 반복하면서 실행하므로 while실행문 내부에 조건이 false가 될 수 있는 구문을 작성해야 합니다. 그렇지 않으면 무한정 while문을 실행하는 '무한루프'상황이 발생합니다. 예제에서는 while문 내부가 실행될 때마다 마지막에 ++i 넣어 계속해서 i값을 증가시키고 있고, 결국 나중에 가서는 i <= 10이라는 조건에서 false가 떨어질 수 있도록 하였습니다.

 

while 실행구문이 1줄인 경우 중괄호는 생략할 수 있습니다.(다른 반복문도 마찬가지입니다.)

 

2. do while

 

while과 동작방식이 완전히 동일하지만 최초 처음 1번의 실행을 보장한다는 차이가 있습니다. 예컨대 위 예제에서 조금 수정하여 다음과 같이 코드를 작성했다면

var i = 100;
var j = 0;

while (i <= 10) {
	j += i;
	++i;
}

alert('결과 : ' + j);

while문은 단 한번도 실행하지 않을 것입니다. 처음부터 i의 값이 100이므로 i <= 10 조건에서 false가 되기 때문에 결과는 0이 됩니다.

 

하지만 똑같은 코드를 do while문으로 작성하면

var i = 100;
var j = 0;

do {
	j += i;
	++i;
} while (i <= 10)

alert('결과 : ' + j);

결과는 100이 됩니다. 보시는 바와 같이 do while문은 처음 한 번은 조건의 판단 없이 do 아래 구문을 실행하고 그다음에 while 옆에 있는 조건을 판단합니다. 이렇듯 do while문은 특정한 조건을 따지지 않고 처음 한 번은 반드시 실행해야 하는 환경에 사용하기 적합한 반복문입니다.

 

3. for

 

for는 while과 달리 초기 초기식과 종료식을 가지는 반복문입니다.

var arr = [1, 2, 3, 4];

for (var i = arr.length - 1; i >= 0; i--) {
	alert(arr[i]);
}

예제를 보시면 for괄호 옆에 ;문자로 세개의 식이 구분되어 있는데 처음은 초기식(var i = arr.length - 1), 중간은 조건식(i >= 0), 마지막은 종결식(i--)에 해당합니다.

 

초기식은 반복문이 시작하기 위해 초기값을 설정하는 단계입니다. 예제에서는 var로 변수 i를 선언하고 이 i의 값에 현재 arr 배 결의 길이를 대입하고 있습니다. for 반복문은 우선 초기식을 실행하고 뒤이어 조건식을 실행하여 true/false여부를 확인합니다. 조건식에서 true로 판단되면 for의 중괄호({})내부의 코드를 실행하고 그다음 종결식을 실행하여 i의 값을 1씩 차감하고 있습니다. 결국 for는 조건식이 false가 될 때까지 이 과정을 반복하게 됩니다.

 

초기식과 조건식, 종결식에 모두 같은 변수를 사용해 조건을 만들필요는 없지만 어쨌건 반복문을 실행하기 위한 조건과 종결식은 유념해서 만들어야 합니다. 그렇지 않으면 반복문 실행이 원하는 대로 되지 않을 수 있고 경우에 따라 '무한루프'로 빠질 수 있기 때문입니다.

 

4. for in

 

배열전용 반복문입니다. 배열 요소를 하나씩 꺼내기 위한 별도의 과정을 작성할 필요 없이 편리하게 배열을 순회할 수 있습니다.

var arr = [1, 2, 3, 4];

for (var ar in arr) {
	alert(arr[ar]);
}

예제에서는 var로 배열요소의 인덱스 값을 담을 ar변수를 생성하고 in 구문 뒤에 arr배열을 배치하여 arr내부 요소의 인덱스 값을 순서대로 가져오도록 하였습니다.

 

따라서 arr[ar]을 통해 배열에 현재 인덱스 값을 전달하면 요소의 값을 가져올 수 있게 됩니다.

 

5. for of

 

for in은 배열 요소의 인덱스를 가져오지만 of는 인덱스가 아닌 요소 값 자체를 가져오도록 합니다.

var arr = [10, 20, 30, 40];

for (var ar of arr) {
	alert(ar);
}

따라서 ar변수는 10... 40의 값을 가지게 됩니다.

 

6. break / continue

 

break와 continue는 키워드로서 반복문이 아닙니다. 하지만 반복문에서 자주 쓰이는 키워드이기에 같이 알아보고자 합니다.

 

break는 반복문을 중지하고 빠져나오도록 합니다.

var arr = [1, 2, 3, 4];

for (var i = arr.length - 1; i >= 0; i--) {
	alert(arr[i]);

	if (i == 2)
		break;
}

예제에서는 요소의 값을 확인하도록 하고 있는데 만약 요소의 인덱스가 2가 되면 break 구문을 통해 for문을 완전히 빠져나오도록 하고 있습니다. 따라서 결과는 4와 3까지만 표시하게 됩니다.

 

반면 continue는 현재 처리과정을 건너뛰고 다음반복문을 계속 수행하도록 하는 키워드입니다.

var arr = [1, 2, 3, 4];

for (var i = arr.length - 1; i >= 0; i--) {
	if (i == 2)
		continue;

	alert(arr[i]);
}

예제는 i가 2면 continue구문을 실행하도록 되어 있습니다. continue는 현재 처리를 중단하고 반복문을 빠져나오는 것이 아니라 현재 처리를 건너뛰고 다음 반복문을 수행하는 역할을 합니다. 따라서 결과는 4, 2, 1만 표시하게 됩니다.