목록에서 2, 3을 반복해서 쓰고 싶다.
이럴 경우 단순히 복사해서 붙여넣기를 할 수도 있지만
그 반복의 횟수가 100000단위를 넘어서도 복붙을 할것인가?
반복문을 써서 더 쉽게 쓰는 법을 알아보자!
1. while
//주로 변수를 정의하는 자리
while(조건문 - 주로 변수의 범위이다){
반복해서 실행할 코드 - 변수가 늘어나는 규칙을 포함한다
}
<body>
<h1>Loop</h1>
<ul>
<script>
document.write('<li>1</li>');
var i = 0;
while(i < 3){
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1;
}
document.write('<li>4</li>');
</script>
</ul>
</body>while뒤에 오는 괄호안의 조건에 대해 boolean값이 오게 되고
그 값이 true면 코드를 반복실행하다가 false가 되면 반복을 멈춘다.
while반복문은 사용하기 쉽지만, 변수와 관련된 자리에 다른 여러 가지 코드들이 개입될 수 있다는 단점도 있다.
①. <li>태그에서 JavaScript를 작동시키기 위해
<script>태그의 document.write 다음에 오는 괄호 안에 작성한다.
document.write는 따옴표 안의 문자를 그대로 출력해준다.
②. 반복해서 쓰고 싶은 부분 앞에서 변수명을 지정한다.
왜냐면 반복할 횟수의 범위를 지정해줘야 하기 때문이다.
여기서는 var i로 지정하였다.
그리고 반복문으로 묶인 첫번째 자리 값부터 반복시킬거니까
var i = 0;
③. 반복문을 종료하는 범위를 지정할 수 있도록
반복하고 싶은 횟수 (예제는 3으로 지정)를 while 옆 괄호안에 다음과 같이 입력한다
: while(i < 3)
④. 그 옆에는 반복하고 싶은 부분의 코드를 중괄호 {}안에 쓴다.
그리고 중괄호를 닫기 직전에
반복문 실행을 반복할 때마다 달라지는 변수값의 규칙을 써준다.
여기서는 i = i + 1;로 지정하였다.
⑤. while의 괄호 안에는 지정한 규칙에 따라 boolean값이 오며
그 값이 범위 내의 값이면 true로 인식되어 중괄호의 코드를 반복해서 실행하고
범위를 넘기게 되면 false로 인식되어 멈추게 된다.
2. do ~while
do문을 먼저 반복해서 실행하고 while문 옆에 써져있는 범위에 다다르면
비로소 while문이 마지막에 실행된다.
var happy = 1;
do {
console.log(happy + "개의 행복");
++happy;
} while(happy<5) {
console.log("완전 행복");
}
// 1개의 행복 2개의 행복 3개의 행복 4개의 행복 완전 행복반복문 조건에 들어가는 변수는
반복문 바깥쪽에서 선언해줘야 한다.
안에 작성했더니 1개의 행복이 무한 반복되어 나옴..........
그도 그럴 것이 함수 맨 위에서 다시 1로 정의가 되니까....
3. for문
형태: for (초기값; 비교식; 증감식) {반복할 코드}
괄호안에 들어가는 값들은 반복할 횟수를 지정하는 데에 쓰인다.
꼭 for 옆의 괄호 안에 써주지 않더라도 대체할 수 있는 코드를 바깥에 써준다면
반드시 초기값, 비교식, 증감식을 괄호 안에 써주지 않아도 된다. (옵션임)
-초기값: 보통 변수를 지정하게 되며 한 번만 실행
-비교식: 두 번째의 비교 표현식의 평가 결과가 true인 동안 {}안의 코드가 반복되어 실행
-증감식: 코드가 한 번 반복될 때마다 실행
var totalOdd = 0;
var totalEven = 0;
for (var n = 1; n <= 25 ;n++) {
var oddNum = 2*n-1;
var evenNum = 2*n;
console.log(oddNum, evenNum);
totalEven += evenNum;
totalOdd += oddNum;
if (n === 25) {
console.log(totalOdd, totalEven);
}
}결과값 ↓
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 20
21 22
23 24
25 26
27 28
29 30
31 32
33 34
35 36
37 38
39 40
41 42
43 44
45 46
47 48
49 50
625 650
복합대입연산자는 변수를 지정하는 var와는 함께 쓰일 수 없다...
이미 만들어져 있는 변수에만 쓸 수 있다. 조심하자
4. continue
-반복문의 처음으로 분기
-for, for~in, while, do~while에서 사용한다.
for (k = 1; k < 5; k++) {
if ( k === 2 || k === 3) { // 2.k가 2가 되어서 continue를 만나면 k++로 바로 올라가서 k=3이 된다.
continue;
};
console.log(k);
}
// 1, 4
출처
- https://opentutorials.org/course/3085/18881
- https://opentutorials.org/course/3085/18825
- https://opentutorials.org/course/3085/18827
- https://opentutorials.org/course/3085/18828
'JavaScript' 카테고리의 다른 글
| [JavaScript] 새로운 요소를 생성하고 텍스트 삽입하기 (0) | 2021.06.03 |
|---|---|
| [JavaScript] 예외 발생시키기 - try / throw / catch / finally (1) | 2021.03.24 |
| [JavaScript] 조건문 (Conditional statements) (0) | 2021.03.24 |
| [JavaScript] 연산자 (operator) (0) | 2021.03.23 |
| [JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - to do list만들기 / 20.06.08 (0) | 2020.06.08 |