섹션 6. 반복분
1강. 반복문 기본 문법 - while
컴퓨터에게 반복적인 작업을 지시하는 방법
1) 반복 : loop, iterate
반복문과 조건문은 매우 중요하다.
- 조건문 : 컴퓨터를 똑똑하게 함
- 반복문 : 컴퓨터를 강력하게 함
2) 반복문의 문법 : while, for
- while (조건, Boolean) {
반복해서 실행할 코드
} - 조건이 true에서 false가 될 때까지 반복해서 실행
2강. 반복조건
반복 조건을 설정해주지 않으면 while(true)가 무한적으로 생성(무한루프)되기 때문에 과부하가 걸린다.
그래서 반복 조건을 설정해서 적당히 끊어줘야 한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var i = 0;
while(i < 10){
document.write("coding everybody " + (i+1) + "<br />");
i = i + 1;
}
</script>
</body>
</html>
i라는 변수를 설정해서 0부터 카운트하게 하고, 9까지만 실행되도록 설정했다.
그리고 출력값에는 몇 개가 출력되었는지 나타나도록 넘버링을 했다.
3강. for 문
위의 예시에서 while과 같은 조건문은 var, while, i가 붙어있는 것처럼 보이지만, 실제로는 그 라인 사이에 많은 코드들이 들어갈 수 있다. 그러면 중간에서 i에 대한 조건을 바꿔버릴 수 있기 때문에 코드가 불완전해진다. 이걸 보완할 수 있는 것이 for문이다.
- for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드) { //마지막은 ;가 필요 없음
반복해서 실행될 코드 //반복조건이 true일 경우 실행
}
장점 : 코드가 간결해지고 중간에 오류가 발생할 위험이 현저히 낮아짐
단점 : 각각의 구성 요소들의 순서를 기억해야 함
- i=i+1 // i에 1을 더한 값을 새로운 변수 값으로 지정
- i++; // 기존의 값을 사용하고 i의 값을 1씩 증가시켜라
- ++i; // 1을 증가시키고 i를 더해라
4강. 반복문의 효율성
'이게 없다면 얼마나 힘들었을까'라는 생각을 해보고 공부하면 재밌다^_^;
반복문이 없다면 얼마나 힘들었을까..
반복문이 없었다면 해당 작업을 100만 번, 1000만 번 해달라는 주문을 받았을 때 포기했을 것이다.
하지만 반복문이 있기 때문에 간단한 숫자 수정으로 원하는 결과를 만들어낼 수 있다.
5강. 반복문의 제어
반복문 안에 조건문이 들어갈 수 있고,
조건문 안에 반복문이 들어갈 수 있다.
1) Break : 반복문의 종료
for(var i = 0; i < 10; i++){
if( i === 5 ) {
break;
}
document.write("coding everybody " + (i) + "<br />");
}
위의 코드에서 i가 5가 되었을 때 break를 만난다.
그러면서 정지가 되어 코드가 실행되지 않고 종료되기 때문에 i === 5의 코드는 실행되지 않는다.
2) Continue : 그 순간에만 반복문 종료, 이후 재개
for(var i = 0; i < 10; i++){
if( i === 5 ) {
continue;
}
document.write("coding everybody " + (i) + "<br />");
}
이 코드에서 i가 5가 되었을 때 continue를 만난다.
그러면 그 뒤에 코드를 실행하고 다시 올라가는 것이 아니라, 바로 위로 올라가서 i === 6부터 실행된다.
따라서 continue 당시의 코드는 실행되지 않는다.
6강. 반복문의 중첩사용과 디버거
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 10; j++) {
document.write('conding everyday' +i+j+ '<br />');
}
}
위와 같이 코딩하면
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('coding everyday' +i+j+ '<br />');
document.write(String(i)+String(j)+'<br />');
}
}
이 코드가 실행되는 중간에 체크포인트를 만들어서 어떻게 돌아가는지를 체크할 수 있다.
- Source를 클릭한다.
- Breakpoint를 설정할 라인을 결정한다.
- Breakpoints 탭에서 Pause를 건다.
- Watch 탭에서 내가 원하는 변수를 설정한다. (Scope 탭에서 전체를 볼 수 있으나 복잡함)
- 아래 화살표를 한번씩 누를 때마다 나타나는 변화를 본다.
- 진행됨에 따라 단계별로 코딩되는 화면을 확인한다.
디버그를 끌 때는
- 파란색 부분 클릭
- 재생 버튼
그러면 회색 화면이 사라지고 정상적으로 다음과 같은 화면이 출력된다.
'JavaScript' 카테고리의 다른 글
| 0030. JavaScript 공부하기5 - 모듈(Module), 라이브러리(Library), jQuery (2) | 2024.01.03 |
|---|---|
| 0029. JavaScript 공부하기4 - 함수(Function), 배열(Array), 객체(Object) (1) | 2024.01.03 |
| 0027. JavaScript 공부하기2 - 연산자, 부정, 부등호, 조건문, Boolean (Feat. 잘못된 코딩 공부순서) (1) | 2024.01.02 |
| 0026. JavaScript 공부하기 1 - 크롬 개발자 도구, 콘솔, 숫자와 문자, 변수 (Feat. 생활코딩) (2) | 2024.01.02 |
| 0026. Front-end 공부하기17 - Project 실습(2), 코드 에러잡기 전쟁 (0) | 2024.01.02 |
