1. for 반복문
👩🏻🚀 반복문 : 반복작업을 할 때 사용
자바스크립트 반복문 특징
- while문 자바와 거의 동일
- 삼항 for문 존재
- for in, for of
(1) for 반복문
✏️ 특정 횟수 만큼 반복하고 싶을 때 사용
<!-- 기본 형식 -->
for(초기값, 조건식, 증감식) // 초기값에는 const 대신 let 사용
for (let i = 0; i < 반복 횟수; i++) {
문장
}
<script>
/* for 반복문 기본 */
for (let i = 0; i < 5; i++) { // 0 부터 5미만 까지 반복
console.log(`${i}번째 반복입니다.`);
}
/* 1부터 N까지 더하기 */
let output = 0; // 합계에 사용할 변수. 복합 대입 연산자에 사용해야 되서 반드시 초기화.
for (let i = 1; i <= 100; i++) {
output += i; // 1부터 100까지 더함.
}
//console.log(i); // i is not defined -> 변수i가 효력을 가지는 범위는 for문 안쪽.
console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다.`);
</script>
for 반복문과 배열
📁 배열을 출력할 경우 배열.length 사용
<script>
const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업'];
for (let i = 0; i < todos.length; i++) {
console.log(`${i}번째 할 일: ${todos[i]}`);
}
/* for 반복문으로 배열을 반대로 출력하기 */
/* 2번째 할 일: 필라테스 수업
1번째 할 일: 업무 메일 확인하기
0번째 할 일: 우유 구매 */
for (let i = todos.length-1; i >= 0; i--) {
console.log(`${i}번째 할 일: ${todos[i]}`);
}
for (const i in todos) { // i는 인덱스 번호를 가져옴
const ii = todos.length - i - 1;
console.log(`${ii}번째 할 일: ${todos[ii]}`); // 인덱스번호를 이용해 값에 접근.
}
(2) for 요소 in 반복문
✏️ 인덱스 기반으로 출력 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용
<!-- 기본 형식 -->
for(const 반복변수(인덱스) in 배열 또는 객체) { 문장 }
<script>
const todos = ['우유구매', '업무 메일 확인하기', '필라테스 수업'];
const times = ['8시', '3시', '12시'];
// 배열 출력을 위한 전통적인 방법
for (let i = 0; i < todos.length; i++) {
console.log(`${i}번 째 할 일: ${todos[i]}`);
console.log(typeof i); // number
}
for (const i in todos) {
console.log(`${i}번 째 할 일: ${todos[i]}`); // 인덱스 번호를 이용해 값에 접근.
console.log(i); // 0 1 2
console.log(typeof i); // string -> 인덱스 값이 문자열
}
// 시간과 같이 출력
for (const i in todos) {
console.log(`${i}번 째 할 일: ${times[i]} : ${todos[i]}`);
}
</script>
(3) for of 반복문
✏️ 반복문 내부의 반복변수에 인덱스 대신 요소의 값이 들어감
✏️ 자바의 foreach, 파이썬의 for in과 유사
for(const 반복변수 of 배열 또는 객체) {
문장
}
<script>
const todos = ['우유구매', '업무 메일 확인하기', '필라테스 수업'];
for (const todo of todos) { // todo에 요소의 값이 들어감
console.log(`오늘의 할 일: ${todo}`);
}
</script>
(4) 중첩 for문
✏️ for문 안에 다른 for문을 넣어 사용
✏️ 안쪽 for문을 모두 실행한 후 바깥쪽 for문을 실행
<script>
/* for문으로 5번 반복 */
for (let i = 0; i < 30; i++) {
document.write('*');
}
document.write('<br>');
for (let i = 0; i < 30; i++) {
document.write('*');
}
document.write('<br>');
for (let i = 0; i < 30; i++) {
document.write('*');
}
document.write('<br>');
for (let i = 0; i < 30; i++) {
document.write('*');
}
document.write('<br>');
for (let i = 0; i < 30; i++) {
document.write('*');
}
document.write('<br>');
/* 중첩 for문으로 5번 반복 */
for (let k = 0; k < 5; k++) {
for (let i = 0; i < 30; i++) {
document.write('*');
}
document.write('<br>');
}
</script>
구구단 출력
<head>
<style>
div {
display:inline-block;
padding:0 20px 30px 20px;
margin:15px;
border:1px solid #ccc;
line-height:2;
}
div h3 {
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<h1>구구단</h1>
<script>
for(let i = 2; i <= 9; i++) {
document.write('<div>');
document.write('<h3>' + i + '단</h3>');
for (let j = 2; j <= 9; j++) {
document.write(`${i} X ${j} = ${i * j} <br>`);
}
document.write('</div>');
}
</script>
</body>
2. while 문
🐰 if 조건문과 형태가 비슷하지만 문장을 한 번만 실행하고 끝내는 것이 아니라
불 표현식이 true이면 계속해서 문장을 실행한다는 점이 다르다.
🐰 while 반복문의 경우 조건이 변하지 않는다면 무한히 반복 실행하므로 조건을 거짓으로 만들 수 있는 문장이 있어야 함
🐰 반복문이 무한 반복 되는 것을 무한 루프 infinite loop
<!-- 기본형식 -->
while (불 표현식) {
문장
}
<script>
/* while 반복문 기본 */
let i = 1;
// confirm() : 사용자가 [확인] 버튼을 클릭하면 true 반환. [취소]를 클릭하면 false 반환.
while (confirm('계속 진행하시갰습니까?')) {
alert(`${i}번째 반복입니다.`);
i = i + 1;
}
</script>
while 문으로 배열 출력하기
while 반복문과 for 반복문은 서로 대체해서 사용할 수 있음
보통 특정 횟수 반복할 때 for, 조건에 큰 비중이 있을 때는 while.
예) 특정 시간동안 어떤 데이터를 받을 때 까지
<script>
const array = [1, 2, 3, 4, 5];
for(let i = 0; i < array.length; i++){
console.log(`${i} : ${array[i]}`);
}
// 1. 인덱스 번호가 필요 : 0 ~ 4
// 2. 반복문은 5번 반복
let i = 0;
while(i < array.length) {
console.log(`${i} : ${array[i]}`);
i++;
}
</script>
3. break 문
🐰 switch문이나 반복문을 벗어날 때 사용하는 키워드
while(true) {
if(조건식) {
break;
}
}
<script>
for (let i = 0; true; i++) { // 조건문이 true라서 무한 반복.
alert(i + '번째 반복문입니다.');
// 진행 여부를 물어봄
const isContinue = confirm('계속하시겠습니까?'); // confirm()에서 취소를 누르면 반복을 종료.
if(!isContinue) { // 취소를 누르면 false가 반환이 되므로 not연산자를 사용해서 true로 변경.
break;
}
}
alert('프로그램 종료'); // 프로그램의 종료를 확인.
</script>
4. continue 문
🐰 반복문 안의 반복을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행
<script>
// alert() 명령문 위에 continue 키워드가 있어서 실행되지 않음.
for(let i = 0; i < 5; i++) {
console.log(i);
// 현재 반복 작업을 중지하고 다음 반복 작업을 수행
continue;
alert(i); // 경고창이 출력되지 않음
}
</script>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 함수란, 익명 함수, 선언적 함수, 호이스팅 (0) | 2024.03.28 |
|---|---|
| [JavaScript] 배열(Array)이란, 요소 추가 및 제거 (0) | 2024.03.28 |
| [JavaScript] if 조건문 (if-else & else-if), switch 문 (1) | 2024.03.28 |
| [JavaScript] var 변수, let과 const (1) | 2024.03.27 |
| [JavaScript] 산술연산자, 복합대입연산자, 비교연산자, 논리연산자, 삼항연산자 (1) | 2024.03.27 |