[JS] 자바스크립트 배열 메서드 조작, 탐색 변형까지

프론트엔드 실무를 하다 보면 가장 많이 다루게 되는 자료 구조 중 하나가 바로 배열(Array) 입니다. 오늘은 배열을 다룰 때 사용하는 핵심 메서드들을 요소 조작 / 순회 & 탐색 / 배열 변형으로 나누어 하나씩 살펴보겠습니다.

1. 요소 조작 메서드 (Element Manipulation)

✅ push(): 배열 끝에 요소 추가

let arr1 = [1, 2, 3];
arr1.push(4, 5, 6);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

const newLength = arr1.push(7, 8);
console.log(newLength); // 8

실무 Tip: 서버에서 페이지네이션으로 데이터 일부를 받아올 때 기존 배열에 추가하는 데 자주 사용됩니다.

---

✅ pop(): 배열 끝 요소 제거

let arr2 = [1, 2, 3];
const poppedItem = arr2.pop();

console.log(arr2); // [1, 2]
console.log(poppedItem); // 3

실무 Tip: 최근 작업 항목을 제거하거나 ‘뒤로 가기’ 기능 구현 시 활용됩니다.

---

✅ shift(): 배열 앞 요소 제거

let arr3 = [1, 2, 3];
const shiftedItem = arr3.shift();
console.log(shiftedItem, arr3); // 1 [2, 3]

실무 Tip: 큐(Queue) 구조처럼 동작시키고 싶을 때 많이 사용됩니다.

---

✅ unshift(): 배열 앞에 요소 추가

let arr4 = [1, 2, 3];
const newLength2 = arr4.unshift(0);
console.log(arr4); // [0, 1, 2, 3]
console.log(newLength2); // 4

---

✅ slice(): 특정 구간을 잘라 새로운 배열로 반환

let arr5 = [1, 2, 3, 4, 5];
let sliced = arr5.slice(2, 5);
let sliced2 = arr5.slice(-2);

console.log(sliced); // [3, 4, 5]
console.log(sliced2); // [4, 5]
console.log(arr5); // 원본은 유지됨

실무 Tip: UI에서 리스트의 일부만 보여주거나 임시 데이터를 잘라낼 때 사용됩니다.

---

✅ concat(): 배열 이어붙이기

let arr6 = [1, 2];
let arr7 = [3, 4];

let concatArr = arr6.concat(arr7);
console.log(concatArr); // [1, 2, 3, 4]

실무 Tip: 여러 API에서 받은 배열을 하나로 합칠 때 유용합니다.

---

2. 요소 순회 및 탐색 메서드 (Iteration & Search)

✅ forEach(): 요소 순회

let arr1 = [1, 2, 3];
arr1.forEach((item, idx) => {
    console.log(idx, item * 2); // 0 2 / 1 4 / 2 6
});

let doubledArr = [];
arr1.forEach(item => doubledArr.push(item * 2));
console.log(doubledArr); // [2, 4, 6]

---

✅ includes(): 특정 값 존재 여부 확인

let arr2 = [1, 2, 3];
console.log(arr2.includes(3)); // true
console.log(arr2.includes(10)); // false

---

✅ indexOf(): 특정 요소의 인덱스 반환

let arr3 = [1, 2, 3];
console.log(arr3.indexOf(2)); // 1

let arr3_1 = [2, 2, 2];
console.log(arr3_1.indexOf(2)); // 0

console.log(arr3.indexOf(10)); // -1

---

✅ findIndex(): 조건을 만족하는 요소의 인덱스 찾기

let arr4 = [1, 2, 3];
const findedIndex = arr4.findIndex(item => item % 2 !== 0);
console.log(findedIndex); // 0

indexOf vs findIndex

let objectArr = [
    { name: "홍길동" },
    { name: "이순신" }
];

console.log(objectArr.indexOf({ name: "홍길동" })); // -1 (얕은 비교)
console.log(objectArr.findIndex(item => item.name === "홍길동")); // 0

---

✅ find(): 조건을 만족하는 요소를 직접 반환

let arr5 = [
    { name: "홍길동" },
    { name: "이순신" }
];

const finded = arr5.find(item => item.name === "홍길동");
console.log(finded); // { name: "홍길동" }

---

3. 배열 변형 메서드 (Transformation)

✅ filter(): 조건을 만족하는 요소들만 추출

let arr1 = [
    { name: "홍길동", hobby: "테니스" },
    { name: "이순신", hobby: "테니스" },
    { name: "장보고", hobby: "독서" }
];

const tennisPeople = arr1.filter(item => item.hobby === "테니스");
console.log(tennisPeople);
// [{ name: "홍길동", hobby: "테니스" }, { name: "이순신", hobby: "테니스" }]

---

✅ map(): 요소를 변환하여 새 배열 생성

let arr2 = [1, 2, 3];
const mapResult1 = arr2.map(item => item * 2);
console.log(mapResult1); // [2, 4, 6]

let names = arr1.map(item => item.name);
console.log(names); // ['홍길동', '이순신', '장보고']

---

✅ sort(): 배열 정렬

let arr3 = ['b', 'a', 'c'];
arr3.sort();
console.log(arr3); // ['a', 'b', 'c']

let arr4 = [10, 3, 5];
arr4.sort((a, b) => a - b);
console.log(arr4); // [3, 5, 10]

---

✅ toSorted(): 정렬된 새 배열 반환 (원본 유지)

let arr5 = ['a', 'd', 'c'];
const sorted = arr5.toSorted();

console.log(arr5); // ['a', 'd', 'c']
console.log(sorted); // ['a', 'c', 'd']

---

✅ join(): 문자열로 결합

let arr6 = ["hi", "I'm", "developer"];
console.log(arr6.join()); // hi,I'm,developer
console.log(arr6.join("-")); // hi-I'm-developer
console.log(arr6.join(" ")); // hi I'm developer

실무 Tip: 태그 목록, 검색 키워드 등을 문자열로 만들어 전송할 때 자주 활용됩니다.