Javascript findIndex()문법

findIndex() 문법에 대해서

findIndex() 메서드는 주어진 함수를 사용하여 배열에서 요소를 검색하고, 해당요소의 인덱스를 반환한다.

array.findIndex(function(currenValue,index,arr),thisValue)

• currentValue : 배열의 현재요소
• index : 배열의 현재 요소의 인덱스
• arr : findIndex() : 메서드가 호출된 배열
• thisValue : 함수에서 this로 사용할 값

findIndex() 메서드는 주어진 함수에서 true로 반환하는 첫 번째 요소의 인덱스를 반환한다.

단 배열에서 검색된 요소가 없다면 -1을 반환한다.

예시)

let numbers = [2,4,6,8,10];
let evenIndex = numbers.findIndex(function(numbers){return number % 2 === 0;});

console.log(evenIndex);
//0(첫 번째 요소인 2가 0에 위치해서)

findIndex() 사용 예시

1. 위 예시처럼 조건에 맞는 요소를 찾을 수 있다.
2. 삭제할 요소를 찾을 수 있다.

let fruits = ['apple','banana','orange','grape']; 
let indexToRemove = fruits.findIndex((i)=> {return i === 'orange'}); 

fruites.splice(indexToRemove,1); 

console.log(fruits); 
//['apple','banana','grape']

  3. 객체 배열에서 요소 찾기 

let user = [ 
	{name : 'Alice', age : 25}, 
    {name : 'Bob', age : 30}, 	
    {name : 'Charlie', age : 35} 
]; 

let indexToFind = users.findIndex((user)=>{return user.name === 'Bob';}); 

console.log(indexToFind); 
//1 (Bob은 2번째 요소이기 때문)

 

findIndex() 에 대한 주관적인 생각

원하는 요소를 찾아서 변수에 넣을 때 유용하겠다는 생각을 했다.

특히 조건문 만들 때 jQuery에서 this나 class를 변수에 저장해서 가져오는 방법 등이 있었는데 자바스크립트, 리액트에서는 state가 array로 된 경우가 많아서 몇 번째 요소를 꺼내오고 싶은지 입력하는 경우가 많았기 때문이다.

그리고 동적인 UI를 만들기 위해서 알아두면 좋은 메서드 같다.

내가 임의로 데이터를 정해서 코드를 짜면 편하지만 동적인 UI를 만들 수 없다. 하지만 findIndex()를 활용하면 해당 고유 ID와 일치하는지 등 조건을 걸면 페이지가 유동적으로 그에 맞는 내용으로 바뀐다.

그러므로 활용성이 높은 메서드라 느끼며 이를 가지고 얼마나 더 활용할 수 있는지 공부해보려 한다.