배열 함수

map() → 배열 각 요소를 변형해서 새 배열을 만든다.

find() → 조건에 맞는 첫 번째 요소를 반환한다.

findIndex() → 조건에 맞는 첫 번째 요소의 인덱스를 반환한다.

filter() → 조건에 맞는 모든 요소를 새 배열로 반환한다.

reduce() → 배열을 하나의 값으로 합치거나 계산한다.

concat() → 배열을 합쳐서 새 배열을 만든다.

slice() → 배열의 일부를 잘라 새 배열로 만든다 (원본 유지).

splice() → 배열을 직접 수정해서 요소를 삭제/추가한다.

 

 

🧩 1. map()

배열의 각 요소를 변형해서 새로운 배열을 만듭니다.
원본 배열은 변경되지 않아요.

📘 형식 : arr.map((요소, 인덱스, 배열) => { ... })

📗 예시 : const nums = [1, 2, 3]; const doubled = nums.map(num => num * 2); console.log(doubled); // [2, 4, 6]

💡 포인트: React에서 map()은 거의 필수예요. {items.map(item => <li>{item}</li>)}

---

🔍 2. find()

조건을 만족하는 첫 번째 요소를 찾아 반환합니다.
못 찾으면 undefined.

📘 형식: arr.find(el => 조건)

📗 예시: const users = [{id: 1}, {id: 2}, {id: 3}]; const user = users.find(u => u.id === 2); console.log(user); // {id: 2}

---

🔢 3. findIndex()

조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다.
못 찾으면 -1.

📗 예시: const nums = [10, 20, 30]; const index = nums.findIndex(n => n === 20); console.log(index); // 1

💡 find()는 값, findIndex()는 위치를 찾습니다.

---

🧹 4. filter()

조건을 만족하는 모든 요소만 골라서 새로운 배열로 반환합니다.
원본 배열은 그대로.

📘 형식: arr.filter(el => 조건)

📗 예시: const nums = [1, 2, 3, 4]; const even = nums.filter(n => n % 2 === 0); console.log(even); // [2, 4]

💡 map()은 변형, filter()는 선별이에요.

---

⚙️ 5. reduce()

배열의 값을 하나로 합쳐줍니다.
누적 계산할 때 유용해요.

📘 형식: arr.reduce((누적값, 현재값) => 새로운누적값, 초기값)

📗 예시: const nums = [1, 2, 3, 4]; const sum = nums.reduce((acc, cur) => acc + cur, 0); console.log(sum); // 10

💡 sum, 평균, 객체로 묶기 등 복잡한 계산에 자주 써요.

---

🔗 6. concat()

배열을 합쳐서 새 배열을 만듭니다.
원본 배열은 그대로.

📘 형식: arr1.concat(arr2)

📗 예시: const a = [1, 2]; const b = [3, 4]; const merged = a.concat(b); console.log(merged); // [1, 2, 3, 4]

💡 React에서 state 배열을 업데이트할 때도 자주 써요.

---

✂️ 7. slice()

배열의 일부를 잘라서 새로운 배열로 반환.
원본은 안 바뀜.

📘 형식: arr.slice(시작인덱스, 끝인덱스)

(끝 인덱스는 포함 안 됨)

📗 예시: const arr = [10, 20, 30, 40]; const part = arr.slice(1, 3); console.log(part); // [20, 30]

---

🪓 8. splice()

배열의 내용을 직접 변경(수정, 삭제, 추가) 합니다.
원본 배열이 바뀌는 게 특징이에요.

📘 형식: arr.splice(시작인덱스, 삭제개수, 추가요소1, 추가요소2, ...)

📗 예시: const arr = [10, 20, 30]; arr.splice(1, 1, 25); // 인덱스 1에서 1개 지우고 25 추가 console.log(arr); // [10, 25, 30]

💡 React에서는 splice는 잘 안 써요.
(불변성을 지켜야 하니까 — 대신 slice나 filter로 대체)