[Array] 배열 객체의 메소드 ' .findIndex() '와 ' .indexOf '의 차이

.findIndex()

 

- Syntax

findIndex(callbackFn)
findIndex(callbackFn, thisArg)

 

- 반복 메서드로, callbackFn 함수를 배열의 각 요소에 대해 오름차순 인덱스 순서로 한 번씩 호출하고, callbackFn이 참인 값을 반환할 때까지 반복, 그런 다음 findIndex()는 해당 요소의 인덱스를 반환하고 배열 반복을 중단

- 주어진 조건을 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환하고, 만족하는 요소가 없으면 -1을 반환

- 첫 번째 요소에 대한 값을 얻고 싶은 경우 '.find() '사용

- 배열의 length는 callbackFn을 처음 호출하기 전 저장됨

- 이미 방문한 인덱스를 변경해도 callbackFn이 해당 인덱스에 대해 다시 호출되지 않음

- 아직 방문하지 않은 기존 요소가 callbackFn에 의해 변경되는 경우, callbackFn에 전달된 값은 해당 요소가 방문될 당시의 값이 됨. 삭제된 요소는 'undefined'로 인식됨

 

- 예제 1

function isPrime(element) {
  if (element % 2 === 0 || element < 2) {
    return false;
  }
  for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
    if (element % factor === 0) {
      return false;
    }
  }
  return true;
}

console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7)

 

- 예제 2

const array1 = [5, 12, , 130, 44];

const isLargeNumber = (element) => element === undefined;

console.log(array1.findIndex(isLargeNumber));
// Expected output: 2

 

=> .findIndex()는 배열의 빈 슬롯을 유효한 요소로 인식함

 

 

 

 

.indexOf()

 

- Syntax

indexOf(searchElement)
indexOf(searchElement, fromIndex)

 

- 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환

- 엄격한 동등성을 사용하여 배열의 요소와 searchElement를 비교(=== 연산자가 사용하는 것과 동일한 알고리즘). 

- NaN 값은 절대 동일하게 비교되지 않으므로, searchElement가 NaN인 경우 indexOf()는 항상 -1을 반환

- indexOf()는 배열의 빈 슬롯을 건너뜀

console.log([1, , 3].indexOf(undefined)); // -1

 

- 예제

const indices = [];
const array = ["a", "b", "a", "c", "a", "d"];
const element = "a";
let idx = array.indexOf(element);
while (idx !== -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]

 

 

 

 

차이점

 

'.findIndex()', '.indexOf()' 모두 조건을 만족하는 첫 번째 요소의 인덱스를 반환하지만, 조건의 첫 째 자리에 무엇이 오느냐에 차이점이 있다.

- .findIndex() : callbackFn 함수

- .indexOf() : searchElement

 

 

 

 

 

- 출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

Array.prototype.findIndex() - JavaScript | MDN

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

Array.prototype.indexOf() - JavaScript | MDN