예제로 배우는 자바스크립트 요약 및 코드 분석 3장-3.3.2~3.5

3.3.2 for in 문

객체의 요소들을 반복해서 읽어올 때 사용되는 for in 문의 사용 형식은 다음과 같다.

for(변수 in 객체) {               문장;                ... }

객체 내 각 요소들을 반복해서 읽어와 그 키를 변수에 저장하는 식으로 반복 루프가 진행된다.

 

다음 코드를 통해서 for in 문의 사용법에 대해서 알아보자.

예제 3-11. For In 사용법 알아보기

for_in.html

코드 원문

<script>
    const member = {id:"kdhng", name:"홍길동", age:30};

    for (let x in member) {
        document.write(member[x] + "<br>");
    }
</script>

예제 3-11. For In 사용법 알아보기

for_in.html

코드 원문

<script>
    const member = {id:"kdhng", name:"홍길동", age:30};
    // 멤버 객체 member 선언

    for (let x in member) {
    // for in 문 선언 객체의 요소 수 만큼 반복이 진행된다. 객체가 3개 이므로 3번 진행된다.
        document.write(member[x] + "<br>");
        /* member[id]로 첫번째 루프가 진행되는데 멤버객체명[키값]을 하면 키에 대응하는
        요소가 출력되므로 kdhng가 출력되게 된다. */
    }
</script>

 

3.3.3 For Of 문

  for of 문은 배열이나 문자열 같이 반복 같능한 데이터 형에 있는 요소들을 읽어올 때 사용된다. 사용 형식은 다음과 같다.

for (변수 of 배열) {               문장;                ... }

배열(또는 문자열)과 같이 여러 개의 요소를 가진 데이터 형에서 요소를 하나씩 순차적으로 반복해서 읽어온다. 각 반복 루프에서 배열의 요소 값은 변수에 저장되고, 반복 루프 안에 있는 문장들이 실행된다.

  다음 예제를 통해서 for of 문의 사용법을 익혀보자.

예제 3-12. for of 문 사용법 알아보기

for_of.html

코드 원문

<script>
    const scores = [88,75,95,78,90];

    for (let score of scores) {
        document.write(score + "<br>");
    }
</script>

예제 3-12. for of 문 사용법 알아보기

for_of.html

코드 원문

<script>
    const scores = [88,75,95,78,90];
    // 배열 scores 선언하고 요소 5개 저장

    for (let score of scores) {
    // for of문 선언 scores 배열의 요소가 5개 이므로 5번 반복
        document.write(score + "<br>");
        // score에 저장된 값이 첫번째부터 5번째 까지 순차적으로 출력
    }
</script>

  배열 scores에는 다섯 개의 정수가 저장되어 있다. for of 문은 scores의 요소 수, 즉 다섯 번의 문장이 반복 실행된다.

각 반복 루프에서 변수 score는 scores의 요소 값 5가지, 88,75, 95, 78, 90의 값을 가진다.

 

for of문은 배열(또는 문자열)과 같이 반복 가능한 데이터 형에 대해 사용될 수 있다. 다음은 for of문으로 문자열의 각 문자를 읽어 세로로 출력하는 프로그램이다.

예제 3-13. for of 문에 문자열 적용 예

for_of_string.html

원문 코드

<script>
let str1 ="javascript";

for (let x of str1) {
    document.write(x + "<br>");
}
</script>

예제 3-13. for of 문에 문자열 적용 예

for_of_string.html

원문 분석

<script>
let str1 ="javascript";
// 문자열 변수 str1 선언

for (let x of str1) {
// for of 문 선언 str1의 요소가 9개 이므로 9번 반복되고 첫번째 문자부터 x값에 들어간다.
    document.write(x + "<br>");
    // x값에 저장된 요소를 출력하고 개행
}
</script>

 

3.3.4 이중 for 문

이중 for 문은 다음과 같이 for 루프 안에 다시 for 루프가 들어가 있는 형태이다.

  구구단 표를 만드는 과정을 통해서 이중 for문의 사용법을 익혀보자. 전체 구구단 표를 만들기 전에 먼저 다음 코드와 같이 구구단 2단을 for 문으로 작성해보자.

예제 3-14. for 문으로 2단 구구단 만들기

multi_table_2dan.html

코드 원문

<script>
    let x = 2;      // 2단
    let result;

    for(let y=1; y<=9; y++) {
        result = x*y;
        document.write(x + "x" + y + "=" + result + " ");
    }
</script>

예제 3-14. for 문으로 2단 구구단 만들기

multi_table_2dan.html

코드 분석

<script>
    let x = 2;      // 2단
    let result;

    for(let y=1; y<=9; y++) {
    // for문 선언 y가 1~9까지 코드가 반복 실행된다.
        result = x*y;
        document.write(x + "x" + y + "=" + result + " ");
        // 문자열 연결 연산자를 통해서 문자열과 변수를 같이 출력한다.
    }
</script>

 

