# 반복문 개요, 언제까지 복붙 노가다 할 거임? ## 미션 반복문의 개념과 각 요소 별 사용 법을 익히시오. <img src="http://drive.google.com/uc?export=view&id=1iM4o6kO7eb7uTDTQ6DmCG8rD0snLb4_8" alt="홍팍-자바스크립트-반복문-개요-미션"> ## 반복문이란 🔁 반복문이란 뭘까? 말 그대로 반복시켜주는 구문 즉, 수 많은 코드를 단 몇 줄로 줄여주는 문법이다. 가령 쇼핑몰에 등록된 상품을 출력한다 하자. 번호만 출력해도 🏋️‍♀️ 노가다가 된다. 만약 상품 개수가 천 개라면, 천 줄의 코드가 필요하다. 만 개라면? 만 줄을 써야한다.😱 ``` console.log("상품 #1"); console.log("상품 #2"); console.log("상품 #3"); ... console.log("상품 #1000"); ... console.log("상품 #10000"); ``` 이러한 문제, 이러한 노가다를 해소하는 문법이 바로 반복문이다. 다음은 반복문을 사용한 예로, 앞서 만 줄의 코드를 세 줄로 줄인 것이다. ``` for (let num = 1; num <= 10000; num += 1) { console.log(`상품 #${num}`); } ``` ## 반복문의 종류 반복문은 크게 두 종류, for 문과 while 문이 있다. for 문은 반복 횟수가 정해진 경우에 좋고, while 문은 반복 횟수가 상황에 따라 달라지는 경우에 좋다. <img src="http://drive.google.com/uc?export=view&id=1iMSirt89Xsdj3OMcK9zgl7ernUS0T8Ow" alt="홍팍-자바스크립트-반복문-종류"> ## for 문 for 문의 구조는 다음과 같다. 소괄호와 중괄호로 구성되는데, 여기에 초기화, 반복 조건, 반복할 코드, 갱신이 들어간다. ``` // 반복 횟수가 명확할 때 좋음 for (초기화; 반복_조건; 갱신) { 반복할_코드 } ``` for 문의 실행 흐름도 살펴보자. 먼저 ⓐ초기화가 수행되고, ⓑ반복 조건이 참인 경우 ⓒ중괄호 속 반복 코드가 수행된다. 모든 반복 코드의 수행이 끝나면, ⓓ갱신이 수행 된다. 이렇게 ⓑ → ⓒ → ⓓ가 반복된다. 언제까지? 조건식이 거짓이 될 때까지. <img src="http://drive.google.com/uc?export=view&id=1iMz7TrmeVOZYjO3lBGl76BuS3nJgS6p1" alt="홍팍-자바스크립트-반복문-for문-구조-및-실행"> ## while 문 while 문의 구조는 다음과 같다. 소괄호 사이에 반복 조건이, 중괄호 사이에 반복할 코드가 들어간다. ``` // 반복 횟수가 그때 그때 다른 경우에 좋음 while (반복_조건) { 반복할_코드 } ``` while 문의 실행은 단순하다. 조건이 참이면, 반복을 수행한다. 언제까지? 조건이 거짓이 될 때까지. for 문과 크게 다르지 않다. for 문에서 초기화와 갱신을 빼면 while 문이다. <img src="http://drive.google.com/uc?export=view&id=1iMz7TrmeVOZYjO3lBGl76BuS3nJgS6p1" alt="홍팍-자바스크립트-반복문-while문-구조-및-실행"> ## 무한루프, 반복문 사용 시 주의점 무한루프란 실행 흐름이 반복문 안에 갖혀 빠져나오지 못하는 것이다. 반복문을 잘못 사용하는 경우 이런 상황에 빠질 수 있다. 그 결과 프로그램이 정상 수행되지 못하고 계속 같은 동작을 반복하다가 멈출 수 있다. <img src="http://drive.google.com/uc?export=view&id=1iNnv_GTF0yitvlbzdzf6GaV1vvrmIyat" alt="홍팍-자바스크립트-반복문-사용-주의점-무한루프"> 다음은 그 예로 0을 계속 출력하는 코드이다. ``` let count = 0; while (count < 5) { console.log(count); } ``` 위 코드로 0부터 4까지 출력하면서 반복문을 탈출하려면, count 값을 다음과 같이 증가시켜야 한다. ``` let count = 0; while (count < 5) { console.log(count); count += 1; // 갱신 코드 추가 } ``` ## 실습으로..! 자세한 코드의 활용과 실제 사용법은 다음 강의에서 다뤄보도록 하자. ## 구글링 훈련🔥 - 자바스크립트 반복문 - 자바스크립트 for 문 - 자바스크립트 while 문 - 자바스크립트 무한루프 - 자바스크립트 플로우차트