본문 바로가기
  • 코딩, 허쌤이 떠먹여 줄게
FrontEnd/Javascript

9. 배열

by 허쌤 2026. 1. 9.

9장. 배열 (Array)

배열이란?

배열(Array)은 여러 값을 순서대로 저장하는 자료구조입니다. 각 값은 인덱스(index)로 접근할 수 있으며, 인덱스는 0부터 시작합니다.

배열의 특징

  • 여러 값을 하나의 변수에 저장
  • 순서가 있음 (인덱스로 접근)
  • 다양한 타입의 값을 저장 가능
  • 동적으로 크기 변경 가능

1. 배열 생성

방법 1: 배열 리터럴 (권장)

let fruits = ['사과', '바나나', '포도'];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, 'hello', true, null];

방법 2: Array 생성자

let fruits = new Array('사과', '바나나', '포도');
let numbers = new Array(5);  // 길이가 5인 빈 배열

빈 배열 생성

let empty1 = [];
let empty2 = new Array();

2. 배열 요소 접근

인덱스로 접근

let fruits = ['사과', '바나나', '포도'];

console.log(fruits[0]);  // '사과' (첫 번째 요소)
console.log(fruits[1]);  // '바나나' (두 번째 요소)
console.log(fruits[2]);  // '포도' (세 번째 요소)

요소 수정

let fruits = ['사과', '바나나', '포도'];
fruits[1] = '오렌지';
console.log(fruits);  // ['사과', '오렌지', '포도']

배열 길이

let fruits = ['사과', '바나나', '포도'];
console.log(fruits.length);  // 3

3. 배열 메서드

요소 추가/제거

push() - 끝에 추가

let fruits = ['사과', '바나나'];
fruits.push('포도');
console.log(fruits);  // ['사과', '바나나', '포도']

pop() - 끝에서 제거

let fruits = ['사과', '바나나', '포도'];
let last = fruits.pop();
console.log(last);     // '포도'
console.log(fruits);   // ['사과', '바나나']

unshift() - 앞에 추가

let fruits = ['바나나', '포도'];
fruits.unshift('사과');
console.log(fruits);  // ['사과', '바나나', '포도']

shift() - 앞에서 제거

let fruits = ['사과', '바나나', '포도'];
let first = fruits.shift();
console.log(first);    // '사과'
console.log(fruits);   // ['바나나', '포도']

배열 탐색

indexOf() - 인덱스 찾기

let fruits = ['사과', '바나나', '포도'];
console.log(fruits.indexOf('바나나'));  // 1
console.log(fruits.indexOf('오렌지'));  // -1 (없음)

includes() - 포함 여부 확인

let fruits = ['사과', '바나나', '포도'];
console.log(fruits.includes('바나나'));  // true
console.log(fruits.includes('오렌지'));  // false

배열 변환

join() - 문자열로 변환

let fruits = ['사과', '바나나', '포도'];
console.log(fruits.join(', '));  // "사과, 바나나, 포도"
console.log(fruits.join('-'));   // "사과-바나나-포도"

split() - 문자열을 배열로 변환

let str = '사과,바나나,포도';
let fruits = str.split(',');
console.log(fruits);  // ['사과', '바나나', '포도']

배열 복사 및 결합

slice() - 배열 일부 복사

let fruits = ['사과', '바나나', '포도', '오렌지'];
let sliced = fruits.slice(1, 3);
console.log(sliced);  // ['바나나', '포도']
console.log(fruits);  // 원본 배열은 변경 안 됨

concat() - 배열 결합

let fruits1 = ['사과', '바나나'];
let fruits2 = ['포도', '오렌지'];
let all = fruits1.concat(fruits2);
console.log(all);  // ['사과', '바나나', '포도', '오렌지']

배열 순회

forEach() - 각 요소에 함수 실행

let fruits = ['사과', '바나나', '포도'];

fruits.forEach(function(fruit) {
    console.log(fruit);
});

// 화살표 함수
fruits.forEach(fruit => console.log(fruit));

배열 변환

map() - 각 요소를 변환하여 새 배열 생성

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

// 화살표 함수
let squared = numbers.map(x => x * x);
console.log(squared);  // [1, 4, 9, 16, 25]

filter() - 조건에 맞는 요소만 필터링

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evens = numbers.filter(function(num) {
    return num % 2 === 0;
});
console.log(evens);  // [2, 4, 6, 8, 10]

