7. 반복문

@ 반복문 ==> 특정 코드를 반복해서 실행하게 만든다.

1.  for문

1-1. 기본적인 for문: for(초기값; 조건식; 증감식) {main logic}

for(let i=0; i < 10; i++) {
    console.log("For문 돌아가고 있음 => " + i)
}

 - i가 9가 될 때까지 반복해서 출력된다.

 

1-2. 배열과 함께 사용하는 for문(영혼의 짝꿍이라 생각해도 된다.)

const arr = ["one", "two", "three", "four", "five"]
for (let i=0; i < arr.length; i++) {
    console.log(i)
    console.log(arr[i])
}

 - for문을 돌면서 배열의 index 숫자와 index에 맞는 문자를 출력한다.

 

ex) 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력

for (let i = 0; i <= 10; i++) {
    if (i >= 2) {
        if (i % 2 === 0) {
            console.log(i)
        }
    }
}

 - for문 안의 if문을 통해 조건에 해당하는 부분만 반복해서 출력한다.

 

1-3. for~in문 (객체의 key or value를 출력할 때 사용)

let person = {
    name: "John",
    age: 30,
    gender: "male",
}

for(let key in person) {
    console.log(key + " :" + person[key])
}

 - for (변수 in 객체) { main logic }이 기본 구조다. key-value 형태를 생각하면 쉽게 생각할 수 있다. 

 

2. while문: while(조건) {main logic }

let i = 0

while (i < 10) {
    console.log(i)
    i++
}

 - while문은 조건식이 참인 경우에만 코드를 반복해서 실행한다.

 

ex) 3초과 100미만의 숫자 중 5의 배수인 것만 출력

let i = 3
while (i<100) {
    if(i % 5 === 0 && i>=5) {
        console.log(i)
    }
    i++
}

 - while문 안에 조건문을 넣음으로써 필요한 값만을 반복해서 출력 가능

 

3. do~while문: do { main logic} while(조건식)

let i = 0
do{
    console.log(i)
    i++
}while(i < 10)

 - do를 이용해 일단 한 번은 코드를 실행한다. 그 후에 조건식에 의해 반복 여부를 결정한다.

 

4. break문광 continue문

4-1. for~break문: 조건에 맞는 부분에서 break하고 해당부분까미나 코드가 반복한다.

for(let i =0; i<10; i++){
    if ( i===5){
        break;
    }
    console.log(i)
}

 - 0부터 5까지만 출력된다.

 

4-2. for~continue문: 조건에 맞는 부분만 제외하고 반복한다.

for(let i =0; i<10; i++){
    if ( i===5){
        continue;
    }
    console.log(i)
}

- 5를 제외하고 출력된다.

---

확인 문제 풀이

@ 4-2 반복문

1. 프로그램의 실행 결과를 예측하기

<script>
        const array = ['사과', '배', '귤', '바나나']

        console.log('# for in 반복문')
        for(const i in array){
            console.log(i)
        }

        console.log('# for of 반복문')
        for(const i of array) {
            console.log(i)
        }
    </script>

# for in 반복문
0
1
2
3
# for of 반복문
사과
배
귤
바나나

 - in과 of만 다른점이지만 for in문은 객체의 열거 가능한 속성들을 순회할 수 있도록 해준다. 반면 for of문은 반복 가능한 객체(iterable)를 순회할 수 있도록 해준다. 따라서 for(key in iterable) {}, for( value of iterable) {}로 생각할 수 있다.

 

2. 프로그램의 실행 결과를 예측하기. 오류가 발생한다면 어디를 수정해야 할지 생각하기

 - for문의 초기값 i = 0을 const로 선언했기 때문에 오류가 난다.

<script>
        const array=[]
        for(const i = 0; i<3; i++) {
            array.push((i+1) *3)
        }
        console.log(array)
    </script>

Uncaught TypeError: Assignment to constant

 - 수정

<script>
        const array=[]
        for(let i = 0; i<3; i++) {
            array.push((i+1) *3)
        }
        console.log(array)
    </script>

결과는 [3, 6, 9]가 출력된다.

 

3. 1부터 100까지의 숫자를 곱한 값을 계산하는 프로그램을 작성하시오. 실행한 결과를 확인하기

<script>
        let output = 1
        for(let i=1; i<=100; i++) {
            output *= i
        }
        console.log(`1~100의 숫자를 모두 곱하면, ${output}입니다.`)
    </script>

1~100의 숫자를 모두 곱하면, 9.33262154439441e+157입니다.

 

4. 다이아몬드 모양을 만드는 프로그램을 작성하시오

<script>
        let output = ''
        const size = 5

        for (let i = 1; i < size - 1; i++) {
            for (let j = size; j > i; j--) {
                output += ' '
            }
            for (let k = 0; k < 2 * i - 1; k++) {
                output += '*'
            }
            output += '\n'
        }
        for (let i = size - 1; i > 0; i--) {
            for (let j = size; j > i; j--) {
                output += ' '
            }
            for (let k = 0; k < 2 * i - 1; k++) {
                output += '*'
            }
            output += '\n'
        }

        console.log(output)
    </script>

 - 결과

       *
     ***
   *****
 *******
   *****
     ***
       *