[10일차] 반복문 for / while / 제어 break 와 continue

20220802(화)

• 목차
  - 반복문 for
  - 반복문 while
  - 제어 break 와 continue

---

< if 문과 switch 문 >

• if : 범위로 생각함
• switch : 범위라고 생각을 안함 / 점으로 표시할 수 있으면 되도록 switch문 사용하기
• switch 특징 : 깔끔하고 읽기좋고 readability가 확 늘어난다.

 

---

< 반복문 >

무엇(데이터 / 연산)이 몇번 반복되는지 

ex) 구구단의 2단은 2와 *가 9번 반복된다.

Dorothy 작업

---

< 반복문 for >

       for(let i = 0; i < 9; i++) // for(초기값, 비교, 증감치) = loop Counter

        {

            console.log(i);

        } // {JS 코드}

Dorothy 작업

---

• 2단 출력
  1. for 문의 사용법
  2. IPO 관점
  3. loop Counter는 loop를 돌리는 데만 사용한다.

 // i를 괴롭히려는 버릇이 생김 = 가능

        for (let i = 0; i < 9; i++)

        {

            console.log("2x" + (i+1) + "=" + (i+1)*2);

        }

       

 

 

 // 좋은 코드 (변수 따로 설정) = FM 방식

배열과 반복문이 index를 통해 순회하는 코드를 자주 사용한다!
루프 카운터를 인덱스접근으로 사용가능

        let num = 1;

        for (let i = 0; i < 9; i++)

        {

            console.log("2x" + num + "=" + 2 * num);

            num = num + 1;

        }

 

 

 

 // 좋은코드를 IPO 관점으로 다시보기

       let multiple = 1;

       let dan = 2;

       //처리와 출력을 한 번에 묶어주기

        for (let i = 0; i < 9; i++)

        {

            //출력

            console.log(dan + "x" + multiple + "=" + (dan * multiple));

            multiple = multiple + 1;

        }

 

• 구구단 출력하기
  1. for(몇번{for(무엇을){
  2. 그 중 loop
  3. 무엇, 몇 번

✨ i 와 j 를 사용하지 않고 for문으로 구구단 출력하기

        let dan = 2;

        let mul = 1;

 

        for (let i = 0; i < 8; i++) // 1. 총 8번 돈다(2단~9단)

        {

            for (let k = 0; k < 9; k++) // 2. n단 안에서 9번 돈다(1~9)

            {

                console.log(dan + 'x' + mul + '=' + (dan*mul));

                mul++;

            }

            dan = dan + 1;

            mul = 1;

        }

 

 

---

< 반복문 while >

let a = 0;

        while (a < 9)

        {

            console.log(a);

            a++;

        }

        for(let i = 0; i < 9; i++) // 위 while문과 같은 코드

        {

            console.log(a);

        }

 

 

 

const ar = [10, 20, 30, 40, 50];

 // 배열의 첨부터 끝까지 콘솔로그로 찍는코드.

        for(let i = 0; i < ar.length; i++)

        {

            console.log(ar[i]);

            //i를 readonly 또는 index로만 쓰는 경우 ok (순회용)

        }

 

// 배열에서 빠져나오는 코드

 

        for(let i = 0; i < ar.length; i++)

        {

            if(ar[i] === 99)

            {

                break; // 자신과 가장 가까운 루프를 빠져나간다. 

            }

            else

            {

                console.log(ar[1]);

            }

        }

 

 

 

// 6을 곱하는 것은 스킵!

 

        let dan = 2;

        let mul = 1;

        for (let i =0; i < 9; i++, mul++)

        {

            if (mul === 6)

            {

                continue;

            }

            console.log(`${dan} x ${mul} = ${dan*mul}`);

        }

 

---

< 제어 break 와 continue >

• break : 만나는 순간 이 포문을 빠져나가서 아래 코드들을 실행
• continue : 이 포문의 처음으로 되돌아간다. skip에도영향을 준다.

+) for ... in 과  for ... of 차이

✔ for ... in 반복문
- 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복

for (const 반복변수 in 배열or객체)
{
} 

ex)

        const object = { a : 1, b : 2, c : 3 };

        for (const property in object){

            console.log(`${property} : ${object[property]}`);

        }

        console.log(object);

---

✔ for ... of 반복문
반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성

for (const 반복변수 of 배열or객체)

{

}

 

ex)

        const array1 = ['a', 'b', 'c'];

        for (const element of array1){

            console.log(element);

        }

        console.log(array1);

 

---

[연습문제] 별 찍기
1. 내 생각 그대로 코딩 "이렇게 하는 게 맞나" = 남들도 이렇게 생각하나? 보편적인 생각인가? 되돌아보기
2. 생각한 순서대로 코딩을 정리하기

         let stars = ' ';

         let starCount = 1;

         for(let line = 0; line < 10; line++)

         {

            // 별의 개수를 설정한다.

            for(let k = 0; k < starCount; k++)

            {

                stars = stars + '*';

                // stars +='*'; 와 같다.

            }

           

            // 별을 로그에 찍는다.

            console.log(stars);

            // 별을 html 문서에 찍는다.

            document.body.innerHTML += stars;

            document.body.innerHTML += '<br>';

            starCount++;

            stars = ' ';

         }