“숫자 1부터 100까지 출력해주세요.” 이걸 console.log(1), console.log(2) 이렇게 100번 쓸 건가요? 당연히 아니죠. 반복문을 쓰면 3줄로 끝납니다. 그리고 여러 개의 데이터를 한 번에 관리하려면 배열을 알아야 해요.

처음 for문 배울 때 i < arr.length 를 i <= arr.length 로 써서 마지막에 undefined 가 계속 나왔어요. 인덱스가 0부터 시작한다는 걸 자꾸 까먹더라고요.

배열이 뭔가요?

배열은 여러 값을 하나의 변수에 담는 상자예요.

// 변수는 값 하나만
let student1 = "철수";
let student2 = "영희";
let student3 = "민수";

// 배열은 여러 값을 한꺼번에
let students = ["철수", "영희", "민수"];

배열 만들기

// 방법 1: 대괄호
let fruits = ["사과", "바나나", "딸기"];

// 방법 2: new Array() (잘 안 씀)
let numbers = new Array(1, 2, 3);

// 빈 배열
let empty = [];

배열 접근하기

배열의 각 값은 인덱스(번호)로 접근합니다. 인덱스는 0부터 시작해요!

let fruits = ["사과", "바나나", "딸기"];

console.log(fruits[0]); // "사과" (첫 번째)
console.log(fruits[1]); // "바나나" (두 번째)
console.log(fruits[2]); // "딸기" (세 번째)

실행 결과:

배열 길이

let fruits = ["사과", "바나나", "딸기"];
console.log(fruits.length); // 3

실행 결과:

length는 배열에 몇 개의 요소가 있는지 알려줘요.

배열 값 변경

let fruits = ["사과", "바나나", "딸기"];
fruits[1] = "포도";
console.log(fruits); // ["사과", "포도", "딸기"]

실행 결과:

배열 메서드

let fruits = ["사과", "바나나"];

// 끝에 추가
fruits.push("딸기");
console.log(fruits); // ["사과", "바나나", "딸기"]

// 끝에서 제거
fruits.pop();
console.log(fruits); // ["사과", "바나나"]

// 맨 앞에 추가
fruits.unshift("포도");
console.log(fruits); // ["포도", "사과", "바나나"]

// 맨 앞에서 제거
fruits.shift();
console.log(fruits); // ["사과", "바나나"]

실행 결과:

for문

같은 코드를 여러 번 실행할 때 씁니다.

기본 형태

for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 출력: 0, 1, 2, 3, 4

실행 결과:

구조:

• let i = 0: 시작값 (초기화)
• i < 5: 조건 (언제까지 반복할지)
• i++: 증가식 (매 반복마다 실행)

배열과 함께 사용

let fruits = ["사과", "바나나", "딸기"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// 출력:
// 사과
// 바나나
// 딸기

실행 결과:

for…of문 (간단한 방법)

배열의 각 요소를 순회할 때 더 간단합니다.

let fruits = ["사과", "바나나", "딸기"];

for (let fruit of fruits) {
    console.log(fruit);
}
// 출력: 사과, 바나나, 딸기

실행 결과:

인덱스가 필요 없을 땐 for...of가 훨씬 깔끔해요.

while문

조건이 true인 동안 계속 반복합니다.

let count = 0;

while (count < 5) {
    console.log(count);
    count++;
}
// 출력: 0, 1, 2, 3, 4

실행 결과:

주의: 조건이 항상 true면 무한 루프에 빠져요!

// 위험! 브라우저 멈춤
while (true) {
    console.log("무한 반복!");
}

do…while문

최소 한 번은 실행하고, 그 다음부터 조건을 체크합니다.

let num = 10;

do {
    console.log(num);
    num++;
} while (num < 5);
// 출력: 10 (조건이 false지만 한 번은 실행됨)

실행 결과:

break와 continue

break - 반복문 종료

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // i가 5가 되면 반복 중단
    }
    console.log(i);
}
// 출력: 0, 1, 2, 3, 4

실행 결과:

continue - 현재 반복 건너뛰기

for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue; // i가 2일 때 건너뜀
    }
    console.log(i);
}
// 출력: 0, 1, 3, 4 (2는 출력 안 됨)

