[JS] 11. 배열 메서드 : 요소 조작부터 변형까지

 

자바스크립트에서 데이터를 다루는 가장 강력한 도구인 배열 메서드를 정리해 보자. 단순 반복문보다 훨씬 간결하고 가독성 높은 코드를 작성할 수 있게 해준다.

 

1. 요소 조작 (기본 다루기)

배열의 앞뒤에서 데이터를 넣고 빼거나, 특정 부분을 잘라내는 기초 메서드들이다.

 

JavaScript

 

let arr = [1, 2, 3];
arr.push(4);    // [1, 2, 3, 4]
arr.shift();   // [2, 3, 4]

const sliced = arr.slice(0, 2); // [2, 3] (index 0부터 2 전까지)
console.log(arr); // [2, 3, 4] 원본은 그대로!

---

2. 탐색 및 순회 (찾기)

배열 안에 원하는 데이터가 있는지, 어디에 있는지 확인한다.

• indexOf / includes: 단순 값의 위치나 존재 여부를 확인한다.
• find / findIndex: 콜백 함수를 사용해 조건에 맞는 첫 번째 요소나 그 인덱스를 찾는다.

JavaScript

 

const users = [{ name: "신영" }, { name: "철수" }, { name: "영지" }];

// name이 "철수"인 객체 찾기
const target = users.find((user) => user.name === "철수");
console.log(target); // { name: "쳘수" }

---

3. 배열 변형 (데이터 가공 - 고차 함수)

가장 많이 쓰이는 핵심 파트이다. C#의 LINQ와 매칭하면 이해가 훨씬 빠르다.

① map() (C#의 Select)

배열의 모든 요소를 하나씩 돌며, 새로운 형태의 배열로 변환한다.

JavaScript

 

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]

② filter() (C#의 Where)

조건에 맞는 요소들만 추려서 새로운 배열을 만든다.

JavaScript

 

const scores = [60, 95, 45, 80];
const pass = scores.filter(s => s >= 80); // [95, 80]

③ reduce() (C#의 Aggregate)

배열의 모든 요소를 하나의 값으로 합친다. (누산기 역할)

JavaScript

 

const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0); // 6

---

통합 실습 코드: 재고 관리 시스템

배열 메서드를 체이닝하여 사용하는 실전 예제이다.

JavaScript

 

// [상황: 창고 아이템 데이터 가공]
const inventory = [
    { name: "Motor", type: "Part", price: 500, stock: 3 },
    { name: "Sensor", type: "Part", price: 100, stock: 10 },
    { name: "Robot Arm", type: "Machine", price: 5000, stock: 1 },
    { name: "Cable", type: "Part", price: 10, stock: 100 }
];

// 1. 가격이 100불 이상인 "Part" 타입의 아이템만 추출 (filter)
// 2. 각 아이템의 이름만 대문자로 변환 (map)
// 3. 알파벳 순으로 정렬 (sort)

const result = inventory
    .filter(item => item.type === "Part" && item.price >= 100)
    .map(item => item.name.toUpperCase())
    .sort();

console.log(result); // ["MOTOR", "SENSOR"]

// 4. 전체 재고의 총 자산 가치 계산 (reduce)
const totalAsset = inventory.reduce((total, item) => {
    return total + (item.price * item.stock);
}, 0);

console.log(`총 자산 가치: $${totalAsset}`);

---

💡 개발자를 위한 관전 포인트

• 원본 보존 여부: push, sort, reverse 등은 원본 배열을 직접 수정합한다. 반면 map, filter, slice 등은 새로운 배열을 반환한다. 리액트와 같은 현대적 라이브러리에서는 원본을 보존하는 메서드를 선호한다.
• 고차 함수의 위력: for문을 쓰면 코드가 길어지고 가독성이 떨어지지만, 배열 메서드를 사용하면 "무엇을 하는가(What)"에 집중하는 선언형 프로그래밍이 가능해진다.