Javascript 반복문

목차

1. 반복문(loop)

2. while 반복문

3. do...while 반복문

4. for 반복문

5. 반복문의 종료(break)

6. 다음으로 넘어가기(continue)

7. break/continue와 사용하는 lable

---

1. 반복문(loop)

 

 

코드를 작성할 때에 단순히 반복적으로 작업해야하는 경우가 생긴다.

 

예를 들면, 배열 안에 차례대로 1, 2, 3, ... 을 넣어 주어야하는 경우 등등 

 

이럴 때에 반복문을 이용하면, 단순 작업을 반복해서 하지 않아도 된다.

 

---

2. while 반복문

 

문법(Syntax)

while ( 조건절 ) { 본문 }

while ( 조건절 ) {
    본문
}

 

조건이 truthy 인 경우에 본문을 실행한다.

 

예시(Sample)

let i = 0

while ( i < 5 ) {
    console.log(i)
    i++ // i = i + 1
}

// 0
// 1
// 2
// 3
// 4

 

---

3. do...while 반복문

 

문법(Syntax)

do { 본문 } while ( 조건절 )

do {
    본문
} while ( 조건절 ) 

 

do를 이용해 while문의 조건을 아래로 옮길 수도 있다.

 

한 가지 다른점이 있다면, 본문을 한 번 실행한 후에 조건을 판별한다.

 

예시(Sample)

do {
    console.log(i)
    i++ // i = i + 1
} while ( i < 5 )

// 0
// 1
// 2
// 3
// 4

 

---

4. for 반복문

일반적으로 while문 보다는 for 문을 가장 많이 사용한다.

 

문법(Syntax)

for( 초기값; 종료조건; 증감값;) { 본문 }

for( 초기값; 종료조건; 증감값;) {
    본문
}

for문의 동작순서는 다음과 같다.

1. 반복문(for) 진행시 초기값을 딱 한번 진행한다.
2. 종료조건을 확인한다. 종료조건이 false이면 반복을 멈춘다.
3. 종료조건이 truthy일 동안에 본문을 실행한다.
4. 본문의 실행 후에 증감값을 적용하여 2번부터 반복한다.

 

 

예시(Sample)

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

// 1
// 2
// 3
// 4
// 5

 

for문의 괄호 안에서 let i 를 선언하였다.

 

이는 반복문의 본문 안에서만 사용이 가능한 변수이다.( 지역변수 )

 

---

5. 반복문의 종료(break)

 

대개에는 반복문의 조건이 falsy가 되면, 반복문을 종료시킨다.

 

이 외에도 break를 사용하면, 반복문을 종료시킬 수 있다.

 

예시(Sample)

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

// 1

 

앞에 조건(if문)을 주어 상황에 따라 멈추는 것도 가능하다.

 

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

// 1
// 2
// 3
// 4
// 5

---

6.  다음으로 넘어가기 continue

 

break와 비슷하지만, break는 끝내버리는 반면 continue는 전체 반복문을 멈추지 않는다.

 

조건에 따라 반복을 멈추고 넘어가게 할 수 있다.

 

for (let i = 1; i <= 4; i++) {
    console.log(i)
    console.log("===")
    if(i <= 2) continue
    console.log(i)
}

// 조건을 충족하여 continue를 실행

// 1
// ===

// 2
// ===

// 조건을 충족하지 못해 전체를 실행
// 3
// ===
// 3

// 4
// ===
// 4

 

---

7. break / continue와 사용하는 label

 

2중 for 문과 같은 중첩 반복문에서 조건에 따라 반복문을 빠져나오고 싶을 때 사용할 수 있다.

 

안쪽의 반복문에서 멈추고 싶어 break를 사용해도, 겉에 있는 첫번째 for문이 실행되므로 break를 마음대로 사용할 수 없다.

 

하지만 label을 이용하면, 안쪽 반복문에서 break를 사용해 전체 반복문을 멈출 수 있다.

 

문법(Syntax)

<lableName> for ( ... ) {
    본문
    for ( ... ) { 
        본문 2
        if ( 조건 ) break/continue <lablename>
    }
}

 

자주 사용하지는 않으므로, 문법을 보고 어지러움을 느낀다면 보지 않아도 된다.

 

다중 for 문 안에서 조건에 따라 break / continue 가 지정한 <labelName>을 만났을 때,

 

<lableName>의 for 문을 종료시킨다.

 

(본래대로라면, 안쪽에 for문에 break가 있을 때, 안쪽의 for문만 종료 시키고 바깥쪽 for문은 진행된다)

 

중첩 for문

 

다중 for 문의 동작원리는 다음과 같다.

1. 바깥쪽 첫번째 for 문이 실행된다.
2. 초기값을 가지고 실행하며, 본문을 진행하다가 안쪽 for문을 만난다.
3. 안쪽의 for문은 조건에 따라 본문을 모두 진행한다.
4. 이제 다시 첫번째 for문의 증감값을 반영하여 진행한다.
5. 3번을 진행한다.
6. 이를 반복하고 나온다.

이를 이해하지 못했다면, 다음과 같이 이해해보자.

 

바깥쪽 for문은 3번, 안쪽의 for문은 5 번의 반복이 있다고 한다면 다음과 같다.

 

( 첫 번째 for문 회차, 두 번째 for문의 회차)

(1, 1)	(1, 2)	(1, 3)	(1, 4)	(1, 5)
(2, 1)	(2, 2)	(2, 3)	(2, 4)	(2, 5)
(3, 1)	(3, 2)	(3, 3)	(3, 4)	(3, 5)

 

이와 같이 모든 경우를 진행하고 마친다.

 

이 외에도 3중 for문 등을 진행한다면, 간단하게 ( x, y, z )로 나타낼 수도 있다.

 

 

 

---

참고자료
https://ko.javascript.info/while-for