반복문 (loop statement)

for문 (for statement)

1. 기본 형태와 동작 원리

조건부분이 충족되면 동작부분이 계속 반복해서 실행된다.

for(초기화부분; 조건부분; 추가동작부분){
동작부분
}

/* 초기화부분:for문이 시작할때 가장 먼저 딱 한번만 실행되는 부분
   조건부분: if문과 동일하게 이 부분에 작성된 코드를 Boolean 형태로 평가한 다음 
        true로 판단되면 동작부분을 실행하는 역할
   추가동작부분: 동작부분이 true로 판단되었을때 동작을 실행하고 
           그 다음 추가적으로 동작할 것을 작성하는 부분 */ 

for(let i = 1; i <= 10; i++){
	console.log('오늘 날씨 최고!');

/* 반복문을 만들 때 가장먼저 생각할 부분은 얼만큼 반복할 것인가이다. 
반복의 횟수를 저장하는 역할이 변수 i의 역할 
그래서 보통 for문의 초기화부분은 반복횟수를 저장할 변수를 생성하는데 활용 */

동작원리:
for문이 시작되면 가장먼저 초기화부분인 'let i = 1;'이 실행되면서 변수 i가 선언된다. 그리고 나면 조건부분인 'i <= 10'이 평가되는데, i는 1이기 때문에 조건 부분이 true가 되어서 동작 부분이 실행된다. 추가동작부분'i++'으로 넘어가서 i가 1이 증가했으니까 i는 이제 2가 된다. 그런데 여기서 초기화부분은 딱 한번만 실행되기 때문에 한번 반복이 일어나면 그 다음 순서는 초기화가 아니라 조건부분이 된다. 이때부터는 조건부분이 false가 될때까지 조건부분 > 동작부분 > 추가동작부분 순서로 계속해서 반복이 일어난다.

2. 추가동작부분을 꼭 채울 필요는 없다

for(let i = 1; i <= 10;){
	console.log(`${i} 오늘 날씨 최고!');
    i++; 
 } 

동작부분 아래에 i를 증가시켜도 아무런 문제 없이 똑같은 결과가 출력된다. 동작부분에서 i를 증가시켰고, 추가동작부분에는 아무것도 작성하지 않았기 때문에 그냥 추가 동작부분에서 아무 동작도 하지 않는 것이다.

3. 초기화부분에서 생성한 변수는 for문의 지역변수다.

for(let i = 1; i <= 10; i++){
	console.log(`${i} 오늘 날씨 최고!');
 } 
 console.log(i); // Error! 

for문 안에서 생성한 지역변수이기 때문에 for 반복문이 종료되고 나서 for 반복문 밖에서 변수를 사용하려고 하면 오류가 발생한다.

4. 초기화부분도 반드시 채울 필요는 없다. 다만 for문의 소괄호 가장 첫번째 세미콜론은 생략할 수 없다.

let i = 1; 
for(; i <= 10; i++){
	console.log(`${i} 오늘 날씨 최고!'); 
 } 

for문의 소괄호 안쪽에 세미콜론 2개가 없으면 실행 오류가 발생한다.

while문 (while statement)

1. 기본 형태와 동작 원리

한번 실행하기 시작하면 조건부분이 충족되지 않을 때까지 동작부분을 계속 반복한다. 특별한 경우가 아니라면 for문과 while문은 서로 대체가능하다.

while(조건부분) {
 동작부분
} 

while부분은 초기화부분이 없기 때문에 반복에 필요한 횟수를 카운트하려면 반복문 밖에서 글로벌변수를 만들어주어야 한다. 추가동작부분도 동작부분에 작성해주면 된다. 기본 형태가 간단해보이지만 for문이 가독성 측면에서는 더 간결해지는 측면이 있다.

let i = 1; 
while (i <= 10){
	console.log(`${i} 오늘 날씨 최고!'); 
    i++; 
  } 

같은 과제 

for(let i = 1; i <= 10; i++){
	console.log(`${i} 오늘 날씨 최고!'); 
 } 

2. while문을 써야하는 경우

반복문 밖에 글로벌 변수를 가지고 조건을 평가하고 반복문 안에서도 변수를 다루고 있다. 반복문을 다 실행한 후에도 변수를 반복문 밖에서도 사용하고 있다. for문의 변수는 지역변수라는 한계가 있기 때문에 글로벌변수를 활용해야하는 경우에는 for문보다는 while문을 사용하는 것이 좋다.

break와 continue

break

코드를 빠져나오는 기능

let i = 1; 
while (i <= 10){
	console.log(i);
    i++;
 } 

이 코드를 콘솔창에 실행해보면 1 2 3 4 5 6 7 8 9 10까지가 출력된다.

let i = 1; 
while (i <= 10){
	console.log(i);
    i++; 
    break; 
 } 

이 코드를 콘솔창에 실행하면 1만 출력된다. 이유는 i가 1이면 'i<=10'이 true이므로 1이 출력되고 break를 만나면 while문을 빠져나가게 되면서 더이상 반복하지 않게 된다.

let i = 1; 
while (i <= 10){
	console.log(i);
    if (i === 7){
    break; 
    }
    i++; 
  } 
  
  동일한 코드 
  
  for(let i = 1; i <= 10; i++){
	console.log(i);
    if(i === 7){
    break; 
   }
  }

이 코드는 i가 1일때부터 7이 될때까지 실행되다가 7이 되어서 break를 만나면 반복하지 않게 된다. 1 2 3 4 5 6 7이 출력되는 것을 확인할 수 있다.

continue

동작을 건너뛰는 기능, continue를 만나면 코드는 실행되지 않고 바로 다음 단계로 넘어간다.

for(let i = 1; i <= 10; i++){
	console.log(i);
  }

이 코드는 1 2 3 4 5 6 7 8 9 10을 출력한다.

for(let i = 1; i <= 10; i++){
	if (i % 2 === 0){
    continue; 
   }
	console.log(i);
  }
  
  동일한 코드 
  
  while(i <= 10){
  	if(i % 2 === 0){
    i++;  //while문은 for문과 다르게 추가동작 부분이 없다. 그래서 미리 i 증가시켜줌 
    continue; 
   }
   console.log(i);
   i++; 
  } 

i가 2로 나누어 떨어질때 continue를 해준다는 내용을 추가했다. 실행시키면 1 3 5 7 9만 출력된다.
처음 for문이 동작할때 변수 i가 선언된다. 1이 할당된 변수 i가 조건부에서 평가되고 1은 10보다 작으므로 동작이 실행되는데 1은 2로 나누어 떨어지지 않으므로 continue는 실행되지 않고 콘솔에 1이 출력된다. 추가 동작 부분에서 i가 2가 되면 2로 나누어 떨어지므로 continue의 조건에 부합해 실행중이던 동작을 건너뛰고 다음 동작인 추가동작 부분으로 넘어가게 된다. (console.log(i) 부분이 무시된다.