2020-02-05 JavaScript - 반복문

생활코딩 JavaScript 강의를 듣고 내 나름대로 정리한 내용이다.

https://opentutorials.org/course/743/4728

함수 - 생활코딩

JavaScript 입문자인 나에게 이런 양질의 강의를 무료로 들을 수 있게 해주신 이고잉님께 감사드린다는 말씀을 전하고 싶다. 

 

//반복문 1강
반복문 => loop, iterate
인간은 반복적인 작업을 잘하지 못하고 실수하고 지루해한다. 컴퓨터는 이런 반복적인 작업을 대행하기 위해서 만들어진 기계다.
반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다.
조건문은 컴퓨터를 똑똑하게 만들어준다면, 반복문은 컴퓨터를 강력하게 만들어준다.

while, for => ~하는 동안 반복작업을 한다.

while (조건) } // 조건 : Boolean 이 와야 한다. (True or False) True에서 False가 될 때까지 반복문이 실행된다.
    반복해서 실행할 코드
}

while(true) { // 무한 루프 
}


무한 루프에서 벗어나기 위해서는 조건을 적당한 시점에 true 에서 false로 변경해줘야 한다.
무한 루프 상태에서 어떠한 동작이 웹 브라우저 상에서 진행된다면, 컴퓨터의 성능 저하로 이어져 웹 브라우저에 오류를 일으킬 것이다.
웹 브라우저는 무한반복을 허용하지 않기 때문에 어느 정도 시간이 흐르면 스크립트를 종료할 것인지 물어볼 것이다.

//반복문 2강
반복문을 언제까지 실행할 것인가? 반복 조건
반복 조건이 없으면 무한대로 실행이 되서 무한 루프 상태에 빠진다.
반복문을 중단시키는 방법

var i = 0; => 반복문 시작에 대한 기준점

  var i = 0; // Programming에서는 숫자를 counting할 때 관습적으로 0부터 counting한다.
// 언제까지 반복할 것이냐에 대한 기준점을 제공, 초기화하는 부분.
  while(i < 10) { // True or False 반환
      document.write("Coding everybody");
      i = i + 1; // 반복할 때마다 i를 갱신시켜주는 반복실행
  }
// 반복문이 실행될 때마다 i는 1씩 증가한다.
i=9일 때 마지막으로 반복문이 실행된다.

내가 프로그래밍 공부를 하는데 기한이 없이 끝없이 공부를 한다. (무한 루프)

  while(true) {
      document.write("I study JavaScript!");
  }

하지만 내가 앞으로 1달동안 자바스크립트 문법을 끝낸다고 해보자.
그렇다면 1달 즉, 반복 조건은 i < 30이 되고
하루가 지날 때마다 숫자가 카운트 되어 i = 29이 되었을 때 마지막으로 자바스크립트 공부를 끝마친다.
이걸 코딩해보면,

  var i = 0;
  while(i < 30) {
      document.write(`D - ${i+1} I study JavaScript`);
      i = i + 1;
  }

// 반복문 3강
while문의 경우 필수 구성 요소(초기화, 반복 조건, 반복 실행)가 서로 떨어져 있어서 i 값을 찾기가 너무 힘들어서 가독성이 떨어진다.
따라서 for문이 가독성 면에 있어서 뛰어나다.
단점은 필수 구성 요소들의 순서들을 반드시 기억해야 한다.
while문과 for문은 서로 대체 가능하다.


  for(var i = 0; i < 10; i++) { // 괄호 안 구성 요소 : 초기화(처음에만 실행됨.), 반복 조건, 반복 실행
      document.write("Coding everybody ");
  }


실행 순서 : 첫번째 => 초기화 -> 반복 조건(True or False 판단) -> body block 실행 -> 마지막으로 반복 실행(i가 1 증가)
두번째 => i=1이 반복 조건 안에 들어간다.(True or False 판단) -> body block 실행 -> 반복 실행(i가 1증가)
두번째와 같은 과정이 여러 번 반복되다가,
열한번째 i = 10이 반복 조건 안에 들어간다. => i < 10이므로 False로 판단되어 이때 반복문이 종료된다.

