🚀 JavaScript 배열(Array) 완벽 정리

**배열(Array)**은 JavaScript에서 여러 개의 값을 하나의 변수에 저장할 수 있는 자료구조입니다.
JavaScript의 배열은 동적 크기(dynamic size) 를 가지며, 다양한 데이터 타입을 저장할 수 있습니다.

 

✅ 1. 배열 선언 및 초기화

📌 배열 선언 방법

// 방법 1: 대괄호([])를 사용한 배열 선언(가장 많이 사용)
let arr1 = [1, 2, 3, 4, 5];

// 방법 2: Array() 생성자 사용
let arr2 = new Array(1, 2,3, 4, 5);

// 방법 3: 빈 배열 선언 후 값 추가
let arr3 = [];
arr3[0] = 1;
arr3[1] = 2;

📌 배열 요소(Elements) 접근

console.log(arr1[0]); // 1
console.log(arr1[1]); // 2
console.log(arr1[2]); // 3

 

 

 

✅ 2. 배열의 주요 메서드(Method)

🛠 1) 배열 요소 추가 & 제거

메서드	설명	예제
push()	배열 끝에 요소 추가	arr.push(6);
pop()	배열 끝 요소 제거	arr.pop();
unshift()	배열 앞에 요소 추가	arr.unshift(0);
shift()	배열 앞 요소 제거	arr.shift();

let arr = [1, 2, 3];

// push() -> 마지막 요소에 추가
arr.push(4); // [1, 2, 3, 4];

// pop() -> 마지막 요소 제거
arr.pop(); // [1, 2, 3];

// unshift() -> 앞에 요소 추가
arr.unshift(0); // [0, 1, 2, 3];

// shift() -> 앞 요소 제거
arr.shift(); // [1, 2, 3];

 

🛠 2) 배열 순회(반복문)

✅ for 문

let arr = ["apple", "banana", "cherry"];

for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

✅ forEach() (배열의 각 요소에 대해 함수 실행).

arr.forEach( (fruit, index) => {
	console.log(`${index}: ${fruit}`);
});

✅ map() (새로운 배열 반환)

let upperCaseFruits = arr.map(fruit => fruit.toUpperCase());
console.log(upperCaseFruits); // ['APPLE', 'BANANA', 'CHERRY']

✅ for...of (ES6)

for (let fruit of arr) {
	console.log(fruit);
}

 

 

🛠 3) 배열 검색

메서드	설명	예제
indexOf()	특정 요소의 인덱스 반환 (없으면 -1)	arr.indexOf(2);
includes()	특정 요소 존재 여부 확인 (true/false)	arr.includes(3);
find()	조건을 만족하는 첫 번째 요소 반환	arr.find(x => x > 2);
findIndex()	조건을 만족하는 첫 번째 요소의 인덱스 반환	arr.findIndex(x => x > 2);

let numbers = [10, 20, 30, 40];

console.log(numbers.indexOf(20)); // 1
console.log(numbers.includes(30)); // true
console.log(numbers.find(num => num > 25)); // 30
console.log(numbers.findIndex(num => num > 25)); // 2

 

 

🛠 4) 배열 정렬 & 변형

메서드	설명	예제
sort()	배열 정렬 (기본: 문자열 정렬)	arr.sort();
reverse()	배열 순서 뒤집기	arr.reverse();
filter()	특정 조건을 만족하는 요소 필터링	arr.filter(x => x > 2);
reduce()	배열 요소를 하나의 값으로 축소	arr.reduce((acc, val) => acc + val, 0);

let arr = [5, 2, 9, 1, 4];

arr.sort(); // [1, 2, 4, 5, 9] (숫자 정렬 주의)
arr.sort((a, b) => a - b); // 올바른 숫자 정렬 방식

let filteredArr = arr.filter(num => num > 3); // [5, 4]
let sum = arr.reduce((acc, num) => acc + num, 0); // 21

 

 

 

✅ 3. 배열의 깊은 복사 & 얕은 복사

⚠ 배열을 직접 할당하면 참조(얕은 복사)

let arr1 = [1, 2, 3];
let arr2 = arr; // 같은 배열을 참조

arr2.push(4); //arr1에도 영향을 미침
console.log(arr1); // [1, 2, 3, 4];

✅ 배열을 깊은 복사하는 방법

// 1. Spread 연산자 (...)
let arrCopy = [...arr1];

// 2. slice()
let arrCopy2 = arr1.clice();

// 3. JSON 방식 (단, 객체 포함시 주의)
let arrCopy3 = JSON.parse(JSON.stringify(arr1));

 

 

 

✅ 4. 다차원 배열 (2D 배열)

let matrix = [
	[1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6

 

 

 

✅ 5. 배열과 객체의 차이

	배열(Array)	객체(Object)
키(key)	0부터 시작하는 숫자 인덱스	임의의 문자열 키 사용
구조	값이 순서대로 저장됨	값이 key-value 형태로 저장됨
메서드	push(), map(), filter() 등 배열 전용 메서드 사용 가능	배열 메서드 사용 불가
예제	[1, 2, 3]	{ name: "John", age: 25 }

 

 

 

✅ 6. 배열을 객체처럼 활용 (키-값 형태)

let arr = [];
arr["name"] = "John";
arr["age"] = 30;

console.log(arr.name); // "John"
console.log(arr.age); // 30

하지만 이런 방식은 추천되지 않으며, 일반적으로 객체를 사용하는 것이 좋습니다.

 

 

 

🎯 정리

✔ 배열은 순서가 있는 값들의 집합
✔ push(), pop(), shift(), unshift() 등으로 요소 추가/제거 가능
✔ forEach(), map(), filter(), reduce() 등 강력한 배열 메서드 제공
✔ 배열을 직접 할당하면 참조(얕은 복사), 깊은 복사가 필요할 때는 Spread 연산자 사용
✔ 배열과 객체는 역할이 다르며, 순서가 중요하면 배열을 사용

🚀 배열을 능숙하게 다룰 줄 알면 JavaScript 실력이 확 올라갑니다! 🔥