JavaScript Array Methods
JavaScript Array Methods: 배열 조작의 이해와 활용
JavaScript의 **배열(Array)**은 데이터를 관리하고 조작하는 데 매우 유용한 데이터 구조입니다. 배열은 다양한 내장 메서드를 제공하여 요소 추가, 삭제, 검색, 정렬 등을 손쉽게 수행할 수 있습니다. 이 가이드는 JavaScript 배열 메서드의 종류와 사용법을 자세히 설명합니다.
1. 배열 메서드 개요
JavaScript 배열 메서드는 배열의 내용을 수정하고, 새로운 배열을 생성하며, 배열 요소에 대한 다양한 작업을 수행하는 데 사용됩니다. 대부분의 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.
2. 주요 배열 메서드
2.1. 배열 생성 및 초기화
- 배열 리터럴
const fruits = ["apple", "banana", "cherry"];
Array생성자
const emptyArray = new Array(); // 빈 배열
const numbersArray = new Array(5); // 길이가 5인 배열 (비어 있음)
2.2. 배열 추가 및 삭제
push(): 배열의 끝에 요소를 추가합니다.
fruits.push("orange");
console.log(fruits); // 출력: ["apple", "banana", "cherry", "orange"]
pop(): 배열의 마지막 요소를 제거하고 반환합니다.
const lastFruit = fruits.pop();
console.log(lastFruit); // 출력: orange
console.log(fruits); // 출력: ["apple", "banana", "cherry"]
unshift(): 배열의 시작 부분에 요소를 추가합니다.
fruits.unshift("mango");
console.log(fruits); // 출력: ["mango", "apple", "banana", "cherry"]
shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.
const firstFruit = fruits.shift();
console.log(firstFruit); // 출력: mango
console.log(fruits); // 출력: ["apple", "banana", "cherry"]
splice(): 배열의 특정 위치에서 요소를 추가하거나 제거합니다.
fruits.splice(1, 1, "kiwi"); // 인덱스 1에서 1개 요소 제거하고 "kiwi" 추가
console.log(fruits); // 출력: ["apple", "kiwi", "cherry"]
2.3. 배열 탐색 및 변경
forEach(): 배열의 각 요소에 대해 제공된 함수를 실행합니다.
fruits.forEach((fruit) => {
console.log(fruit);
});
// 출력:
// apple
// kiwi
// cherry
map(): 배열의 각 요소에 대해 함수를 실행하고, 그 결과로 새로운 배열을 반환합니다.
const lengths = fruits.map(fruit => fruit.length);
console.log(lengths); // 출력: [5, 4, 6]
filter(): 조건에 맞는 요소들로 구성된 새로운 배열을 반환합니다.
const longFruits = fruits.filter(fruit => fruit.length > 4);
console.log(longFruits); // 출력: ["apple", "cherry"]
find(): 조건을 만족하는 첫 번째 요소를 반환합니다.
const foundFruit = fruits.find(fruit => fruit.startsWith("c"));
console.log(foundFruit); // 출력: cherry
2.4. 배열 정렬 및 순서 변경
sort(): 배열을 정렬합니다. 기본적으로 문자열로 정렬되므로, 숫자 정렬 시 주의가 필요합니다.
const numbers = [3, 1, 4, 2];
numbers.sort();
console.log(numbers); // 출력: [1, 2, 3, 4]
numbers.sort((a, b) => a - b); // 숫자 정렬
console.log(numbers); // 출력: [1, 2, 3, 4]
reverse(): 배열의 순서를 뒤집습니다.
fruits.reverse();
console.log(fruits); // 출력: ["cherry", "kiwi", "apple"]
2.5. 배열 변환 및 결합
join(): 배열의 모든 요소를 문자열로 결합합니다.
const fruitString = fruits.join(", ");
console.log(fruitString); // 출력: "cherry, kiwi, apple"
concat(): 두 개 이상의 배열을 병합합니다.
const tropicalFruits = ["pineapple", "mango"];
const allFruits = fruits.concat(tropicalFruits);
console.log(allFruits); // 출력: ["cherry", "kiwi", "apple", "pineapple", "mango"]
- 스프레드 연산자를 사용하여 배열을 병합할 수도 있습니다.
const combinedFruits = [...fruits, ...tropicalFruits];
console.log(combinedFruits); // 출력: ["cherry", "kiwi", "apple", "pineapple", "mango"]
2.6. 배열 복사
slice(): 배열의 일부분을 추출하여 새로운 배열을 반환합니다.
const citrus = fruits.slice(1, 3); // 인덱스 1부터 3 미만의 요소를 포함
console.log(citrus); // 출력: ["kiwi", "apple"]
- 얕은 복사:
slice()를 사용하여 배열을 복사할 수 있습니다.
const newFruits = fruits.slice(); // 얕은 복사
console.log(newFruits); // 출력: ["cherry", "kiwi", "apple"]
3. 배열의 특징
- 동적 크기: 배열은 고정된 크기를 가지지 않으며, 요소를 추가하거나 제거할 수 있습니다.
- 혼합 데이터 타입: 배열은 서로 다른 데이터 타입을 포함할 수 있습니다.
const mixedArray = [1, "two", { key: "value" }, [1, 2, 3]];
console.log(mixedArray); // 출력: [1, "two", { key: "value" }, [1, 2, 3]]
4. 배열 관련 주의사항
- 배열 요소의 인덱스: 배열의 인덱스는 0부터 시작하므로, 첫 번째 요소는
array[0]으로 접근해야 합니다. - 길이 변경: 배열의
length속성을 변경하면 배열의 요소가 제거되거나 추가될 수 있습니다.
const array = [1, 2, 3];
array.length = 2; // 요소가 잘려나감
console.log(array); // 출력: [1, 2]
5. 요약
- 배열: JavaScript에서 여러 값을 저장할 수 있는 동적 데이터 구조입니다.
- 메서드: 다양한 내장 메서드(
push(),pop(),map(),filter(),join(),sort()등)를 제공하여 배열을 쉽게 조작할 수 있습니다. - 특징: 배열은 동적 크기를 가지며, 서로 다른 데이터 타입을 포함할 수 있습니다.
JavaScript의 배열을 효과적으로 이해하고 활용하면, 데이터 관리를 더욱 효율적으로 할 수 있습니다. 다양한 배열 메서드를 실습해보며, 배열의 힘을 경험해 보세요!