TIL-JavaScript(반복문의 제어,중첩)

22.05.11

🧃 반복문이 없다면 ?

coding everybody를 10번 반복해서 출력하고 싶다면 아래와 같이 코드를 작성하면 됩니다.

document.write("coding everybody 1 <br />";
document.write("coding everybody 2 <br />";
document.write("coding everybody 3 <br />";
document.write("coding everybody 4 <br />";
document.write("coding everybody 5 <br />";
document.write("coding everybody 6 <br />";
document.write("coding everybody 7 <br />";
document.write("coding everybody 8 <br />";
document.write("coding everybody 9 <br />";
document.write("coding everybody 10 <br />";

만약에 이 코드가 수억개라면 계속 copy 하기엔 불가능 일 수가 있다.
코드가 수억개라도 편리하게 사용할 수 있는 방법이 있다.
바로 for문을 이용하면 됩니다.

이렇게 for문을 작성하게 되면

for(var i = 0;i < 10000; i++){
	document.write("Coding everybody "+(i)+"<br />");
	}	

이렇게 작성만 하면 숫자0부터 9999번까지 나타납니다.
반복문이 이렇게 편리하다는 것을 볼 수가 있습니다.

🍹 반복문의 제어

1. continue

continue 명령은 반복문에서만 사용이 가능합니다. continue는 반복문에서 현재의 루프를 건너뛰고 다음 루프를 실행하기 위해 사용합니다.
continue를 사용하면 continue아래의 기술되어 있는 코드들은 무시하고 반복문의 처음으로 돌아가 조건검사를 실행합니다.

이렇게 코드를 작성하게 되면,

5라는 숫자는 무시하고 다시 반복문이 실행된다는 것을 볼 수 있습니다.

2. break

break는 while에서 설명했듯이 현재 코드 블록(중괄호로 묶인 부분)을 빠져나갑니다. 반복문에서 break 명령을 사용하면 조건을 만족하지 않아도 현재루프 까지만 진행하고 반복문의 진행을 멈춥니다. continue 명령과 마찬가지로 break 명령 이하에 기술된 코드블럭의 명령들은 무시합니다.

이렇게 코드를 작성하게 되면,

5부터 있는 숫자들은 그의 명령을 무시한다는 것을 볼 수 있습니다.

🥤 반복문의 중첩

디버깅 모드를 살펴보자면, 개발자 모드로 들어가서 sources를 클릭 후 8번이라는 숫자를 누른 다음에 F5를 눌러줍니다. F5를 눌러주면 코드가 잡힙니다. 코드가 잡힌 후 브레이크 포인트를 설정해줍니다. (숫자 8을 클릭) 이후 다시 F5를 누르면, 브레이크 포인트 부분에서 멈추게 됩니다. 한줄 씩 살펴보고 싶다면 빤간색으로 표시되어 있는 ↓ 이 화살표를 클릭하여 코드가 실행되는 과정을 살펴봅니다. (만약 한번에 보고싶다면 첫번째 기호를 선택하면 됩니다.) 즉, 이렇게 디비거라는 것을 통해 코드가 실행되는 과정을 직접 확인해 볼 수 있다는 것을 알 수 있습니다.