실행 결과:

중첩 반복문

반복문 안에 반복문을 넣을 수 있어요.

// 구구단 2단
for (let i = 1; i <= 9; i++) {
    console.log(`2 x ${i} = ${2 * i}`);
}

// 구구단 전체
for (let i = 2; i <= 9; i++) {
    for (let j = 1; j <= 9; j++) {
        console.log(`${i} x ${j} = ${i * j}`);
    }
}

실행 결과 (구구단 2단):

실전 예제

1. 배열의 합 계산

let numbers = [10, 20, 30, 40, 50];
let sum = 0;

for (let num of numbers) {
    sum += num;
}

console.log(`합계: ${sum}`); // 합계: 150

실행 결과:

2. 짝수만 출력

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        console.log(i);
    }
}
// 출력: 2, 4, 6, 8, 10

실행 결과:

3. 배열에서 특정 값 찾기

let fruits = ["사과", "바나나", "딸기", "포도"];
let target = "딸기";
let found = false;

for (let i = 0; i < fruits.length; i++) {
    if (fruits[i] === target) {
        console.log(`${target}을(를) ${i}번 인덱스에서 찾았습니다!`);
        found = true;
        break;
    }
}

if (!found) {
    console.log("찾지 못했습니다");
}

실행 결과:

4. 역순 출력

let numbers = [1, 2, 3, 4, 5];

for (let i = numbers.length - 1; i >= 0; i--) {
    console.log(numbers[i]);
}
// 출력: 5, 4, 3, 2, 1

실행 결과:

5. 별 찍기

// 직각삼각형
for (let i = 1; i <= 5; i++) {
    let stars = "";
    for (let j = 1; j <= i; j++) {
        stars += "*";
    }
    console.log(stars);
}
// 출력:
// *
// **
// ***
// ****
// *****

실행 결과:

배열의 유용한 메서드

map - 각 요소 변환

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

실행 결과:

filter - 조건에 맞는 요소만

let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

실행 결과:

forEach - 각 요소마다 실행

let fruits = ["사과", "바나나", "딸기"];
fruits.forEach(fruit => console.log(fruit));

실행 결과:

이 메서드들은 나중에 자세히 배울 거예요. 지금은 이런 게 있다는 것만 알아두세요.

자주 하는 실수

1. 인덱스 범위 초과

let arr = [1, 2, 3];
console.log(arr[3]); // undefined (인덱스는 0, 1, 2만 있음)

실행 결과:

2. 무한 루프

let i = 0;
while (i < 10) {
    console.log(i);
    // i++를 깜빡하면 무한 루프!
}

3. for문 조건 실수

let arr = [1, 2, 3];

// 틀림: <= 쓰면 범위 초과
for (let i = 0; i <= arr.length; i++) {
    console.log(arr[i]); // 마지막에 undefined
}

// 맞음: < 사용
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

운영자 실전 노트

실제 프로젝트 진행하며 겪은 문제

• while문에서 증가 조건 누락으로 브라우저가 멈춤 → 디버거 중단점으로 무한 루프 확인, 증가 구문 추가
• 배열 순회 중 break로 빠져나와야 하는데 forEach 사용 → 일반 for문이나 for…of로 변경

이 경험을 통해 알게 된 점

• 무한 루프가 의심되면 브라우저 개발자 도구의 Pause 버튼으로 즉시 중단 가능
• break/continue가 필요하면 forEach 대신 for…of를 사용하거나, 조건부 filter 적용

다음 단계

다음 글에서는 함수와 스코프를 배운다. 코드를 재사용 가능하게 만들고, 변수의 유효 범위를 이해하는 방법을 알아볼 예정이다.

요즘은 인덱스가 필요 없으면 for…of를 주로 사용한다. forEach도 좋지만 break가 안 되어서 중간에 멈춰야 하면 일반 for문을 써야 한다. 상황에 맞게 선택하는 것이 중요하다.

---

JavaScript 독학 가이드 시리즈:

• 이전: JavaScript 독학 가이드 - 연산자와 조건문
• 다음: JavaScript 독학 가이드 - 함수와 스코프

← 블로그 목록으로