JavaScript 제어문은 조건에 따라 로직을 실행(조건문)하거나 반복실행(반복문)할 때 사용한다. JavaScript의 반복문은 while문과 for문이 있다. 반복문의 경우에는 로직을 적게 작성하고 많은 일을 할 수 있게 하지만, 로직을 잘못 설계한 경우 무한루프 가능성이 있다.
while
- while(조건문){
조건이 참인 동안에 반복할 로직
};
while에 작성된 조건문이 참일 동안에 로직을 반복하고, 거짓일 경우 로직을 빠져나와 아래 로직을 시행시킨다. 무한반복의 경우 while(true){로직};으로 가능하다.
do ~ while
- do{
조건이 참인 동안에 반복할 로직
} while(조건문);
while의 경우에는 작성된 조건문이 참일 동안에만 로직을 시행하지만, do~while을 사용할 경우 맨 처음에 조건문의 참, 거짓의 여부와 상관 없이 반드시 한번은 로직이 실행된다. 한 번 시행한 후에는 조건문이 참이면 거짓이 되기 전까지 로직을 반복한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 0;
while(a<5){
console.log(`a는 ${a}입니다`);
a++;
}
let b = 0;
do{
console.log(`b는 ${b}입니다`);
b++;
}while(b>=1 && b<5);
</script>
</body>
</html>
do ~ while문의 경우에는 b가 1이상이 아니었음에도 로직이 시행된 모습을 볼 수 있다.
for
- for(초기값; 비교식; 증감연산){
조건이 참일 시 반복할 로직
}
while에서는 증감연산의 위치에 따라 예측하기 어려운 결과가 나오는 경우가 있다. for문의 경우에는 초기값, 비교식, 증감연산을 한 번에 작성하여 이러한 단점을 개선할 수 있다. 무한반복의 경우 for( ; ; ){}; 로 가능하다. for문을 여러개 작성하는 다중for문이 있기도 하고, for..in문, for..of문, for..each문이 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 3;
for (let i = 0; i <= a; i++) {
for (let j = 0; j <= a; j++) {
console.log(`i는 ${i}, j는 ${j}입니다.`);
}
}
</script>
</body>
</html>
특수커맨드
로직 플로우를 강제로 틀어야할 때 사용하는 것으로, continue와 break문이 있다.
continue
- continue;
while, do-while, for 등에서 로직을 스킵하고 다시 반복문의 처음으로 돌아가 로직을 시행한다. continue를 사용할 때는 continue 밑에 증감연산을 넣으면 무한루프가 되니 주의해야 한다.
break
- break;
break문은 반복문, switch문 등과 결합한 문장을 빠져나올 때 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 5;
for(let i=0; i<a; i++){
console.log(`i는 ${i}입니다.`);
if(i==3)continue;
}
for(let j=0; j<a; j++){
console.log(`j는 ${j}입니다.`);
if(j==2)break;
}
</script>
</body>
</html>
label
break나 continue 구문과 함께 사용한다. 반복문에 label을 작성하고, break나 continue 구문을 사용해 반복문의 어느 위치에서 작업을 멈추고 어느 위치에서 다시 수행할지를 설정할 수 있다. 그러나 label을 사용하게 되면 추적이 어려워진다는 단점이 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 5;
loop1:
for(let i=0; i<a; i++){
loop2:
for(let j=0; j<a; j++){
if(j==3){
continue loop1;
}
console.log(`i는 ${i}, j는 ${j}`);
}
}
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript의 기초 문법 : 배열 (0) | 2024.07.23 |
|---|---|
| JavaScript의 기초 문법 : 객체 (0) | 2024.07.22 |
| JavaScript : 호이스팅이 무엇인가 ? (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 함수 (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 제어문 - 조건문 (if / switch-case) (0) | 2024.07.18 |
| JavaScript의 기초 문법 : 연산자 (0) | 2024.07.16 |
| JavaScript에서 사용자의 입력을 받아보자 (0) | 2024.07.15 |
| JavaScript의 템플릿 리터럴이란? (0) | 2024.07.15 |