| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- reCAPTCHA
- shorturl
- programmers
- TIP
- Mac
- Linux
- dbeaver
- maria db
- windows
- spring
- Tomcat
- Java
- STS
- devlog
- javascript
- SQL
- 정보처리기사
- urlshortner
- html
- svn
- Oracle
- Eclipse
- my sql
- IntelliJ
- js
- mybatis
- SQL Server
- mysql
- node.js
- jquery
- Today
- Total
고양의 성장일기
[Javascript] Javascript에서 반복문 사용하기 본문
Javascript에서 반복문 사용하기
자바스크립트에서도 코드 반복을 위한 반복문을 작성할 수 있습니다.
자바와 마찬가지로 do-while문, while문, for문 세 종류를 사용할 수 있습니다.
do-while
do-while문은 while의 조건이 true인 경우 do 블록 안의 코드를 반복합니다.
주로 조건의 true, false 여부와 상관없이 코드를 최소 한 번은 실행시키기 위해 사용합니다.
아래 코드는 i가 0보다 클 동안 i의 값을 알림 창으로 띄워주는 코드입니다.
let i = 10;
do {
alert(i);
i--
} while (i);
while
while문은 조건이 먼저 명시되고 실행코드가 나중에 나타나게 됩니다.
조건이 true인 한 코드를 반복하게 됩니다.
아래 코드의 경우는 1부터 10까지 alert를 이용해 알려주는 코드입니다. 알림 지옥
let i = 1;
while (i<=10) {
alert(i);
i++;
}
보통 일정 조건 아래 무한히 루프를 반복하고 싶을 때 while문을 아래와 같은 방식으로 응용해서 만들곤 합니다.
while(true){
//code
//code...
if(!condition) break;
}
for
for문도 자바와 같은 구조를 띄고 있습니다.
아래 코드는 배열을 선언하고 배열의 첫 번째 자리부터 숫자 1씩을 할당하는 코드입니다.
배열의 첫 번째 자리의 인덱스는 0인데 i가 1로 시작하기 때문에 배열의 인덱스값은 i - 1로 구성해줘야 합니다.
let array = new Array();
for (let i = 1; i<=5; i++){
array[i-1] = i;
}
for 문의 경우 시작값을 인라인으로 선언하지 않고 for문 블록 바깥에서 선언된 값을 이용해서 설정할 수도 있습니다.
let array = new Array();
array = [1,2,3,4,5];
let i = array.length;
for (i; i <= 10; i++) {
alert(i);
}
for문의 조건 중 구성요소를 생략할 수 있는데 다음과 같이 사용할 수 있습니다.
let i = 0;
for ( ; i < 5; i++) {
alert(i);
}
//이미 변수가 선언되어 있고 값이 할당되어 있으면
시작값을 생략할 수 있습니다.
for ( ; i < 10 ;) {
alert(i++);
}
//증감식도 생략할 수 있습니다.
let i = 0;
let sum;
for (; i <= 10 ; ) {
sum += Math.pow(2, i);
}
//10의0승부터 10의 10승까지의 합을 구해봅시다.
자바스크립트의 모든 반복문도 break와 condition을 이용해 반복 자체를 제어할 수 있습니다.
반복되는 코드블록 내부에 if조건을 이용해 (?를 사용하는 삼항 연산자는 사용할 수 없습니다.)
해당 코드를 멈추고 빠져나갈지 한 단계를 건너뛸지 또는 계속해서 이어갈지 선택할 수 있습니다.
좀 더 특별한 for
자바와 마찬가지로 for문을 이용해 2중으로 루프를 구성하거나 무한루프를 구성할 수도 있습니다.
let i = 1;
outer:
for(; ;) {
i++;
for(let j = 1; j < 10; j++ ) {
let keepRun = prompt(`what is (${i} x ${j})?`,'');
if (!keepRun == i*j) break outer;
}
}
alert('wrong answer');
2중 for문으로 n9단을 만들어서 prompt를 이용해 매번 답을 묻고 사용자가 입력한 답이 틀리면 n9단이 끝나는 구조를 구성해 봤습니다.
바깥 for문에 outer라는 라벨을 붙여 안쪽 for문에서 바깥 for문까지 멈출 수 있는 제동장치를 만들었습니다.
도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻
감사합니다.🙂
'🖥️ Front-End > Javascript' 카테고리의 다른 글
| [Javascript] 디스트럭처링 문법(Destructuring Assignment) 파헤치기 (0) | 2024.08.13 |
|---|---|
| [Javascript] 숫자 단위에 맞춰 쉼표, 서수 표현, 단위 이니셜 추가하기 (0) | 2023.10.12 |
| [Javascript] HTML 문서에 Javascript 삽입하기 (0) | 2023.10.12 |
| [Javascript] Javascript에서 데이터 형식 변환하기 (0) | 2023.10.12 |
| [Javascript] 실시간으로 두 개의 input 요소의 값 비교해서 이벤트 발생시키기 (0) | 2023.10.12 |