이 글에서 findIndex() 함수가 나왔는데, 이름으로 대략 감은 오지만 자세한 사용 방법은 몰라서 (콜백함수가 들어가네) GPT한테 한번 물어봤다.
GPT
🔍 findIndex() 함수 자세히 이해하기
findIndex()는 배열(Array)에서 특정 조건을 만족하는 요소의 "인덱스(배열의 위치)"를 찾아주는 JavaScript 함수입니다.
📌 1. findIndex()의 기본 동작
let index = 배열.findIndex((요소) => 조건);✅ findIndex()는 배열을 순회하면서, 특정 조건을 만족하는 첫 번째 요소의 위치(index)를 반환합니다.
✅ 찾으면 해당 요소의 인덱스(위치)를 반환하고,
✅ 찾지 못하면 -1을 반환합니다.
📌 2. findIndex()를 사용하는 이유
React + Redux에서 상품의 count를 증가시키려면, 상품의 위치(index)를 먼저 알아야 합니다.
Redux state는 배열로 되어 있기 때문에, id 값을 비교해서 해당 상품이 배열의 몇 번째에 있는지 찾아야 합니다.
이때 findIndex()가 필요합니다! 🚀
📌 3. 코드 분석
let index = state.findIndex((item) => item.id === action.payload);이 코드의 동작을 단계별로 분석해 볼게요.
✅ 예제 데이터 (Redux state)
let state = [
{ id: 0, name: "White and Black", count: 2 },
{ id: 2, name: "Grey Yordan", count: 1 },
{ id: 3, name: "Nike Air", count: 5 }
];👉 여기에 findIndex()를 사용해서 id가 2인 상품의 위치를 찾는다고 가정합니다.
✅ findIndex() 함수 실행 과정
let index = state.findIndex((item) => item.id === 2);1️⃣ state.findIndex()는 배열의 각 요소를 차례대로 검사합니다.
2️⃣ (item) => item.id === 2 → item.id가 2인 요소를 찾습니다.
| 반복 | item 값 | 조건 item.id === 2 | 결과 |
|---|---|---|---|
| 1회차 | { id: 0, name: "White and Black", count: 2 } | ❌ (0 !== 2) | 계속 찾음 |
| 2회차 | { id: 2, name: "Grey Yordan", count: 1 } | ✅ (2 === 2) | index = 1 반환 |
| 3회차 | 검사하지 않음 (이미 찾음) |
👉 findIndex()는 조건을 만족하는 첫 번째 요소를 찾으면 더 이상 검사하지 않고 즉시 멈춥니다.
👉 따라서 index 값은 1이 됩니다.
📌 4. if (index !== -1) { state[index].count += 1; } 분석
if (index !== -1) {
state[index].count += 1; // 해당 상품의 count 증가
}✅ if (index !== -1)의 의미
findIndex()는조건을 만족하는 요소가 없으면 -1을 반환합니다.- 즉, 상품을 찾지 못한 경우에는
count를 증가시키지 않도록 방지하는 코드입니다.
✅ state[index].count += 1의 의미
index에 해당하는 상품을 찾아count값을 1 증가시킵니다.- 예제에서
index = 1이었으므로,state[1].count += 1이 실행됩니다.
✅ 실행 결과
let state = [
{ id: 0, name: "White and Black", count: 2 },
{ id: 2, name: "Grey Yordan", count: 2 }, // 🔥 count 증가!
{ id: 3, name: "Nike Air", count: 5 }
];👉 id: 2인 상품의 count가 1 증가했어요!
🎯 최종 정리
| 코드 | 역할 |
|---|---|
state.findIndex((item) => item.id === action.payload) | id 값을 가진 상품이 배열의 몇 번째(index)인지 찾음 |
if (index !== -1) | 상품이 존재하는 경우에만 count 증가 |
state[index].count += 1 | 찾은 상품의 count를 1 증가 |
✔️ findIndex()를 사용하면 특정 id를 가진 상품을 정확히 찾아서 수정할 수 있습니다! 🚀
여기까지 보고 나서
아~ indexOf()나 search() 같은 역할이구나... 생각을 했는데
뭔가 내 기억에 indexOf랑 search는 콜백함수가 들어가지 않았던 것 같다.
그 차이인가? 싶어서 chatGPT한테 물어봄
GPT
좋은 질문입니다! findIndex(), search(), 그리고 indexOf()는 모두 특정 값이나 패턴을 찾는 데 사용되지만, 동작 방식과 사용처가 다릅니다. 차이점을 하나씩 비교해 보겠습니다. 🚀
1️⃣ findIndex()
✅ 배열(Array)에서 사용
✅ 특정 조건을 만족하는 "첫 번째 요소의 인덱스" 반환
✅ 콜백 함수 사용 가능
let numbers = [10, 20, 30, 40, 50];
let index = numbers.findIndex((num) => num > 25);
console.log(index); // 2 (30이 처음 등장하는 위치)📌 특징
- 배열을 순회하면서 콜백 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다.
- 조건을 만족하는 요소가 없으면
-1을 반환합니다. - 콜백 함수를 사용할 수 있기 때문에, 복잡한 조건으로 요소를 찾을 수 있습니다.
2️⃣ indexOf()
✅ 배열(Array) 또는 문자열(String)에서 사용
✅ 특정 값의 "첫 번째 등장 위치" 반환
⛔ 콜백 함수 사용 불가능
let fruits = ["apple", "banana", "cherry", "banana"];
console.log(fruits.indexOf("banana")); // 1
console.log(fruits.indexOf("orange")); // -1 (존재하지 않음)📌 특징
- 찾고 싶은 "값"을 직접 전달해야 합니다.
- 콜백 함수를 사용할 수 없으므로 객체 배열에서는 원하는 요소를 찾기 어렵습니다.
- 요소가 여러 개 있어도 처음 등장하는 위치만 반환합니다.
- 값이 없으면
-1을 반환합니다.
3️⃣ search()
✅ 문자열(String)에서만 사용
✅ 정규 표현식(Regex)으로 검색 가능
⛔ 배열(Array)에서는 사용할 수 없음
let text = "Hello, welcome to the JavaScript world!";
console.log(text.search("welcome")); // 7 (문자열의 시작 위치 반환)
console.log(text.search(/javascript/i)); // 21 (대소문자 무시하고 검색)
console.log(text.search("Python")); // -1 (없으면 -1 반환)📌 특징
- 배열이 아니라 문자열에서만 사용할 수 있습니다.
indexOf()와 비슷하지만, 정규 표현식(Regex)을 지원합니다.- 찾는 단어가 문자열에서 처음 등장하는 "인덱스(위치)"를 반환합니다.
- 찾는 단어가 없으면
-1을 반환합니다.
🚀 4️⃣ 차이점 정리 (비교표)
| 함수 | 사용 가능 데이터 | 콜백 함수 | 찾는 방식 | 반환 값 |
|---|---|---|---|---|
findIndex() | 배열(Array) | ✅ 가능 | 특정 조건을 만족하는 첫 번째 요소 | 요소의 인덱스 또는 -1 |
indexOf() | 배열(Array), 문자열(String) | ❌ 불가능 | 특정 "값"을 직접 비교 | 요소(문자)의 인덱스 또는 -1 |
search() | 문자열(String) | ❌ 불가능 | 특정 "문자열" 또는 정규 표현식(Regex) 검색 | 문자 위치(인덱스) 또는 -1 |
📌 5️⃣ 언제 사용해야 할까?
- 🔍 배열에서 특정 조건을 만족하는 요소의 위치를 찾을 때 →
findIndex() - 🔎 배열이나 문자열에서 특정 값의 위치를 찾을 때 →
indexOf() - 📝 문자열에서 정규 표현식을 이용해 검색할 때 →
search()
🎯 결론
findIndex()→ 배열에서 객체나 조건을 만족하는 요소의 위치를 찾을 때 사용indexOf()→ 배열이나 문자열에서 정확한 값을 찾을 때 사용search()→ 문자열에서 정규 표현식을 사용하여 검색할 때 사용
