자바스크립트의 배열

2025-04-03 TIL-자바스크립트의 배열

자바스크립트의 배열

자바스크립트의 배열(Array)은 순서가 있는 리스트형 객체로, 여러 값을 하나의 자료구조에 저장할 수 있다.

배열은 인덱스(index)를 사용하여 요소(element)에 접근하며, 0부터 시작하는 0-based-index 구조를 가진다.

배열 선언

배열의 선언은 간단하며, 다양한 데이터 타입을 함께 저장할 수 있다.

const array = [1, "apple", true, { key: "value" }];

• 이 배열은 숫자, 문자열, 불리언, 객체 등 다양한 타입을 저장할 수 있으며, 배열의 첫 번째 요소는 array[0]으로, 두 번째 요소는 array[1]과 같이 접근할 수 있다.

동적 배열

자바스크립트 배열의 중요한 특징 중 하나는 동적 배열이라는 점이다.

이는 배열의 크기를 미리 지정하지 않아도 되고, 요소를 추가할 때마다 배열의 크기가 자동으로 조정된다.

const arr = [1, 2, 3];
arr.push(4); // 배열의 끝에 요소 추가
console.log(arr); // [1, 2, 3, 4]

또한, 배열의 특정 인덱스에 값을 할당하면 배열이 자동으로 확장된다.

arr[5] = 6;
console.log(arr); // [1, 2, 3, undefined, undefined, 6]
console.log(arr.length); // 6

배열의 주요 속성 length

자바스크립트 배열의 length 속성은 배열의 크기를 나타내며, 배열에 요소가 추가되거나 제거될 때 동적으로 변경된다.

배열의 주요 메서드

1. 요소 추가 및 삭제

메서드	설명	반환값
push()	배열 끝에 요소 추가	새로운 길이
pop()	배열 끝 요소 제거	제거된 요소
unshift()	배열 앞에 요소 추가	새로운 길이
shift()	배열 앞 요소 제거	제거된 요소

const numbers = [1, 2, 3];

numbers.push(4); // [1, 2, 3, 4]
numbers.pop(); // [1, 2, 3]

numbers.unshift(0); // [0, 1, 2, 3]
numbers.shift(); // [1, 2, 3]

2. 요소 찾기 및 검색

메서드	설명	반환값
indexOf(value)	해당 요소의 첫 번째 인덱스 반환 (없으면 -1)	숫자
includes(value)	요소 존재 여부 확인	true / false
find(callback)	조건을 만족하는 첫 번째 요소 반환	요소 값
findIndex(callback)	조건을 만족하는 첫 번째 요소의 인덱스 반환	숫자

const animals = ["dog", "cat", "rabbit"];

console.log(animals.indexOf("cat")); // 1
console.log(animals.includes("rabbit")); // true

const numbers = [10, 20, 30, 40];
console.log(numbers.find((n) => n > 25)); // 30
console.log(numbers.findIndex((n) => n > 25)); // 2

3. 배열 변형 (변경 o)

메서드	설명
splice(start, deleteCount, ...items)	요소 추가, 삭제, 교체
reverse()	배열 순서 반전
sort(compareFunction)	배열 정렬

const arr = [1, 2, 3, 4, 5];

arr.splice(2, 1); // [1, 2, 4, 5] (3 제거)
arr.reverse(); // [5, 4, 2, 1]
arr.sort((a, b) => b - a); // [5, 4, 2, 1] (내림차순 정렬)

4. 배열 변형 (변경 x, 새로운 배열 반환)

메서드	설명
slice(start, end)	부분 배열 반환
concat(arr)	배열 합치기
map(callback)	각 요소를 변형한 새 배열 반환
filter(callback)	조건을 만족하는 요소만 새 배열 반환

const nums = [1, 2, 3, 4, 5];

console.log(nums.slice(1, 4)); // [2, 3, 4]
console.log(nums.concat([6, 7])); // [1, 2, 3, 4, 5, 6, 7]

console.log(nums.map((n) => n * 2)); // [2, 4, 6, 8, 10]
console.log(nums.filter((n) => n % 2 === 0)); // [2, 4]

배열 반복문

1. forEach()

각 요소를 반복 실행 (반환값 x)

const names = ["Alice", "Bob", "Charlie"];

names.forEach((name) => console.log(name));
// Alice
// Bob
// Charlie

2. map()

각 요소를 변형한 새 배열 반환

const squared = [1, 2, 3].map((n) => n * n);
console.log(squared); // [1, 4, 9]

3. filter()

조건을 만족하는 요소만 반환

const evens = [1, 2, 3, 4].filter((n) => n % 2 === 0);
console.log(evens); // [2, 4]

4. reduce()

배열을 하나의 값으로 축약

const sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10