본문 바로가기
개발이야기/JavaScript

6. 반복문

by hyung12 2019. 3. 8.
반응형

반복문


프로그래밍적으로 반복적인 작업을 하는 것을 반복문이라고 한다. 이를 loop, iterate라고 부른다.(검색시 키워드를 잡아 검색하면 수월하다.)

반복적인 작업을 잘하지 못하는 인간의 결점을 위해 반복적인 작업을 대행하는 도구가 바로 컴퓨터이다.

반복문은 조건문과 함께 프로그래밍에서 가장 중요한 도구 중 하나이다. 조건문이 컴퓨터를 똑똑하게 한다면 반복문은 컴퓨터를 강력하게 한다.







반복문의 문법


1. while

while의 다음에는 괄호가 나오고 그 안에는 조건(Boolean)이 들어간다. 다음 중괄호 안에는 반복 실행할 코드가 들어간다.

[예제]

while (조건){ // 조건에는 boolean이 들어간다.

    반복해서 실행할 코드

}


[결과]

Hello world; <br /> 이 코드는 그대로 출력된다.

document.write()는 괄호 안에 있는 문자열이 웹페이지에 출력하도록 하는 명령어이다.

while의 조건이 true이면 반복적인 작업이라고 인식하기에 중괄호 안에 있는 값을 무한대로 실행하게 된다.

어떠한 반복이 실행될 때 그 반복이 정지하지 않고 계속해서 끊임없이 반복되서 컴퓨터에게 부담이 되는 상황을 무한루프(무한반복)라고 한다. 무한루프는 프로그래밍을 작성할 때 발생할 수 있는, 발생하기 쉽지만 심각한 문제이다. 그래서 무한루프에 빠지지 않는 방법을 이해할 필요가 있다.

그 방법은 true가 적당한 시점에서 false가 되면 된다.


[실습]

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<script>

var i = 0; // 기준점(초기화)

while(i < 10){ // 비교연산자(반복조건)

document.write('coding everybody <br />');

i = i + 1; // i의 값이 1씩 증가한다.(반복실행)

}

</script>

</body>

</html>


[결과]

i의 값이 10이 됐을 때 반복조건은 false가 되면서 반복실행 구문이 멈추게 된다.



2. for

while문은 초기화, 반복조건, 반복실행 3가지로 구성되는데 이 3가지의 요소가 각각 따로 되어 있기에 가독성도 좋지 않고 오류가 발생할 확률도 높다. 그래서 3가지 구성요소를 하나의 문법적인 요소로 결합시켜 보기도 좋고 오류가 발생할 확률도 줄어들도록 만든 것이 for문이다.

[예제]

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){

    반복해서 실행될 코드

}


[실습]

var i = 0; // 기준점(초기화)

while(i < 10){ // 비교연산자(반복조건)

document.write('coding everybody <br />');

i = i + 1; // i의 값이 1씩 증가한다.(반복실행)

}



for(var i = 0; i < 10; i++){ // 'i++' 과 'i = i + 1' 대충 비슷함

    document.write('coding everybody'+i+'<br />');

}


// 꼭 i로 선언하지 않아도 되지만 관용적으로는 i로 사용한다.







반복문이 없다면

'coding everybody'를 10번 반복해서 출력하고 싶다면 10번 코드를 작성하면 된다.

[예제]

document.write('coding everybody');

document.write('coding everybody');

document.write('coding everybody');

document.write('coding everybody');

document.write('coding everybody');

document.write('coding everybody');

document.write('coding everybody');

document.write('coding everybody');

document.write('coding everybody');

document.write('coding everybody');

document.write('coding everybody');


하지만 이를 100번, 1000번, 10000번, 또는 그 이상 출력하고 싶다면 코드를 하나하나 작성하기는 힘들 것이다.

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

[예제]

for(var i = 0; i < 1000; i++){ // 해당 횟수만큼 숫자를 써주면 된다.

    document.write('coding everybody'+i+'<br />');

}






반복문의 제어


반복문을 강제 종료시키고 싶거나 현재 부분만 일시 중지하고 싶은 경우가 있을 것이다. 그때 사용하는 방법을 소개한다.


1. break

반복 작업을 중간에 중단시키고 싶을 때

[예제]

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

    if(i === 5) {

        break;

    }

    document.write('coding everybody'+i+'<br />');

}


break를 통해 언제든지 중지시킬 수 있다.

[결과]

coding everybody 0

coding everybody 1

coding everybody 2

coding everybody 3

coding everybody 4



2. continue

그 순간에만 중지하고 반복문은 계속 진행시키고 싶을 때

[예제]

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

    if(i === 5) {

        continue;

    }

    document.write('coding everybody'+i+'<br />');

}


5만 빠지고 반복문은 계속 진행된다

[결과]

coding everybody 0

coding everybody 1

coding everybody 2

coding everybody 3

coding everybody 4

coding everybody 6

coding everybody 7

coding everybody 8

coding everybody 9







반복문의 중첩


반복문 안에는 반복문을 다시 넣을 수 있다.

[예제]

for(var i = 0; i < 10; i++){ // 0부터 9까지 변수 i에 순차적으로 값을 할당        

    for(var j = 0; j < 10; j++){ // 0부터 9까지의 변수를 j의 값에 순차적으로 할당

        // i와 j의 값을 더한 후에 출력

        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 

        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.

        document.write(String(i)+String(j)+'<br />');

    }

}


[결과]

coding everybody 00

coding everybody 01

coding everybody 02

coding everybody 03

coding everybody 04

coding everybody 06

coding everybody 07

coding everybody 08

coding everybody 09






출처: 생활코딩

반응형

'개발이야기 > JavaScript' 카테고리의 다른 글

8. 배열  (0) 2019.04.16
7. 함수  (0) 2019.04.10
5. 조건문  (0) 2019.03.05
4. 비교연산자  (0) 2019.03.05
3. 변수/주석/세미콜론과 들여쓰기  (0) 2019.03.05