프론트엔드/JAVASCRIPT

JavaScript 배열(Array) 정리

CYANREDSKY 2025. 9. 23. 07:30

배열(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