JavaScript (1) - 반목문(for, while, do..while )과 반복문 제어(break, continue)

2021. 1. 6. 22:41front-end/JavaScript

728x90

1~10 까지의 수를 console.log() 함수를 이용하여 로그를 출력하려면 어떻게 코드를 작성 해야할까?

console.log('1')
console.log('2')
console.log('3')
console.log('4')
.
.
.
console.log('10')

위 코드처럼 작성할 수 있다. 그렇다면 1~100은? 1~1000000은 어떻게 작성해야할까? 사실상 위처럼 작성한다는 것은 말이 안됩니다. (할 수는 있겠지만.. 매우 비효율적이다.)

이를 위해 '반복문'을 사용할 수 밖에 없습니다. 실제 웹페이지에서는 반복문을 이용하여 메뉴를 보여주기도 하고 수백, 수천개의 게시글을 보여줄 때도 사용합니다. 

 

반복문은 for과 while 이 대표적입니다.

 

for 문

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

for 문 출력값

위의 코드를 작성하여 크롬 콘솔에서 실행해보면 위와 같은 결과가 출력됩니다.

단 세줄로 1~10 까지 1~100000000까지 출력이 가능합니다.

위의 예시를 분석해보면 시작은 let i = 0;으로 변수를 선언해주고 , 조건은 i < 10이고, 마지막에 i++ 를 작성해줍니다.

i가 10이하인 조건일 경우에만( i 가 10이 될 때까지 ) i++ 은 계속 반복 됩니다.

위의 예시에서 i에 +1 을 해주었는데, 만약 1을 더해주지 않는다면 0부터 시작하여 9까지 숫자가 출력될 것입니다. 

i를 0으로 설정해주었기 때문입니다.

 

While 문

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

위의 코드를 작성하여 크롬 콘솔에서 실행해보면 위와 같은 결과가 출력됩니다. for 문과 비슷하지만 +1 을 해주지 않아 0~9 까지 나오게 되었습니다.

while은 조건밖에 없기 때문에 몇 번 반복될 지 모를 때 사용합니다. 그리고 for문은 몇번 반복할 지 횟수를 알 경우에 사용됩니다.

 

* 반복문을 사용할 때 주의 할점! 

반복문이 무한으로 반복되지 않게 주의 해야합니다. 예를 들어 위에 코드에서 i는 0이고 i<10 조건에서 'i++' 을 넣지 않았다면 i는 0으로 무조건 10보다 작은 수이기 때문에 무한으로 반복문이 돌아가게 됩니다. 그럴 경우 웹페이지가 멈춰버릴 수 있습니다.   

 

do.. while

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

do.. while 은 while 과 비슷하다. do.. while은 내용을 먼저 실행하고 나서 조건을 비교합니다. do.. while은 내용을 실행하고 나서 조건을 비교하기 때문에 내용이 최소 한번은 꼭 실행된다. 그 이후에 조건에 따라 멈추거나 반복된다. ( for문과 while문에 비해 잘 쓰이지 않는다.)

 

break, continue

 

break

:멈추고 빠져나옴

while(true){
	let answer = confirm('계속 할까요??')
    if(!answer){
    	break;
    }
}

확인창

확인창에서 확인을 누르게 되면 answer 는 true 이기 때문에 계속 창이 나오게 됩니다.

그러나 취소를 눌러서 answer의 값이 false 가 되면 confirm 창은 더 이상 뜨지않습니다.

break 가 실행되면서 반복문이 멈추고 빠져나오게 됩니다.

 

continue

:멈추고 다음 반복으로 진행

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

continue 결과값 출력

위의 코드에서는 i 가 홀수일 경우에만 continue 를 실행합니다.

continue 가 실행되었을 때, 반복문은 계속 돌지만 continue 아랫 부분은 실행되지않고 다음으로 넘어갑니다. 그렇기때문에 짝수일경우에만 출력이 되었습니다. continue는 반복문에서 예외를 두고싶을 때 사용하면 됩니다.

 

 

 

반복문은 기초이지만 한번 쯤 짚고 넘어가면 좋을 것 같아 작성하게 되었습니다. 

감사합니다 : )

 

728x90