i++(후위증감연산자)와 ++i(전위증감연산자)의 차이점
i = 0;
alert(i++); # alert창에는 i = 0이 뜸.
// i = 0인 상태에서 alert창이 실행되고, 그 후에 i는 1이 증가한다.
즉 alert가 실행될 때 i++에는 0이 할당되고, 실행된 후에 i 값이 증가한다.
결과적으로 증가하지만, 이를 사용할 때는 기존의 값을 사용한다.

i = 0;
alert(++i); # alert창에는 i = 1이 뜸.
// i를 증가시키고 나서 alert를 실행한다.

// 반복문 4강 반복문의 효용
반복문 없이 "coding everybody"를 화면상에 5번 출력시키고 싶다면

  document.write("coding everybody");
  document.write("coding everybody");
  document.write("coding everybody");
  document.write("coding everybody");
  document.write("coding everybody");


5번 정도는 Copy and Paste로 금방 할 수 있어서 괜찮다.
하지만 만약, 10000번을 출력해야 한다면?
너무나도 비효율적이고 매우 긴 시간이 걸릴 것이다.
우리는 이럴 때 반복문을 사용해서 단순히 몇 줄, 몇 초만에 할 수 있다.

  for(var i = 0; i < 10000; i++) {
    document.write("coding everybody");
  }


이렇게 단순히 문자열을 출력하는 것은 Copy and Paste 작업으로 가능하다.
하지만, 문자열 옆에 1씩 증가하는 숫자들이 붙는다면?
Copy and Paste 작업으로는 불가능할 것이다.
이럴 때 반드시 반복문이 필요하다.

  for(var i = 0; i < 10000; i++) {
    document.write(`coding everybody ${i} `);
  }


// 반복문 5강 반복문의 제어
반복문을 중간에 중단시키고 싶다면 어떻게 해야 할까? break를 사용하면 된다.
반복문 안에 조건이 들어갈 수 있다. 조건문 안에 반복문이 들어갈 수 있다.

  for(var i=0; i < 10; i++) {
    if(i === 5) {
      break;
    }
    document.write('coding everybody');
  } 

i가 0부터 4까지는 반복문이 실행된다. 
하지만 i = 5가 들어가면 반복문 내부의 조건문에 의해 break가 실행되어 반복문이 중단된다.


  for(var i = 0; i < 10; i++) {
    if(i === 5) {
      continue;
    }
    document.write('coding everybody');
  }

i가 0부터 9까지 반복조건에 대해 True이므로 반복문이 실행된다.
반복문 내부의 조건문에 의해 i = 5일 때는 continue가 실행되어 반복문 실행이 중단된다.
하지만 반복문이 완전 중단되는 것은 아니다 단지 i = 5일 때만 continue에 의해 반복문 실행이 중단되고
바로 i = 6일 때로 넘어가게 된다.

// 반복문 6강 반복문의 중첩
만약 00, 01, 02 ~ 99까지 출력시키고 싶다면?
첫번째 숫자는 i가 책임지도록 하고, 두 번째 숫자는 j가 책임지도록 하자.

  for(var i = 0; i < 10; i++) {
    for(var j = 0; j < 10; j++) {
      document.write(String (i) + String (j) + '
');
    }
  }

i = 0 => j가 0부터 9까지 총 10번 반복문이 실행된다. 00 ~ 09가 화면상에 출력된다.
j = 10일 때 내부 반복문의 조건에 False이므로 내부 반복문이 종료되어 바깥으로 나온다.
i는 i++에 의해 i = 1이 되고 바깥 반복문 조건에 True 이므로
i = 1 => 첫번째와 동일하게 총 10번 반복문이 실행된다. 10 ~ 19가 화면상에 출력된다.
즉, 바깥 반복문 1번 실행될 때 내부 반복문은 10번이 실행된다. 
이 작업이 계속 반복되다가 바깥 반복문이 반복 조건에 대해 False이면 반복문이 완전히 종료된다.