[TIL / JavaScript] 조건문과 반복문 (3)

do…while 문

• do…while 문은 코드 블록을 한 번 실행하고 조건식을 평가한다. → 코드 블록은 무조건 한 번 이상 실행된다.

var count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
  console.log(count);
  count++;
} while (count < 3); // 0 1 2

for 문

while 문은 반복문의 필수적인 요소들이 분리되어 있다. → 밀접한 구성요소가 멀리 떨어져 있으면 변수가 중복 사용되어 오류가 발생할 여지가 있으며 가독성도 떨어진다.

• for문은 반복문의 패턴을 문법적인 요소로 만들어 놓은 것이다.

/*
var i = 0;
while(i < 10){
    document.write('coding everybody <br />');
    i++
}
*/
for(var i = 0; i < 10; i++){
    document.write('coding everybody <br />');
}

• iterate 약자인 i를 변수로 관용적으로 사용한다.

• 구성요소의 순서를 준수해야 한다.

• 구성요소를 semicolon을 기준으로 분리하고 마지막 요소는 semicolon을 사용하지 않는다.

for (초기화식; 조건식; 증감식) {
  조건식이 true인 경우 반복 실행될 문;
}

1) 초기화식은 처음 한 번만 실행된다.

2) 조건식을 만족하면 코드 블록을 실행한다.

3) i++ 일 때, 증감식은 두 번째부터 실행된다.

4) 반복 조건을 벗어나면 for 문을 탈출한다.

• for 문의 구성요소는 모두 옵션이며 어떤 식도 선언하지 않으면 무한 루프가 된다.

for (;;) { } // 무한루프

반복문의 효용

• 반복문이 없다면 같은 작업을 수없이 반복해야 한다.

document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
document.write('coding everybody');
//.......

반복문 없이 coding everybody 뒤에 숫자를 1부터 10까지 붙이고 싶다면 행마다 숫자를 바꿔야 하기 때문에 Copy & Paste도 할 수 없다.

document.write('coding everybody 1<br />')
document.write('coding everybody 2<br />')
//중략
document.write('coding everybody 9<br />')
document.write('coding everybody 10<br />')

반복문을 이용하여 아래 코드와 같이 작성할 수 있다.

var i = 0;
while(i < 10){
    document.write('coding everybody '+i+'<br />');
    i++;
}

coding everybody 뒤에 붙는 숫자를 2의 배수로 변경할 수도 있다.

var i = 0;
while(i < 10){
    document.write('coding everybody '+(i*2)+'<br />');
    i++;
}

반복문의 중첩

• for 문 안에 for 문을 중첩해서 사용할 수 있다.

00부터 99까지 출력하는 예제이다.

// 0부터 9까지 변수 i에 순차적으로 값을 할당        
for(var i = 0; i < 10; i++){
    // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
    for(var j = 0; j < 10; j++){    
        // i와 j의 값을 더한 후에 출력
        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 
        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
        document.write(String(i)+String(j)+'<br />');
				/* document.write('coding everybody'i+j+'<br />');와 같이 문자를 옆에 두면 변수가
				자동으로 타입이 변경되어 문자열로 인식된다.*/
    }
}

디버거

• 디버그는 오류를 제거하는 행위를 의미하며 디버거는 그것을 돕는 도구이다.

1) 개발자 도구의 sources 탭에 들어가서 라인을 선택하면 파란색으로 Breakpoints를 지정할 수 있다.

2) 리로드하면 해당 라인에서 일시정지된 화면이 출력된다.

3) 우측 상단의 function을 사용해서 하나의 step씩 코드를 진행시킬 수 있다.

4) 변수들의 현재 값을 Global 창과 Watch Expressions 창에서 검색을 통해 확인할 수 있다.

5) 내부의 j에 대한 for 문이 종료되면 i가 한 번씩 count되면서 반복되는 것을 볼 수 있다.

P.S.

디버거의 편리함에 놀라움을 금치 못했다😮 코딩을 하다가 오류가 발생했을 때, 에러 메시지만 보고 원인을 찾아내는 일이 쉽지 않을 거 라고 생각했는데 이렇게 하나의 step씩 동작을 보여준다면 오류 수정은 물론, 모르는 문법의 코드를 보아도 디버거를 통해 쉽게 유추할 수 있겠다는 생각이 들었다😀

참고 문서

• 제어문 by PoiemaWeb
• 반복문 by 생활코딩