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 조건문과 형태가 비슷하지만 문장을 한 번만 실행하고 끝내는 것이 아니라 

      불 표현식이 ture이면 계속해서 문장을 실행한다는 점이 다르다.
🐰  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

+ Recent posts

티스토리툴바