다음 코드에서는 전체 구구단을 만들기 위해 예제 3-14에서 단을 의미하는 for문을 한번 더 사용한다. 단의 의미하는 변수가 2~9까지 변화되게 코드를 짜면 된다. 이를 위해서 이중 for문 형태로 만들어지며 이중 for문이란 for문 안에 for문이 들어가있는 것을 의미한다.

예제 3-15. 이중 For문으로 전체 구구단 만들기

multi_table.html

코드 원문

<script>
    let result;
    for (let x=2; x<=9; x++) { // 2~9단
        for (let y=1; y<=9; y++) {
            result = x*y;
            document.write(x + "x" + y + "=" + result + " ");
        }
        document.write("<br>");
    }
</script>

예제 3-15. 이중 For문으로 전체 구구단 만들기

multi_table.html

코드 원문

<script>
    let result;
    for (let x=2; x<=9; x++) { // 2~9단
    // for문 선언 x가 2~9까지 반복
        for (let y=1; y<=9; y++) {
        // for문 선언 y가 2~9까지 반복
            result = x*y;
            document.write(x + "x" + y + "=" + result + " ");
            // 문자열 연결 연산자로 변수와 문자열을 동시에 출력
        }
        document.write("<br>");
        // 개행
    }
</script>

이렇게 전체 구구단을 가로 형태로 출력했다. 이번에는 전체 구구단을 세로 형태로 출력하기 위해서 코드를 약간 변경해 보자 y가 바깥쪽 for문으로 x가 안쪽 for문에 들어가게 해주면 된다.

예제 3-16. 이중 for 문으로 전체 구구단 세로로 출력하기

multi_table2.html

코드 원문

<script>
    let result;
    for (let y=1; y<=9; y++) {
        for (let x=2; x<=9; x++) {  // 2~9 단
            result = x*y;
            document.write(x + "x" + y + "=" + result + " ");
        }
        document.write("<br>")
    }
</script>

예제 3-16. 이중 for 문으로 전체 구구단 세로로 출력하기

multi_table2.html

코드 원문

<script>
    let result;
    for (let y=1; y<=9; y++) {
    // for문 선언 
        for (let x=2; x<=9; x++) {  // 2~9 단
        // for문 선언, 단에 해당하는 숫자가 바뀐다.
            result = x*y;
            document.write(x + "x" + y + "=" + result + " ");
            // 문자열 연결 연산자를 이용해서 변수와 문자열이 동시에 출력된다.
        }
        document.write("<br>")
        // 개행
    }
</script>

 

웹에서 구구단 표를 표 형태로 출력하기위해서는 예제 3-16에 <table> 태그를 적용하면 된다.

예제 3-17. 구구단 표에 <table> 태그 적용하기

multi_table3.html

코드 원문

<h3>구구단 표</h3>
<p id="show"></p>
<body>
<script>
    let result;
    let text = "";          // Null로 초기화
    text += "<table border='1'>";
    for (let y=1; y<=9; y++) {
        text += "<tr>";
        for (let x=2; x <=9; x++) {
            result = x*y;
            text += "<td>" + x + "x" + y + "=" + result + "</td>";
        }
        text += "</tr>";
    }
    text += "</table>"

    document.getElementById("show").innerHTML = text;
</script>
</body>

예제 3-17. 구구단 표에 <table> 태그 적용하기

multi_table3.html

코드 분석

<h3>구구단 표</h3>
<p id="show"></p>
<body>
<script>
    let result;
    let text = "";          // Null로 초기화
    text += "<table border='1'>";
    // 변수 text에 문자열 <table border='1'> 저장
    for (let y=1; y<=9; y++) {
    // for문 선언
        text += "<tr>";
        // 변수 text에 행의 시작을 의미하는 <tr> 태그 저장
        for (let x=2; x <=9; x++) {
        // for문 선언, x가 2부터 9까지 반복 2~9단을 의미
            result = x*y;
            text += "<td>" + x + "x" + y + "=" + result + "</td>";
            // 변수 text에 문자열 연결 연산자로 값 저장
            <td>는 열의 시작을 </td>는 열의 종료를 의미 즉 이 코드는 표의 한 셀을
            선언하고 그 셀에 들어갈 내용을 입력하는 코드이다. */
        }
        text += "</tr>";
        // 변수 text에 행의 끝을 의미하는 </tr>태그 저장
    }
    text += "</table>"
    /* 변수 text에 테이블의 내용을 모두 입력했으므로 테이블의 종료를 의미하는
    </table> 태그 입력 */

    document.getElementById("show").innerHTML = text;
    /* document.getElementById() 메서드를 이용해서 id 'show'가 가리키는 요소
    단락 <p>를 불려온다. 그리고 innerHTML를 이용해서 text에 저장된 내용을 출력한다.
    구구단 표가 출력된다. */
</script>
</body>

 

3.4 While 문

  while문은 for문과 마찬가지로 특정 코드를 반복해서 실행해야 하는 경우 사용된다.

