배열(Array) 은 여러 개의 데이터를 순서대로 저장할 수 있는 자료형입니다. JavaScript에서는 객체(Object)의 한 종류이지만, 특별히 순서(index) 와 길이(length) 를 관리하는 기능이 내장되어 있어 데이터를 다루는 데 매우 많이 사용됩니다.
1. 배열 생성 방법
배열 리터럴
let fruits = ["사과", "바나나", "포도"];
Array 생성자
let numbers = new Array(1, 2, 3);
let emptyArray = new Array(5); // 길이 5인 빈 배열
2. 배열 요소 접근
- 인덱스(index)는 0부터 시작
- 배열[인덱스] 로 접근
let fruits = ["사과", "바나나", "포도"];
console.log(fruits[0]); // 사과
console.log(fruits[2]); // 포도
3. 배열 속성
- length: 배열의 길이(요소 개수)
let arr = [1, 2, 3];
console.log(arr.length); // 3
4. 배열 기본 메서드
요소 추가/삭제
- push(): 배열 끝에 추가
- pop(): 배열 끝에서 제거
- unshift(): 배열 앞에 추가
- shift(): 배열 앞에서 제거
let arr = [1, 2, 3];
arr.push(4); // [1,2,3,4]
arr.pop(); // [1,2,3]
arr.unshift(0); // [0,1,2,3]
arr.shift(); // [1,2,3]
결합과 분할
- concat(): 배열 합치기
- slice(): 배열 잘라내기 (원본 유지)
- splice(): 배열 요소 추가/삭제 (원본 변경)
let arr = [1, 2, 3, 4];
console.log(arr.slice(1, 3)); // [2,3]
arr.splice(1, 2, "a", "b"); // [1,"a","b",4]
탐색
- indexOf(): 해당 값의 인덱스 반환
- includes(): 포함 여부 확인
let fruits = ["사과", "바나나", "포도"];
console.log(fruits.indexOf("바나나")); // 1
console.log(fruits.includes("수박")); // false
5. 고차 함수(Higher-order Functions)
배열은 반복문 없이도 데이터를 다룰 수 있도록 다양한 메서드를 제공합니다.
forEach() – 반복
[1,2,3].forEach(num => console.log(num));
map() – 새로운 배열 반환
let doubled = [1,2,3].map(num => num * 2);
console.log(doubled); // [2,4,6]
filter() – 조건 만족하는 요소만
let even = [1,2,3,4].filter(num => num % 2 === 0);
console.log(even); // [2,4]
reduce() – 누적 계산
let sum = [1,2,3,4].reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10
find() – 조건에 맞는 첫 요소 반환
let result = [5,10,15].find(num => num > 9);
console.log(result); // 10
some() / every()
console.log([1,2,3].some(num => num > 2)); // true
console.log([1,2,3].every(num => num > 0)); // true
6. 다차원 배열
배열 안에 배열을 넣어 2차원 이상의 배열도 만들 수 있습니다.
let matrix = [
[1, 2],
[3, 4],
[5, 6]
];
console.log(matrix[1][1]); // 4
7. 배열과 객체의 차이
- 배열: 순서(index)가 중요할 때 사용
- 객체: 키(key)-값(value) 구조로 관리할 때 사용
let arr = ["홍길동", "이몽룡"];
let obj = { name: "홍길동", age: 20 };
마무리
JavaScript 배열은 데이터 집합을 다루는 가장 기본적인 자료구조로, 단순 저장부터 복잡한 데이터 가공까지 폭넓게 활용됩니다.
- 기본 메서드: push, pop, slice, splice
- 탐색: indexOf, includes
- 고차 함수: map, filter, reduce, forEach
배열 메서드를 잘 활용하면 반복문을 줄이고, 더 간결하고 읽기 쉬운 코드를 작성할 수 있습니다.
'프론트엔드 > JAVASCRIPT' 카테고리의 다른 글
| JavaScript 함수(Function) 정리 (0) | 2025.09.23 |
|---|---|
| JavaScript 반복문 정리 (0) | 2025.09.23 |
| JavaScript 조건문 정리 (0) | 2025.09.23 |
| JavaScript 불리언(Boolean) (0) | 2025.09.23 |
| JavaScript i++ 와 ++i 의 차이 (0) | 2025.09.23 |