// 화살표 함수
let odds = numbers.filter(x => x % 2 === 1);
console.log(odds);  // [1, 3, 5, 7, 9]

reduce() - 배열을 하나의 값으로 축약

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, num) {
    return acc + num;
}, 0);
console.log(sum);  // 15

// 화살표 함수
let product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product);  // 120

4. 배열 순회 방법

for 문

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);
}

forEach() 메서드

let fruits = ['사과', '바나나', '포도'];

fruits.forEach(function(fruit, index) {
    console.log(index, fruit);
});

5. 다차원 배열

배열 안에 배열을 넣을 수 있습니다.

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[0][0]);  // 1
console.log(matrix[1][2]);  // 6

// 순회
for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        console.log(matrix[i][j]);
    }
}

6. 실전 예제

예제 1: 배열 합계 및 평균

let scores = [85, 90, 78, 92, 88];
let sum = 0;

for (let score of scores) {
    sum += score;
}

let average = sum / scores.length;
console.log(`합계: ${sum}, 평균: ${average}`);

예제 2: 최대값/최소값 찾기

let numbers = [5, 12, 8, 130, 44];

let max = Math.max(...numbers);  // 전개 연산자 사용
let min = Math.min(...numbers);

console.log(`최대값: ${max}, 최소값: ${min}`);

예제 3: 배열 필터링

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 짝수만 필터링
let evens = numbers.filter(x => x % 2 === 0);
console.log(evens);  // [2, 4, 6, 8, 10]

// 5보다 큰 수만 필터링
let large = numbers.filter(x => x > 5);
console.log(large);  // [6, 7, 8, 9, 10]

예제 4: 배열 변환

let names = ['홍길동', '김철수', '이영희'];

// 이름 앞에 "안녕하세요, " 추가
let greetings = names.map(name => `안녕하세요, ${name}님!`);
console.log(greetings);
// ["안녕하세요, 홍길동님!", "안녕하세요, 김철수님!", "안녕하세요, 이영희님!"]

7. 배열과 전개 연산자 (Spread Operator) - ES6+

배열 복사

let fruits = ['사과', '바나나', '포도'];
let copy = [...fruits];
console.log(copy);  // ['사과', '바나나', '포도']

배열 결합

let fruits1 = ['사과', '바나나'];
let fruits2 = ['포도', '오렌지'];
let all = [...fruits1, ...fruits2];
console.log(all);  // ['사과', '바나나', '포도', '오렌지']

함수 인수로 전달

let numbers = [1, 2, 3];
console.log(Math.max(...numbers));  // 3

주의사항

1. 배열과 객체의 차이

let arr = [1, 2, 3];
console.log(typeof arr);  // "object"

// 배열 확인
console.log(Array.isArray(arr));  // true

2. 배열 길이 변경

let arr = [1, 2, 3];
arr.length = 5;
console.log(arr);  // [1, 2, 3, empty × 2]

arr.length = 2;
console.log(arr);  // [1, 2]

3. 참조 복사

let arr1 = [1, 2, 3];
let arr2 = arr1;  // 참조 복사
arr2.push(4);
console.log(arr1);  // [1, 2, 3, 4] (원본도 변경됨!)

// 복사본 만들기
let arr3 = [...arr1];  // 또는 arr1.slice()

연습 문제

  1. 배열 생성 및 출력

    • 과일 이름 5개를 배열에 저장하고 모두 출력하세요.
  2. 배열 합계

    • 숫자 배열 [10, 20, 30, 40, 50]의 합계를 계산하세요.
  3. 배열 필터링

    • 1부터 20까지의 숫자 중 짝수만 배열에 저장하세요.
  4. 배열 변환

    • 이름 배열 ['홍길동', '김철수', '이영희']를 "안녕하세요, [이름]님!" 형식으로 변환하세요.
  5. 최대값 찾기

    • 배열 [5, 12, 8, 130, 44]에서 최대값을 찾는 프로그램을 작성하세요.

다음 장 예고

다음 장에서는 객체(Object)에 대해 학습합니다.

'FrontEnd > Javascript' 카테고리의 다른 글

11장. DOM 조작  (0) 2026.01.10
10. 객체  (0) 2026.01.09
8장. 함수  (0) 2026.01.08
7장. 반복문  (0) 2026.01.07
6장. 조건문  (0) 2026.01.06