Javascript
[Dseok의 코딩스터디] javascript / javascript findIndex() Method / 자바스크립트 findIndex() / Array.prototype.findIndex()
Dseok
2023. 7. 31. 23:09
반응형
SMALL
findIndex()에 대해서 알아보자.
findIndex()는 find(), indexOf()에서 진화한 버전이다.
인수에 함수를 받을 수 있다.
우선 MDN의 설명을 보자.
findIndex()
메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.
하위에 더 복잡한 설명이 있는데 제외 하겠다.
오히려 더 헷갈릴 듯 하다.
내가 이해한 findIndex()메소드.
조건에 맞는 놈 찾아 다니다가 처음으로 조건에 맞는 놈 위치 값 알려주고, 조건에 맞는 놈이 없으면 -1로 없다고 알려준다.
findIndex()의 기본 문법을 보자.
arr.findIndex(callbackFn, thisArg)callbackFn: findIndex()메소드는 함수를 인자를 받는다.
thisArg: 이건 옵션이다. 인자로 받은 함수를 실행 할 때 this로 받을 값이다.
자 이제 백문이불여일타.
예제를 보자.
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// 결과값: 3MDN의 가벼운 예제이다.
isLargeNumber() 함수에서 13보다 큰 값이 처음 발견 될 때 위치 값을 구한다.
const fruits = ['apple', 'banana', 'orange', 'grapes'];
const index = fruits.findIndex(fruit => fruit === 'orange');
// index는 2 (orange의 인덱스)문자열도 가능하다. 위 예제는 함수로 따로 빼지 않고 바로 넣어봤다.
const users = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 22 }
];
const searchName = 'Bob';
const index = users.findIndex(user => user.name === searchName);
console.log(index); // Output: 1 (Bob의 인덱스)물론 객체에서도 사용이 가능하다.
객체에서 가능하다는 뜻은 JSON 데이터를 다룰 수 있다는 말과 비슷하다.
findIndex()메소드를 통해서 실제로 구현을 해보자.
TodoList에서 항목을 삭제 할 수 있는 예시를 만들어 볼 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="basic" />
<meta name="description" content="basic" />
<link rel="shortcut icon" href="" />
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<title>basic</title>
</head>
<body>
<h1>To-Do List</h1>
<ul id="todoList">
<li>Task 1 <button class="deleteButton">Delete</button></li>
<li>Task 2 <button class="deleteButton">Delete</button></li>
<li>Task 3 <button class="deleteButton">Delete</button></li>
</ul>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
@charset "UTF-8";
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
.deleteButton {
background-color: red;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}css코드는 대충 만들었다.
const todoList = document.getElementById('todoList');
todoList.addEventListener('click', (event) => {
if (event.target.classList.contains('deleteButton')) {
const taskToDelete = event.target.parentElement;
const tasks = Array.from(todoList.children);
const index = tasks.findIndex(task => task === taskToDelete);
if (index !== -1) {
taskToDelete.remove();
}
}
});
자 이렇게 오늘은 findIndex()에 대해서 알아보았다.
나도 많이 사용을 해서 익숙하게 만들 필요가 있어보인다.
틀리거나 부족한 부분이 있으면 댓글로 설명을 달아주라...ㅠ
제발....
반응형
LIST