자바스크립트 기본 - 반복문
반복문 - https://opentutorials.org/course/743/4728
반복문 - 반복적인 작업(loop, iterate), 컴퓨터에게 반복적인 작업을 지시하는 방법이다.
반복문에는 while, for 가 있다.
반복문이 없다면? - 어떤 작업 코드가 짧은 테스트 코드일 경우 복사하여 사용할 수 있지만 코드가 만번, 혹은 그 이상 반복되어야 할 때 는 복사 작업이 힘들뿐 아니라 실수할 가능성이 많아 진다.
a. while
while의 문법
while(조건 boolean데이터타입){ //조건이 true면 중괄호 실행, false가 될때까지 실행한다.
반복해서 실행할 코드
}
while의 조건이 true일 경우 코드가 무한루프로 실행되기 때문에 적절한 시기에 false 조건으로 바뀌도록 해야한다.
예제
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
var i = 0; //반복문이 언제까지 실행될 것이냐에 대한 기준점
while( i < 10 ) { //true인경우 중괄호를 실행하고 false인 경우 중괄호를 실행하지 않는다.
i = i + 1;
document.write("hello " + i + "<br>");
}
/*
var i = 0; (초기화)
i < 10 (반복조건)
i = i + 1; (반복실행)
위의 세가지 구성요소는 항상 필요한데 구성요소들이 한덩이가 아닌 세 구역에 나눠져 있다.
만약 코드가 길어진다면 구성요소를 찾기 힘들며 실수할 가능성이 늘어나기 때문에 while문을 선호하지는 않는다.
*/
</script>
</body>
</html>
예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.
경고창 답
hello 1
hello 2
hello 3
hello 4
hello 5
hello 6
hello 7
hello 8
hello 9
hello 10
b. for
for의 문법
for (초기화; 반복조건; 반복실행){ //조건이 true면 중괄호 실행, false가 될때까지 실행한다.
반복해서 실행할 코드
}
for는 초기화, 반복조건, 반복실행 세가지 구성요소들이 한덩이에 있다.
for문에서 중요한 점은 반복실행을 적고나서 마지막에 ;(세미콜론)을 적으면 안된다.
while보다 무조건 좋은 것은 아니지만 대부분의 반복문에서는 for문을 사용한다.
예제2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
for (var i = 0; i < 10; i++){ //처음조건인 초기화는 처음 한번만 실행된다. 중괄호가 실행되면 초기화가 아닌 반복조건으로 간다.
// i++는 실행 후 그 다음조건(다음코드)에서 1이 증가하고
// ++i 는 실행 할때 1이 증가한다.
// 변수는 iterate의 약자인 i를 사용하나 다른 문자를 사용해도 무관하다. i를 사용하는 것은 그냥 관습적인 것이다.
document.write("hello " + i + "<br>");
}
</script>
</body>
</html>
예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.
경고창 답
hello 0
hello 1
hello 2
hello 3
hello 4
hello 5
hello 6
hello 7
hello 8
hello 9
c. 반복문의 제어
- break
반복작업을 중간에 중단하려고 할 때 사용하는 것.
예제3
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
for(var i = 0; i < 10; i++){
if(i === 5) { // i의 값이 5가 되면 중괄호 안의 break가 실행되면서 if문 밖에 있는 for문을 빠져나가게 된다.
break;
}
document.write('coding everybody'+i+'<br />');
}
</script>
</body>
</html>
예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.
경고창 답
coding everybody0
coding everybody1
coding everybody2
coding everybody3
coding everybody4
- continue
반복작업을 특정한 순간에만 중단하고 그 이후에는 반복작업이 계속 진행되고 싶게 할 때 사용하는 것.
예제4
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
for(var i = 0; i < 10; i++){
if(i === 5) { // i의 값이 5가 되면 중괄호 안의 continue가 실행되며 if문 밖으로 나가서 그 다음 구문을 실행하는 것이 아니라 반복문의 i++인 반복실행이 실행된다.
continue;
}
document.write('coding everybody'+i+'<br />');
}
</script>
</body>
</html>
예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.
경고창 답
coding everybody0
coding everybody1
coding everybody2
coding everybody3
coding everybody4
coding everybody6
coding everybody7
coding everybody8
coding everybody9
d. 반복문의 중첩
변수 i, j를 사용하여 반복문으로 00, 01, 02, ~ 99 까지 페이지에 나타내보자.
예제5
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
for(var i = 0; i < 10; i++){
for(var j = 0; j < 10; j++){
document.write('coding everybody'+i+j+'<br />');
// i, j는 숫자데이터형식이기 때문에 i+j를 하면 원하는 값이 나오지 않는다고 생각하지만 앞,뒤에 있는 ' '사이의 문자열들과 결합하면 i,j는 문자데이터형식으로 변하기 때문에 문제 없다.
}
}
</script>
</body>
</html>
예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.
경고창 답
coding everybody00
coding everybody01
coding everybody02
coding everybody03
coding everybody04
....
coding everybody99
예제5의 코드 실행과정은 개발자도구에서 디버거를 통해 확인 할 수 있다.