3.4.1 while문의 기본 구조

while문의 사용 형식은 다음과 같다.

while(조건식) {                문장;                 ... }

while문은 조건식이 참인 동안 중괄호 안의 코드를 반복 실행한다. 조건식이 거짓이 되면 루프를 벗어난다. 그래서 중괄호 안에 조건식 증감 코드를 넣어준다. 그냥 조건식에 1 넣고 실행하면 무한 반복된다.

 

다음은 while문을 이용해서 '안녕'을 화면에 다섯번 출력하는 프로그램이다.

예제 3-18. while문으로 '안녕' 다섯 번 출력하기

while.html

코드 원문

<script>
    let i = 1;
    while (i <= 5) {
        document.write("안녕<br>");
        i++;
    }
</script>

예제 3-18. while문으로 '안녕' 다섯 번 출력하기

while.html

코드 원문

<script>
    let i = 1;
    // 변수 i를 선언하고 값 1 저장
    while (i <= 5) {
    // while 문 선언 i가 5이하 일 동안 중괄호 안의 코드 반복
        document.write("안녕<br>");
        // document.write() 메서드를 사용해서 안녕 문자열 출력 후 개행
        i++;
        // 변수 i에 기존 값에서 1를 증가시킨 값을 저장
    }
</script>

 

이번에는 while문을 이용해서 1부터 10까지의 정수 합계를 구하는 프로그램을 작성해보자.

예제 3-19. whlie 문으로 1~10 합계 구하기

while_sum.html

코드 원문

<body>
<p id="show"></p>
<script>
    let sum = 0;
    let i = 1;

    while(i<=10) {
        sum += i;
        i++;
    }
    document.write("합계:" +sum);
</script>
</body>

예제 3-19. whlie 문으로 1~10 합계 구하기

while_sum.html

코드 분석

<body>
<p id="show"></p>
// 단락 태그인 p를 선언하고 id 값으로 show를 넣는다.
<script>
    let sum = 0;
    let i = 1;

    while(i<=10) {
    // while문 선언 i가 10이하일 때 반복한다.
        sum += i;
        i++;
    }
    document.write("합계:" +sum);
</script>
</body>

 

3.4.2 do while문

do while 문은 while 문과는 달리 조건식이 가장 마지막에 위치한다.

do {             문장;              ... } while (조건식)

do while 문에서는 do 다음에 있는 문장들이 최소한 한번은 실행된다. 첫 번째 실행 이후 뒤에 있는 while 조건식이 참인 동안 루프 안에 있는 문장들들 반복 실행한다.

 

do while 문의 동작을 이해하기 위해 다음의 예를 살펴보자.

예제 3-20. do while 문 사용 예

do_while.html

코드 원문

<script>
    let x = -10;
    do { 
        document.write("안녕!");
    } while (x>0)
</script>

예제 3-20. do while 문 사용 예

do_while.html

코드 원문

<script>
    let x = -10;
    // 변수 x에 값 -10 저장
    // do-while 문 선언
    do {
    // 중괄호 안의 코드를 한 번 실행
        document.write("안녕!");
    } while (x>0)
    /* x>0일 동안 반복, x=-10이기 때문에 반복되지 않는다.
    do-while문이므로 중괄호 안의 코드가 한번은 실행되게 된다. */
</script>

 

3.5 break/continue 문

3.5.1 break 문

  break문은 for 문이나 while 문의 반복 루프가 진행되는 도중에 루프를 빠져나가려고 할 때 사용된다. 다음 코드를 통해서 break 문의 사용 방법에 대해 알아보자.

예제 3-21. break 문 사용 예

break.html

코드 원문

<script>
    for (let i=1; i<=10; i++) {
        if(i==4)
            break;

        document.write(i+"<br>");
    }
</script>

예제 3-21. break 문 사용 예

break.html

코드 원문

<script>
    for (let i=1; i<=10; i++) {
    // for문 선언
        if(i==4)
        // i가 4일 경우 밑의 코드 실행
            break;
            // break문이 실행되면서 for문을 빠져나간다.

        document.write(i+"<br>");
    }
</script>

 

3.5.2 continue 문

continue 문은 반복 루프에서 실행되는 문장들을 건너뛰고 싶을 때 사용한다.

다음 코드에서는 예제 3-21에서 사용된 break 대신 continue가 사용된다.

예제 3-22. continue문 사용 예

continue.html

코드 원문

<script>
    for (let i=1; i<=10; i++) {
        if (i==4)
            continue;

        document.write(i+"<br>");
    }
</script>

예제 3-22. continue문 사용 예

continue.html

코드 원문

<script>
    for (let i=1; i<=10; i++) {
    // for문 선언
        if (i==4)
        // if문 선언, i가 4이면 밑의 코드 실행
            continue;
            // 다음 문장 건너뜀
            // 결과적으로 i가 4면 document.write(i+"<br>");가 실행 되지 않게 된다.

        document.write(i+"<br>");
    }
</script>