배열

배열

배열은 여러 값을 순서대로 저장하는 객체입니다. JavaScript 배열은 다양한 타입의 요소를 함께 저장할 수 있습니다.

배열 생성

// 배열 리터럴
const fruits = ["사과", "바나나", "오렌지"];

// 빈 배열 생성 후 요소 추가
const vegetables = [];
vegetables.push("당근");
vegetables.push("감자");
vegetables.push("양파");

// Array 생성자
const numbers = new Array(1, 2, 3, 4, 5);

// 지정된 길이의 빈 배열 생성
const emptyArray = new Array(5); // 길이가 5인 빈 배열
console.log(emptyArray.length); // 5

// Array.from() - 유사 배열 객체나 이터러블에서 배열 생성
const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
const converted = Array.from(arrayLike);
console.log(converted); // ["a", "b", "c"]

// 매핑 함수 적용
const mapped = Array.from([1, 2, 3], x => x * 2);
console.log(mapped); // [2, 4, 6]

// Array.of() - 인자들로 배열 생성
const mixedArray = Array.of(1, "two", true, { four: 4 });
console.log(mixedArray); // [1, "two", true, { four: 4 }]

배열 요소 접근 및 수정

const colors = ["빨강", "파랑", "녹색", "노랑"];

// 인덱스로 접근 (0부터 시작)
console.log(colors[0]); // "빨강"
console.log(colors[2]); // "녹색"

// 마지막 요소 접근
console.log(colors[colors.length - 1]); // "노랑"

// 요소 수정
colors[1] = "하늘색";
console.log(colors); // ["빨강", "하늘색", "녹색", "노랑"]

// 존재하지 않는 인덱스에 할당
colors[4] = "보라색";
console.log(colors); // ["빨강", "하늘색", "녹색", "노랑", "보라색"]

// 요소 확인
console.log(colors.includes("녹색")); // true
console.log(colors.indexOf("보라색")); // 4
console.log(colors.indexOf("검은색")); // -1 (없음)

배열 주요 메서드

배열 끝에서 조작

const stack = ["a", "b", "c"];

// push() - 배열 끝에 요소 추가
stack.push("d");
console.log(stack); // ["a", "b", "c", "d"]

// pop() - 배열 끝에서 요소 제거 및 반환
const lastItem = stack.pop();
console.log(lastItem); // "d"
console.log(stack); // ["a", "b", "c"]

배열 앞에서 조작

const queue = ["a", "b", "c"];

// unshift() - 배열 앞에 요소 추가
queue.unshift("z");
console.log(queue); // ["z", "a", "b", "c"]

// shift() - 배열 앞에서 요소 제거 및 반환
const firstItem = queue.shift();
console.log(firstItem); // "z"
console.log(queue); // ["a", "b", "c"]

배열 요소 추가/제거/교체

const letters = ["a", "b", "c", "d", "e"];

// splice() - 배열 중간에 요소 추가/제거/교체
// splice(시작 인덱스, 삭제할 개수, 추가할 요소들...)

// 요소 제거
const removed = letters.splice(2, 2); // 인덱스 2부터 2개 요소 제거
console.log(removed); // ["c", "d"]
console.log(letters); // ["a", "b", "e"]

// 요소 추가
letters.splice(1, 0, "x", "y"); // 인덱스 1에 요소 추가 (삭제 없음)
console.log(letters); // ["a", "x", "y", "b", "e"]

// 요소 교체
letters.splice(3, 1, "z"); // 인덱스 3의 요소를 "z"로 교체
console.log(letters); // ["a", "x", "y", "z", "e"]

배열 일부분 가져오기

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// slice() - 배열의 일부를 새 배열로 반환
// slice(시작 인덱스, 끝 인덱스) - 끝 인덱스는 포함하지 않음

const slice1 = numbers.slice(3, 7);
console.log(slice1); // [3, 4, 5, 6]

// 끝 인덱스 생략 시 배열 끝까지
const slice2 = numbers.slice(7);
console.log(slice2); // [7, 8, 9]

// 음수 인덱스는 배열 끝에서부터 계산
const slice3 = numbers.slice(-3);
console.log(slice3); // [7, 8, 9]

// 배열 복사
const copy = numbers.slice();
console.log(copy); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

배열 합치기

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

// concat() - 배열 합치기
const combined = arr1.concat(arr2, arr3);
console.log(combined); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 전개 연산자 사용 (ES6)
const spreadCombined = [...arr1, ...arr2, ...arr3];
console.log(spreadCombined); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

배열 검색 및 필터링

const users = [
  { id: 1, name: "홍길동", age: 25 },
  { id: 2, name: "김철수", age: 30 },
  { id: 3, name: "이영희", age: 22 },
  { id: 4, name: "박지민", age: 25 }
];

// find() - 조건을 만족하는 첫 요소 반환
const user25 = users.find(user => user.age === 25);
console.log(user25); // { id: 1, name: "홍길동", age: 25 }

// findIndex() - 조건을 만족하는 첫 요소의 인덱스 반환
const index = users.findIndex(user => user.name === "이영희");
console.log(index); // 2

// filter() - 조건을 만족하는 모든 요소 배열 반환
const youngUsers = users.filter(user => user.age < 30);
console.log(youngUsers); // [{ id: 1, name: "홍길동", age: 25 }, { id: 3, name: "이영희", age: 22 }, { id: 4, name: "박지민", age: 25 }]

// some() - 하나라도 조건을 만족하는지 확인
const hasOldUser = users.some(user => user.age > 29);
console.log(hasOldUser); // true

// every() - 모두 조건을 만족하는지 확인
const allYoung = users.every(user => user.age < 40);
console.log(allYoung); // true