[JavaScript] 반복문

◎ 반복문이란?

자바스크립트의 대표적인 제어문 중 하나
코드를 불필요하게 중복해서 작성하지 않아도 컴퓨터가 반복적으로 동작을 수행하도록 하는 것

반복문을 왜 써야할까?

구구단을 출력하는 코드를 짠다고 가정해보자.

먼저 2단을 출력하는 코드를 작성하고 동작이 마무리되면 다시 3단을 출력하고...

컴퓨터가 같은 동작을 반복하는 동안 우리는 계속 코드를 입력해주어야 할것이다.

 

이때 반복되는 코드를 자동으로 반복하도록 한다면 시간적인 측면에서나 가독성에도 좋을것이다.

 

 

---

◎ for문 

• 자바스크립트의 대표적인 반복문

▶ for문 형식

for ( 초기값; 조건식; 증감식 ){ 실행할 코드; }

• 초기값 : 증감식 반복횟수를 카운트하는 역할을 하는 변수(주로 정수를 의미하는 integer의 약자인 i를 사용) 초기값은               반복문의 코드블록 내부에서만 유효함
• 조건식 : 코드블록 내부의 코드 실행 여부를 결정함(true이면 코드실행, false면 코드종료)
• 증감식 : 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식

1부터 3까지의 수를 차례대로 더한 값을 구하는 코드를 작성해보자

let num = 0; 
// i는 1 ; i는 3보다 작거나 같을때까지 실행; i는 하나씩 증가 
for (let i = 0; i<=3; i++){
  num = num + i;
}
console.log(num); //6

▶ 코드의 진행 순서

1. for문 내부에 i라는 변수를 선언하고 1이라는 초기값을 선언

2. 변수 i가 3보다 작거나 같은지 확인

3. 위의 결과가 true면 블록내부의 코드를 실행

4. 변수 i를 1 증가시킴

5. 2~4의 동작을 반복

6. 2의 결과가 false면 반복문 종료

코드를 반복할 횟수는 조건식을 통해 결정할 수 있다.

 

 

반복문을 활용해보자

▶ 구구단 출력하기

let num = 2;
let result;
for (let i = 1; i <=9; i++){
    result = (num*i);
    console.log(result);
}

 

---

● 문자열 반복문

반복문에는 숫자타입만 사용하는 건가?
→ NOPE!

문자열도 활용할 수 있다.

 

문자열 타입에서 사용하던 몇가지 메서드를 다시 가져와보자

• index : 문자열의 각 문자의 순서
• indexOf : 특정 문자의 인덱스를 확인. 찾는 문자가 2개 이상인 경우 가장 앞에 있는 문자의 인덱스를 조회
• length : 문자열의 길이를 조회

for문의 초기화, 조건식, 증감식은 모두 숫자타입과 관련되어 있다.

만약, 문자열의 첫번째 문자부터 마지막 문자까지 모두 출력하려면?

let str = 'hello word';
for(let i = 0; i < str.length; i++){
    console.log(str[i]);
}

문자열의 길이가 짧다면 숫자를 넣어주어도 되지만 .length로 입력하는게 더 정확하다.

 

 

 

 

반복문이 진행되는 동안 조건문을 넣어 더 복잡한 문제를 해결할 수 있다.

▶ 1부터 10까지의 숫자 중 홀수만 출력해보자

for(let i = 1; i <=10; i++){
    if(i%2===1){
        console.log(i);// 1,3,5,7,9
    }
}

 

 

반복문의 중첩도 가능하다.

▶ 반복문 중첩을 사용해 구구단을 출력해보자

for(let num = 2; num <=9; num++){
    for(let i = 1; i <=9; i++){
        console.log(num * i);
    }
}

중첩된 반복문은 어떻게 진행될까?

1. num은 2를 할당받는다.

2. num이 9보다 작거나 같으므로 내부코드를 실행한다.

2-1. 내부코드에 선언된 i에 1을 할당한다.

2-2. i는 9보다 작거나 같으므로 내부코드를 실행한다. (이때 num = 2, i = 1)

2-3. 결과 출력 후 i는 1이 증가한다.

2-4. 증가된 i가 조건이 false가 될때까지 반복한다. (이때 num=2, i = 9)

3. 내부코드가 종료되면 num은 1이 증가한다.

4. 2-3의 순서로 계속 진행되다 조건에 false가 되면 코드는 종료된다.

 

 

설명을 보면 복잡해 보이지만 간단하게 말하자면

외부 반복문의 초기화와 조건식 평가가 이루어진 후, 내부 반복문이 실행됨
내부 반복문 또한 초기화와 조건식 평가가가 이루어진 후 내부코드가 실행됨
증감식, 조건식 평가가 반복적으로 이루어지다 내부 반복문의 조건식 평가가 false가 되면 내부 반복문 종료
외부 반복문의 증감식과 조건식 평가가 이루어지고 true인 경우 내부 반복문 순환
외부 반복문의 조건식이 false가 되면 모든 반복문 종료

반복문은 두개 이상 중첩이 가능하다. (갯수의 제한 없음)

2개의 반복문 중첩시 → 이중반복문

3개의 반복문 중첩시 → 삼중반복문

 

---

◎ while문

조건식만 입력한 후 조건식의 평가 결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행

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

위 코드를 while문으로 바꾸어보자

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

 

while문을 사용할때는 '무한루프'를 조심해야한다

※ 무한루프란?

반복문이 종료되는 조건식이 항상 true로 평가되어 무한히 반복되는 현상

let i = 4;
while(i>0){
    console.log(i);
    i++;
}

위 코드의 경우 i는 항상 0보다 크므로 무한루프가 발생한다

→ while문을 작성할 때는 조건식이 false로 평가되는 순간이 있는지 주의하기

---

○ do ... while문

while뒤에 오는 조건식이 true로 평가되는 동안 do뒤에 오는 코드블록 내부의 코드를 반복하여 실행
단, 이 경우 do의 코드블록 내의 코드가 최소 한 번은 실행됨

do {
    console.log('hello'); //hello
} while(false);

do의 내부코드가 한 번 실행된 후 false로 평가되어 종료된다.

---

◎ for문 vs while문

둘의 용도는 명확하게 구분되지는 않으나 주로 사용하는 상황이 있다.

▶ for문을 사용하는 경우

• 반복 횟수가 비교적 명확할 때
• 배열, 문자열 내부를 순회할때
• 반복문의 중첩이 필요할 때

▶ while문을 사용하는 경우

• 반복 횟수가 명확하지 않을때