Javascript 4일차 array / for in / break / continue

2025. 12. 22. 19:23ㆍ대우개발원 수업 내용/Javascript

반응형

개념 내용 요약

더보기

9.5 반복문 다루기

반복문은 동일한 코드를 여러 번 실행해야 할 때 사용하는 핵심 제어 구조이다.
이번 절에서는 for문과 배열, for…in문, break문, continue문의 동작 원리와 주의사항을 정리한다.

5. for 문과 배열

개념

  • 배열과 같은 자료형은 반복 횟수의 기준으로 사용할 수 있다.
  • 배열의 길이(length)를 활용하면 배열의 모든 요소를 순차적으로 처리할 수 있다.

기본 형식

for (초기식; 조건식; 증감식) {
  실행문;
}

배열과 for문 예제

let fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

실행 흐름

  1. i = 0으로 초기화
  2. i < fruits.length 조건 검사
  3. 조건이 참이면 배열 요소 출력
  4. i++ 증가
  5. 조건이 거짓이 될 때까지 반복

특징

  • 배열의 순서가 보장된다.
  • 인덱스를 직접 제어할 수 있어 가장 안정적인 방식이다.

6. for...in 문

형식

for (가변수 in 배열 또는 객체) {
  실행문;
}

1) 객체 리터럴 반복

특징

  • 객체를 반복할 경우 가변수에는 객체의 키(key) 가 할당된다.
  • 키를 이용해 값(value)에 접근할 수 있다.

예제

let person = {
  name: "Kim",
  age: 20,
  job: "student"
};

for (let key in person) {
  console.log(key, person[key]);
}

출력 결과

name Kim
age 20
job student

2) 배열 반복 시 주의점

문제점

  • for...in은 배열의 순서대로 접근하는 것을 보장하지 않는다.
  • 배열에 사용자 정의 속성이 추가될 경우 예기치 않은 결과가 발생할 수 있다.

예제 (권장되지 않음)

let arr = [10, 20, 30];

for (let i in arr) {
  console.log(arr[i]);
}

결론

  • 배열 반복에는 for문 또는 for...of문 사용을 권장
  • for...in은 객체 전용 반복문으로 사용하는 것이 안전하다.

7. break 문

개념

  • 반복문의 종료 조건을 만족하지 않아도 인위적으로 반복문을 즉시 종료할 때 사용한다.

예제

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

출력 결과

1
2
3
4

특징

  • break를 만나면 가장 안쪽 반복문 하나만 종료
  • 반복문 전체를 빠져나온다.

8. continue 문

개념

  • 현재 반복을 건너뛰고 다음 반복으로 이동할 때 사용한다.
  • 반복문 자체는 종료되지 않는다.

예제

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i);
}

출력 결과

1
2
4
5

특징

  • continue 이후의 코드는 실행되지 않음
  • 다음 반복 조건 검사로 바로 이동

break 문과 continue 문 비교

구분breakcontinue

동작 반복문 즉시 종료 현재 반복만 건너뜀
반복문 상태 완전히 종료 다음 반복 계속
영향 범위 가장 안쪽 반복문 하나 현재 반복 코드만 중단

정리

  • for문 + 배열 : 순서 보장, 가장 안정적인 반복 방식
  • for...in
    • 객체 반복에 적합
    • 배열 반복에는 주의 필요
  • break : 반복문 자체를 종료
  • continue : 현재 반복만 건너뛰고 다음 반복 진행

이 네 가지 개념은 반복문 제어의 핵심 요소이며, 조건 처리와 흐름 제어를 명확하게 만들기 위해 반드시 숙지해야 한다.

 

 

 

 

※ 해당 예제는 로컬 환경(localhost)에서 실행한 결과입니다. 실행 코드는 아래를 참고해주세요.

array 변수 사용

loop.js

더보기 
let arr = ["banana", "apple", "orange"];
for(let i =0; i < 3; i++){
    console.log(arr[i]);
}

실행결과

banana
apple
orange

arr.length사용

loop.js

더보기 
let arr = ["banana", "apple", "orange", "melon"];
for(let i =0; i < arr.length; i++){
    console.log(arr[i]);
}

실행결과

banana
apple
orange
melon
let arr = ["banana", "apple", "orange"];
for(let i =0; i < arr.length; i++){
    console.log(arr[i]);
}
banana
apple
orange

index함수 사용

for in 사용

loop.js

더보기 
let arr = ["banana", "apple", "orange"];
for(let i =0; i < arr.length; i++){
    console.log(arr[i]);
}
for(let index in arr){
    console.log(index + ": " + arr[index]);
}

let obj = {name: "철수", age: "20"};
for (let key in obj){
    console.log(key + ": " + obj[key]);
}

실행결과

banana
apple
orange
0: banana
1: apple
2: orange
name: 철수
age: 20

break문 사용

loop.js

더보기 
for(let i = 0; i < 10; i++){
    console.log(i)
    if(i === 5) break;
}

실행결과

0
1
2
3
4
5
let obj = {name: "철수", age: "20"};
for (let key in obj){
    if(key === "age") break;
    console.log(key + ": " + obj[key]);
}

실행결과

name: 철수

while, break 사용

breakEX.html

더보기

http://localhost:52330/js4/ breakEX.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>break 문</title>
</head>
<body>
    <h3>1에서 얼마까지 더해야 3000을 넘는가?</h3>
    <script>
        var i=0, sum=0;
        while(true) { //무한반복
        sum += i;
        if(sum > 3000)
            break; // 합이 3000보다 큼. 반복문 벗어남
        i++;
        console.log(i);
        }
    </script>
</body>
</html>

 

continue사용 , 짝수만 출력

loop.js

더보기 
for(let i = 1; i <= 10; i++){
    if(i % 2 === 1) continue;
    console.log(i);
}

실행결과

2
4
6
8
104의 배수일까 아닐까

4의 배수 찾기mutiple.html

더보기

http://localhost:52330/js4/mutiple.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>4의 배수일까 아닐까</h1>
    <script>16
        var n = prompt("숫자를 입력하시오");
        if (n  !== null) {
            if (n % 4 === 0) 
                document.write(`${n}는 4의 배수입니다.`)
            else {
                document.write(`${n}는 4의 배수가 아닙니다.`)
                }
            } else {
                alert("입력이 취소됐습니다.")
            
        }
    </script>
</body>

</html>

multiple3.html

3의 배수와 배수 개수 구하기

더보기

http://localhost:52330/js4/multiple3.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            font-size: 1.2em;
            text-align: center;
        }
        p {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>3의 배수 찾기</h1>
    <script>
        var i;
        var n = prompt("몇 까지 3의 배수를 찾을까요?");
        var count =0;

        if (n  !== null) {
            for(i = 1; i <= n; i++) {
                if(i % 3 === 0) {
                count++;
            document.write(i+" ");
            }          
            }
                        document.write("<p>" + `${n}까지 3의 배수의 개수 : ${count}` + "</p>") 
         }
          else {
                alert("입력이 취소됐습니다.")
            }
    </script>
</body>

</html>

 

'대우개발원 수업 내용 > Javascript' 카테고리의 다른 글

Javascript 6일차 함수 return문 / 스코프 / 호이스팅  (1) 2025.12.24
Javascript 5일차 함수(function)  (0) 2025.12.23
Javascript 3일차 조건문 연습 / 반복문  (1) 2025.12.19
javascript 2일차 조건문 if / else / switch  (0) 2025.12.18
Javascript 1일차 코드 작성 및 실행 방법 / 변수 / 상수  (1) 2025.12.17

관련글

티스토리툴바