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

배열이 뭔가요?

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

// 변수는 값 하나만
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]);
}

다음 단계

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

반복문은 처음엔 헷갈리지만, 연습하면 금방 익숙해져요. 직접 타이핑해보면서 익히세요!

---

JavaScript 독학 가이드 시리즈:

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

← 블로그 목록으로