JavaScript Arrays
JavaScript Arrays: 배열의 이해와 활용
JavaScript에서 **배열(Array)**은 여러 값을 순서대로 저장할 수 있는 데이터 구조입니다. 배열은 동일한 타입 또는 서로 다른 타입의 데이터를 포함할 수 있으며, 동적 크기를 지원하여 데이터의 추가 및 삭제가 용이합니다. 이 가이드는 JavaScript 배열의 개념, 메서드 및 활용 방법을 자세히 설명합니다.
1. 배열의 기본 개념
1.1. 배열 정의
배열은 대괄호([])를 사용하여 정의되며, 각 요소는 쉼표로 구분됩니다.
const fruits = ["apple", "banana", "cherry"];
1.2. 배열의 특징
- 순서: 배열의 요소는 인덱스를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다.
- 동적 크기: 배열의 크기는 고정되지 않으며, 필요에 따라 요소를 추가하거나 제거할 수 있습니다.
- 다양한 데이터 타입: 배열은 숫자, 문자열, 객체, 다른 배열 등 다양한 데이터 타입을 포함할 수 있습니다.
2. 배열 생성
2.1. 배열 리터럴
배열은 대괄호를 사용하여 직접 정의할 수 있습니다.
const numbers = [1, 2, 3, 4, 5];
2.2. Array 생성자
Array 생성자를 사용하여 배열을 생성할 수도 있습니다.
const emptyArray = new Array(); // 빈 배열
const numbersArray = new Array(5); // 길이가 5인 배열 (비어 있음)
2.3. 초기화
배열을 정의하면서 초기 값을 지정할 수 있습니다.
const colors = ["red", "green", "blue"];
3. 배열 메서드
JavaScript 배열은 다양한 메서드를 제공하여 배열을 조작하고 처리할 수 있습니다.
3.1. 배열 접근
- 인덱스를 통한 접근: 배열의 특정 요소에 접근할 수 있습니다.
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // 출력: apple
console.log(fruits[1]); // 출력: banana
3.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"]
3.3. 배열 변경
splice(): 배열의 특정 위치에서 요소를 추가하거나 제거합니다.
fruits.splice(1, 1, "kiwi"); // 인덱스 1에서 1개 요소 제거하고 "kiwi" 추가
console.log(fruits); // 출력: ["apple", "kiwi", "cherry"]
slice(): 배열의 일부분을 추출하여 새로운 배열을 반환합니다.
const citrus = fruits.slice(1, 3); // 인덱스 1부터 3 미만의 요소를 포함
console.log(citrus); // 출력: ["kiwi", "cherry"]
3.4. 배열 탐색
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
3.5. 배열 정렬
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"]
3.6. 배열 변환
join(): 배열의 모든 요소를 문자열로 결합합니다.
const fruitString = fruits.join(", ");
console.log(fruitString); // 출력: "cherry, kiwi, apple"
4. 배열 복사 및 병합
4.1. 배열 복사
- *
slice()*를 사용하여 배열을 복사할 수 있습니다.
const newFruits = fruits.slice(); // 얕은 복사
console.log(newFruits); // 출력: ["cherry", "kiwi", "apple"]
4.2. 배열 병합
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"]
5. 배열의 특징
- 동적 크기: 배열은 고정된 크기를 가지지 않으며, 요소를 추가하거나 제거할 수 있습니다.
- 혼합 데이터 타입: 배열은 서로 다른 데이터 타입을 포함할 수 있습니다.
const mixedArray = [1, "two", { key: "value" }, [1, 2, 3]];
console.log(mixedArray); // 출력: [1, "two", { key: "value" }, [1, 2, 3]]
6. 요약
- 배열: JavaScript에서 여러 값을 저장할 수 있는 동적 데이터 구조입니다.
- 메서드: 다양한 내장 메서드(
push(),pop(),map(),filter(),join(),sort()등)를 제공하여 배열을 쉽게 조작할 수 있습니다. - 특징: 배열은 동적 크기를 가지며, 서로 다른 데이터 타입을 포함할 수 있습니다.
JavaScript의 배열을 효과적으로 이해하고 활용하면, 데이터 관리를 더욱 효율적으로 할 수 있습니다. 다양한 배열 메서드를 실습해보며, 배열의 힘을 경험해 보세요!