[자바스크립트] findIndex 함수 (배열 검색)

const arr = [5, 12, 8, 130, 44];

const array2 = arr.findIndex( (element) => element > 20 )

console.log(array2)

// 출력값은 3

 

 

 

축구선수를 영입하려다가

findIndex함수의 필요성을 느껴서

공부 후 포스팅한다.

 

arr이라는 변수 안에 5가지의 숫자들이 있는데

이 각각의 값들은 element라고 지칭하겠다.

 

array2라는 변수에는 arr이라는 배열 뒤에 findIndex를 붙인 후 

콜백함수를 사용한다.

 

findIndex의 파라미터는

element라고 임의로 칭하겠다.

(파라미터이름은 어떤걸로 지어도 상관없다. 다만 의미를 제대로 부여해주는 것이 좋다.)

 

여기서의 element는 arr 배열의 각각의 값들이다

5나 12처럼!!

 

여기서 20이 넘는 값을 탐색해보자

 

 

const arr = [5, 12, 8, 130, 44];

arr배열의 element들 중 20이 넘는 값은 

arr[3]과 arr[4]의 값인 130과 44이다.

 

여기서 findIndex는 130과 44에 주목하는게 아니라

arr[  ]  < 대괄호 안에 있는 Index에 주목하는 것

 

 

 

그렇기 때문에 

 

const array2 = arr.findIndex( (element) => element > 20 )

array2를 console.log에 찍으면

3이 나와야 한다. 

 

왜 arr[3] arr[4] 둘 다 

20을 넘는 값을 가지고 있는데

4는 출력안되고 3만 출력되냐면

 

 

findIndex함수 자체가 

배열을 순차적으로 탐색하다가

결과를 만족하는 값을 찾는다면

그 자리에서 멈추기 때문이다.

 

 

 

findIndex함수가 아닌

find함수는

 

arr[3]  < 대괄호안의 index를 탐하는 것이 아니라

arr[3] 의 값 즉 element를 직접 가리키기 때문에

필요한 함수를 직접 가져다 쓰면 좋을 것이다.

 

 

 

조금 심화시켜서 

객체 배열을 탐색해보자.

 

 

let players = createSlice({
  name: "players",
  initialState: [
    {
      id: 0,
      name: "Mohamed Salah",
      count: 1,
    },
    {
      id: 1,
      name: "Sadio Mane",
      count: 1,
    },
  ],
});

 

 

배우고 있는 react의 redux에서 state를 가리키는 부분이다.

 

윗 두줄은 무시하고

let initialState = [
  {
    id: 0,
    name: "Mohamed Salah",
    count: 4,
  },
  {
    id: 1,
    name: "Sadio Mane",
    count: 5,
  },
]

 

임의로 객체배열을 넣고

 

이 배열에서 count가 5개보다 많거나 같은 선수 Index를 

findIndex로 가져와보자

 

let player = initialState.findIndex( (element) => element.count >= 5)

 

player를 console창에 출력했을 때

1이라는 숫자만

덩그러니 나올것이다.

 

 

element는 배열 각각의 값이고

그 각각의 값은

{ } 객체이다.

 

console.log(initialState[1])

위 코드의 출력값은?

 

 

 

짜잔

 

위 방법으로

우리는 해당 조건의 객체를 findIndex로 찾은뒤

배열 대괄호에 [ ]   < findIndex로 찾은 정수를 넣어주면 되는 것!