JS-반복문 while, do while, for

JS - 반복문 while, do while, for

---

오늘은 JS에서 여러 동작을 반복하는 코드를 작성할 때

사용되는 반복문에 대해 알아보겠습니다.

 

보통 상품의 목록에서 삼품을 차례대로 출력하거나,

숫자를 계속해서 증가시키면서

true 값을 반환하는 경우 등이 있습니다.

 

이 경우 반복문을 유용하게 사용할 수 있습니다.

 

반복문에는 while문과 for문이 있습니다.

 

(1)

while

 

while문에 대해 먼저 설명드리겠습니다.

 

while문은

while (condition){

//반복문 body(본문)

//코드

}

이런 식으로 작성할 수 있습니다.

 

실행방식은 condition 부분에서 true가 나오면

반복문 body  부분에 코드가 실행됩니다.

 

반복문을 사용하실 때 주의하실 점은

제한을 걸어두거나, break를 걸지 않으면

계속해서 반복할 것입니다.

 

그래서 숫자의 경우

크기를 지정해두거나 break를 걸어두시면 좋습니다.

 

※

Tip을 드리면

만약 반복문 body 코드가 한 줄이라면

대괄호를 생략하고 작성하셔도 좋습니다.

※

 

while 문 예시

 

예시를 보시면 i가 0이고 그래서

while문에 condition 부분의 값이 true가 나와서

본문인 alert(i)가 출력되었고

그다음 증가 연산자(i++)를 만나 i가 1이 돼서

다시 condition 부분이 false가 될 때까지

반복합니다.

 

그래서 결과는 alert 모달 창에서

0부터 3 미만인 2까지 출력이 됩니다.

 

만약 condition 부분에 i < 3이 없다면

무한으로 늘어날 것입니다.

 

(2)

do while

 

do while문은 while문과 비슷한 구조이지만

차이점은 while 이 아래로 배치된다는 것입니다.

 

보통은 while 문이 많이 사용되지만

오늘은 반복문에 대해 알아보는 것이기 때문에

알아보도록 하겠습니다.

 

do while의 장점은 false가 있더라도

무조건 처음 한 번은 실행된다는 것입니다.

 

코드 예시를 보여드리겠습니다.

do {

//반복문 body(본문)

} while (condition);

이렇게 작성할 수 있습니다.

 

그래서 만약 반복문 body에

alert()을 사용한다면

 

condition의 제한과 상관없이

우선 한번 출력이 된다는 것입니다.

 

원리는 위에서 아래로 코드가 진행되기 때문입니다.

 

do while문 예시 코드

결과 값

 

위에 값을 보시면 while의 condition 부분만 봤을 때는

실행이 되지 않는 false의 값이 나오지만

 

실행을 한다면 alert 모달 창에

0이 출력되는 것을 볼 수 있습니다.

 

이후에는 순차적으로 진행돼서

condition 부분의 제한과 비교해서

출력되지는 않습니다.

 

(3)

for

 

이번엔 for문인데 for문은 위에 반복문들 보다

복잡하지만 가장 많이 사용되는 반복문입니다.

 

사용방법은

for(변수; 변수의 조건; 코드 실행 후 진행될 작업){

//반복문 body(본문)

}

이런 식으로 작성할 수 있습니다.

 

먼저 for(변수를 선언하고; 선언된 변수에 조건을 걸어서,

변수에 조건이 통과되면 이어질 다음 작업 내용)

 

여기서 포인트는 변수, 변수의 조건 부분은 세미콜론(;)을

사용하고 마지막 부분에는 세미콜론(;)을 사용하지 않습니다.

 

동작원리를 설명드리면

우선  JS에서

①변수를 읽습니다.

②변수에 사용될 조건을 확인합니다.

③반복문 body를 읽습니다.

그 후 ④다음 작업으로 이어질 내용이 적용되어서

다시 ②으로 돌아가 결과가 false가 나올 때 까지

계속 반복합니다.

 

※

Tip을 드리면

변수와 마지막에 코드 실행될 작업의 영역에는

작성할 내용이 없다면 생략하셔도 좋습니다.

 

하지만 변수를 작성하는 부분에는 내용이 없어도

세미콜론(;)을 남기셔야 합니다.

 

변수의 조건만 작성하게 되면

while 문과 동일한 구조가 될 수 있습니다.

※

 

for 문 예시 코드

 

이런 식으로 작성할 수 있습니다.

 

(4)

break

 

break는 반복문의 실행을 멈출 때 사용합니다.

보통은 제한을 걸어서 false가 나오면

실행이 멈추지만

 

break는 제한이 없을 경우나 원하는 부분에 제한을

걸어야 하는 상황에서 사용할 수 있습니다.

 

---

 

오늘은 반복문에 대해 알아보았습니다.

 

반복문은 귀찮은 일을 해결해주는

유용한 도구이기 때문에

꼭 기초를 알아두시고 JS를 공부하시면

좋겠습니다.

 

감사합니다!!