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()
연습 문제
배열 생성 및 출력
- 과일 이름 5개를 배열에 저장하고 모두 출력하세요.
배열 합계
- 숫자 배열
[10, 20, 30, 40, 50]의 합계를 계산하세요.
- 숫자 배열
배열 필터링
- 1부터 20까지의 숫자 중 짝수만 배열에 저장하세요.
배열 변환
- 이름 배열
['홍길동', '김철수', '이영희']를 "안녕하세요, [이름]님!" 형식으로 변환하세요.
- 이름 배열
최대값 찾기
- 배열
[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 |