[javascript] 반복문 (for문, break, continue)

예전 회사 내부에서 스터디용으로 작성했던 글입니다.

(에버노트에 작성했던걸 가져왔더니 

글 여백이나 줄바꿈 수정이 힘드네요..ㅠ)

 

---

Simple & Easy free online tools. image-resizer, image-color-picker, json-viewer and more.

for 반복문은 보통 코드를 지정한 수만큼 실행할 경우에 사용합니다.

반복문을 사용하게 되면 반복되거나 순차적인 코드를 손쉽게 처리할 수 있습니다.

javascript 의 반복문은 for문 외에도 while, do..while, for..in 문 등이 있습니다.

 

for 문의 형식은 다음과 같습니다.

1 2 3

for ([초기화부]; [조건부]; [순회표현식]){     [수행부] }

초기화부 (initialization)

초기화 부는 한번만 실행되며, 일반적으로 변수에 값을 지정하거나 변수를 선언합니다. 일반적으로 카운트(count) 할 수 있는 변수를 사용하거나 선언하며, 이곳에 선언한 변수의 접근영역(scope)은 for 문 안에 머무르는게 아니라 for 문 밖에서도 접근이 가능합니다.

조건부 (condition)

조건부는 for 문이 순환하기 전 조건이 참인지 거짓인지 판별합니다. 조건이 참이면 수행부를 순회하며, 조건이 거짓이면 for 문을 빠져 나옵니다.

순회표현식 (loop-expression)

순회표현식은 for 문을 순회하는 동안 한번의 순회가 끝나면 실행되는 구문입니다. 일반적으로 초기화부에 선언한 카운트 변수를 갱신, 가감 하는데 사용됩니다.

수행부 (statement)

조건부의 조건이 참인 경우 실행하게 되는 구문입니다.

실 사용예를 보겠습니다.

1 2 3 4

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

일반적으로 사용하는 구문입니다. 그럼 변수 sum 과 i 의 값을 출력해보면 값은 어떻게 나올까요?

1 2 3 4 5 6

var sum = 0; for (var i = 0; i < 10; i++) {     sum += i; } console.log(sum); //45 console.log(i); //10

변수 sum 은 45, 변수 i 는 10 이 나옵니다. 
for 문의 실행 주기(execute-cycle)를 모르는 경우 변수 sum 이나 i 의 값을 틀리기 쉽습니다. 특히 변수 i 를 10이 아닌 9 로 생각하시는 분들이 꽤 있을겁니다. 
왜 10이 나오는지 아래 실행 주기를 참고해 보세요.

 

1. 초기화부에서 변수 i 를 0 으로 선언. 
2. 조건부에서 i(0)는 10 보다 작으므로(조건 참) 순환부 순회. 
3. 순회표현식에서 i 를 1 증가. 
4. 조건부에서 i(1)는 10 보다 작으므로(조건 참) 순환부 순회. 
5 ... 19 
20. 조건부에서 i(9)는 10 보다 작으므로(조건 참) 순환부 순회. 
21. 순회표현식에서 i 를 1증가. 
22. 조건부에서 i(10)는 10보다 작지 않으므로(조건 거짓) 종료.

위와 같이 i 가 10이 되는 시점에 조건부에서 거짓이 판명나고, for문을 빠져나오게 됩니다.

 

break

코드 B1

1	for (var i = 0; i < 10; i++) {     if (i == 5) { // i 가 5 와 같을 경우         break; // for 문 종료     }     console.log(i); // 0,1,2,3,4 }

위 [코드 B1] 과 같이 break 문은 반복문을 종료시키는 용도로 사용합니다.

코드 B2

1	for (var i = 0; i < 10; i++) {     if (i < 5) { // i 가 5 보다 작을 경우         console.log(i); // 0,1,2,3,4     } }

그럼 [코드 B1] 과 [코드 B2] 의 차이점은 무엇일까요?

console.log 로 출력하는 값은 같지만,

[코드 B1] 은 순회를 6번, [코드 B2] 는 순회를 10번 하게 됩니다.

순회하는 코드의 횟수가 많아질수록 처리하는 연산도 많아진다는 얘기가 되는건 당연하겠지요.

보통 코드를 작성하다보면 코드의 양의 많아지고 처리해야할 일은 점점 늘어나게 되는데,

이런 사소한 차이가 성능에 문제를 줄 수 있습니다.

continue

코드 C1

1	for (var i = 0; i < 10; i++) {     if (i == 5) { // i 가 5 와 같을 경우         continue; // 다시 순회표현식으로 이동     }     console.log(i); // 0,1,2,3,4,6,7,8,9 }

continue 문은 현재의 순환부를 종료하고 다시 순회표현식으로 이동합니다.

위 [코드 C1] 처럼 순환부를 계속 반복하다가, 조건에 의해 continue 문을 만나게 되는 경우

해당 순환부를 종료해 버리기 때문에 continue 문 이하 문장을 

실행하지 않아 '5' 가 출력되지 않았습니다.

(javascript 의 break, continue 문은 label 이라 불리우는것과도 연결이 가능합니다만, 사용을 권장하는 방법이 아니기 때문에 따로 설명은 넣지 않았습니다. 궁금하신분은 해당 키워드 또는 goto문 을 검색해 보세요.)

Simple & Easy free online tools. image-resizer, image-color-picker, json-viewer and more.

 

2015/02/23 - [IT/Javascript] - [javascript] 조건문 - if, ifelse 간단한 샘플 코드 및 작성 방식