[JavaScript] 배열 내장 메서드

splice를 이용한 요소 추가, 제거, 교체

arr.splice(start, deleteCount, ...items)

• start: 조작을 시작할 인덱스
• deleteCount: 제거할 요소의 수(0이면 제거 없이 추가만 수행)
• items: 추가할 요소들

요소 제거

const sentence = ["I", "love", "JavaScript", "very", "much"];
// 인덱스 1에서부터 1개 요소("love") 제거
sentence.splice(1, 1);
console.log(sentence);  // ["I", "JavaScript", "very", "much"]

요소 추가

const names = ["Alice", "Bob"];
// 인덱스 1에서 0개 요소 제거하고 "Charlie", "Dave"를 추가
names.splice(1, 0, "Charlie", "Dave");
console.log(names);  // ["Alice", "Charlie", "Dave", "Bob"]

// 음수 인덱스도 사용 가능 (배열 끝에서부터 계산)
names.splice(-1, 0, "Eve");
console.log(names);  // ["Alice", "Charlie", "Dave", "Eve", "Bob"]

// 인덱스 1에서 1개 요소 제거하고 "Lee"를 추가
names.splice(1, 1, "Lee");
console.log(names);  // ["Alice", "Lee", "Dave", "Eve", "Bob"]

slice를 이용한 배열 복사

slice는 지정한 인덱스 범위의 요소를 복사한 새로운 배열을 반환합니다.

arr.slice([start], [end])

• start : 시작 인덱스(음수 사용 가능 : 배열 뒤에서 계산)
• end : 종료 인덱스 (미포함, 생략 시 끝까지)

const letters = ["A", "B", "C", "D", "E"];
const subArray = letters.slice(1, 4); // 인덱스 1부터 3까지 복사
console.log(subArray); // ["B", "C", "D"]

// 음수 인덱스 사용
console.log(letters.slice(-3)); // ["C", "D", "E"]

concat을 이용한 배열 합치기

기존 배열과 하나 이상의 배열 또는 단순 값을 합쳐 새로운 배열을 반환합니다.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2, 5);
console.log(combined); // [1, 2, 3, 4, 5]

// 배열과 유사 배열 객체는 분해되지 않고 그대로 복사됩니다.
// Symbol.isConcatSpreadable 프로퍼티가 true이면 배열처럼 분해되어 복사됩니다.
const arrayLike = { 0: "X", 1: "Y", length: 2 };
console.log(arr1.concat(arrayLike)); // [1, 2, {0:"X",1:"Y",length:2}]

forEach를 이용한 배열 순회

배열의 각 요소에 대해 callback 함수를 실행합니다. 단순 반복 작업에 사용됩니다.ㅡ

const tasks = ["Email", "Meeting", "Coding"];
tasks.forEach((task, index, array) => {
  console.log(`Task ${index + 1}: ${task}`);
});
/*
출력:
Task 1: Email
Task 2: Meeting
Task 3: Coding
*/

배열 탐색 메서드

indexOf(item, from)

지정 위치부터 원하는 요소를 찾아 인덱스를 반환하며, 없으면 -1을 반환합니다.

lastIndexof(item, from)

배열 끝에서부터 검색하여 해당 요소의 인덱스를 반환합니다.

includes(item, from)

요소의 존재 여부를 Boolean 값으로 반환합니다.

const nums = [1, 0, false];
console.log( nums.indexOf(0) );      // 1
console.log( nums.lastIndexOf(false) );  // 2
console.log( nums.includes(1) );     // true

배열 탐색 메서드들은 엄격한 동등 비교(===)를 사용합니다.

find(fn)

주어진 조건을 만족하는 첫 번째 요소를 반환합니다. 조건에 맞는 요소가 없으면 undefined을 반환합니다.

findIndex(fn)

조건에 맞는 첫 번째 요소의 인덱스를 반환하며, 조건에 맞는 요소가 없으면 -1을 반환합니다.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

const target = users.find(user => user.id === 2);
console.log(target.name); // "Bob"

const targetIndex = users.findIndex(user => user.name.startsWith("C"));
console.log(targetIndex); // 2

filter(fn)

조건을 만족하는 모든 요소를 담은 배열을 반환합니다.

const mixedNumbers = [10, 15, 20, 25, 30];
const evenNumbers = mixedNumbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [10, 20, 30]

map을 이용한 배열 변형

map(fn)은 배열의 각 요소에 callback 함수를 적용한 결과를 모아 새로운 배열로 반환합니다.

const names = ["Sam", "Alex", "Jordan"];
const nameLengths = names.map(name => name.length);
console.log(nameLengths); // [3, 4, 6]

배열 정렬

sort(fn)

배열의 요소를 재정렬하며, 기본적으로 문자열로 변환하여 사전식 순서로 정렬합니다.

const numbers = [10, 2, 30, 25];
numbers.sort(); 
console.log(numbers); // [10, 2, 25, 30] → 문자형 정렬 결과

// 숫자 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // [2, 10, 25, 30]

const countries = ["Österreich", "Andorra", "Vietnam"];
// 기본 비교: 유니코드 코드 순으로 정렬됨
console.log(countries.sort()); 
// localeCompare를 사용한 정렬 (ECMA-402 국제화)
console.log(countries.sort((a, b) => a.localeCompare(b)));

reverse()

배열의 요소 순서를 역순으로 변경합니다.

const letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

문자열을 배열로 배열을 문자열로

split(delimiter, [limit])

문자열을 delimiter를 기준으로 분리하여 배열로 반환합니다.

const recipients = "Alice;Bob;Charlie;David";
const recipientsArr = recipients.split(";", 3);
console.log(recipientsArr); // ["Alice", "Bob", "Charlie"]

join(separator)

배열의 모든 요소를 separator로 연결하여 하나의 문자열로 반환합니다.

const fruits = ["Apple", "Banana", "Cherry"];
const fruitList = fruits.join(" | ");
console.log(fruitList); // "Apple | Banana | Cherry"

누산 하기

reduce(callback[, initialValue])

배열의 각 요소를 순회하며 callback 함수를 적용하여 단일 값을 반환합니다. callback 함수는 accumulator(누적값), currentValue(현재 요소), currentIndex(현재 인덱스), array(배열 자체)를 인수로 받습니다.

const expenses = [100, 200, 50, 25];
const totalExpense = expenses.reduce((total, expense) => total + expense, 0);
console.log(totalExpense); // 375

reduceRigth(callback[, initialValue])

배열의 오른쪽부터 누산을 시작합니다.

const words = ["world", "beautiful", "Hello"];
// 단순 문자열 연결(왼쪽에서 오른쪽으로 하면 "Hello beautiful world")
const sentence = words.reduceRight((acc, word) => acc + " " + word);
console.log(sentence.trim()); // "Hello beautiful world"

Array.isArray(value)

주어진 값이 배열인지 여부를 Boolean으로 반환합니다.

console.log(Array.isArray({})); // false
console.log(Array.isArray([])); // true

some(fn) / every(fn)

배열의 일부 요소 또는 모든 요소가 특정 조건을 만족하는지 검사합니다.

const ages = [18, 20, 15, 25];
console.log(ages.some(age => age < 18)); // true (하나라도 미성년자가 있음)
console.log(ages.every(age => age >= 15)); // true

fill(value, start, end)

배열의 지정 범위를 특정 값으로 채웁니다. start, end 생략 시 전체 배열을 채웁니다.

let arr = new Array(5);
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]