본문 바로가기
JavaScript Study

JavaScript - #9. 제어문 (2)

by KMS_99 2023. 8. 25.

2. 반복문 (loop statement)

반복문은 조건식 평가를 반복하여 결과가 참인 경우 코드 블록을 실행한다. 조건식이 거짓이 되면 코드블록을 실행하지 않고 빠져나오게 된다.

 

자바스크립트에서 반복문은 for문, while문, do while문 3가지가 있다.

 

 

- for문

for문을 사용하기 위해서는 평가를 받을 변수의 선언 및 초기화, 조건식, 증감식 이 3가지 요소가 필요하다.

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

1. 변수의 선언 및 초기화

(3-2를 실행할 때까지 2~4 반복)
2. 조건식 평가 

3-1. 조건식이 참일경우
 : 코드 블록 내 문 실행

3-2. 조건식이 거짓일 경우
 : for loop 종료

4. 증감식 실행

코드를 작동순서에 맞게 분석하며 이해해보자.

for (let i =0 ; i<5; i++){
    console.log('i: ',i); 
}
// i: 0, i: 1, i: 2, i: 3, i: 4 출력
1. 변수의 선언 및 초기화
for문에서 반복하여 평가를 받을 변수 선언 및 초기화 / let i = 0

2. 조건식 평가
i 의 값이 0 일 때 i<5를 만족하는가? => true

3-1 조건식이 참인경우
console.log('i: ',i); 실행

4. 증감식 실행
i++ 에 의하여 i의 값은 1로 재할당

.... (반복)

2. 조건식 평가
i 의 값이 5 일 때 i<5를 만족하는가? => false

3-2 조건식이 거짓일 경우
for loop 종료

출력 결과 :

 

for문은 중첩하여 사용이 가능하다.

다음 예시는 주사위 두개를 던져 합이 6이 나오는 경우를 출력하는 코드이다.

for (let i=0; i<6; i++){
    for (let j=0; j<6; j++){
        if(i+j === 6) console.log('[',i,',',j,']');
    }
}

출력 결과 :

중첩 for문은 내부 for문을 외부 for문에서 실행시킬 문으로 생각하면 이해가 쉽게 될것이다.

 

 

- while문, do while문

while문은 주어진 조건식의 결과가 참이면 코드블록을 계속하여 반복실행한다. 

for문을 명확한 반복횟수를 지정할 수 있을때 사용한다면, while문과 do while문은 반복획수를 명확히 알 수 없을 때 주로 사용한다.

 

while문과 do while문의 차이는 조건식의 실행 시점이다.

while문은 조건식을 먼저 실행 후 참이면 코드블록을 실행하지만, do while문은 코드블록을 먼저 실행하고 조건식을 실행하여 참이면 다시 코드블록을 실행하는 구조이다.

 

다음 코드로 while과 do while의 차이를 이해해보자.

let count = 0;
while(count<0) {
	console.log('while count is ', count);
	count++;
}

count = 0;
do{
    console.log('do while count is ', count);
    count++;
}while(count<0)

같은 조건에서 실행시킨 코드이며, 두개의 출력값은 다르다.

이유는 while은 조건식 먼저 실행시키기 때문에 count<0이 false가 되어 코드블록을 실행시키지 못하였고,

do while은 일단 코드블록을 먼저 실행시키고 조건식을 실행시키기 때문에 코드블록을 1회 실행시킬 수 있던것이다.

출력값은 다음과 같다.

 

while문을 사용할 때 주의 해야할 점이 있다.

바로 무한루프에 대한 내용이다.

while문의 코드블록 실행 조건은 조건문의 true, false 여부이다. 

그렇다면 조건문에 true를 입력한다면 어떻게 될까?

while문에서 탈출할 수 없는 무한 루프상태가 될 것이다.

while(true){} // 무한루프 발생

무한루프 발생

무한루프가 발생하여 코드가 종료되지 않는 문제가 발생한다.

이것을 탈출하려면 어떻게 해야할까?

이전 조건문 파트 switch문에서 사용하였던 break문을 사용하면된다.

일정한 조건을 달성하면 break문을 실행시키는 것이다.

count = 0;
while(true){
    count ++;

    if (count===10){
        break;
    }
}

while을 사용할 때 우선적으로 무한루프가 생기지 않도록 주의해야할 것이다.


3. break문, continue문

 

break문은 앞서다룬 switch문, 반복문과 레이블문의 코드블록을 탈출하기 위해 사용된다.

switch문, 반복문에서의 break는 이미 다루었으니 레이블문에서의 사용을 확인해보자

outer : for (var i =0; i<3; i++){
    for (var j =0; j<3; j++){
        if(i+j===3) break outer;
    }
}

outer는 레이블 for문을 지칭하는 레이블 식별자이다.

중첩 for문의 내부 for문에서 if문으로 일정한 조건 (i+j ===3)을 주었고 해당 조건이 참이 될 때 break를 하는데 그 대상이 outer라는 식별자를 가진 레이블 for문인 것이다.  

 

continue문은 반복문에서 사용되며 반복문의 코드실행을 continue문을 실행한 시점에서 멈추고 다음 반복으로 넘어갈 때 사용한다.

let string = "Hello World";
let search = "o";
let count_search=0;

for(let i=0;i<string.length;i++){
    if(string[i]!==search) continue;

    count_search++;
}

console.log(count_search);

string에 저장된 text 내에서 찾고자하는 알파벳이 몇번 들어있는가에 대한 코드이다.

이때, for 반복문을 사용하며, 조건은 string의 길이만큼 반복하게 주었다.

반복문 코드블럭을 보면 if조건문이 있고 조건은 string변수의 인덱스 하나씩 비교하여 만약 찾고자 하는 알파벳과 다르면 continue를 통해 다음 반복으로 빠르게 넘어가도록 하였다.

만약 찾고 싶은 알파벳과 일치하는 인덱스가 있다면 continue는 실행되지 않고 다음 문으로 넘어간다.

이렇게 코드를 작성하면 효율적인 코딩을 할 수 있다.

'JavaScript Study' 카테고리의 다른 글

JavaScript - #11. 객체 리터럴  (0) 2023.08.27
JavaScript - #10. 타입변환 & 단축평가  (0) 2023.08.25
JavaScript - #8. 제어문 (1)  (0) 2023.08.25
JavaScript - #7. 연산자 (2)  (0) 2023.08.24
JavaScript - #6. 연산자(1)  (1) 2023.08.24