find()와 findIndex()

find()와 findIndex() 메서드를 사용하면 배열 안의 참조 값에도 사용이 가능하며  이는 참조값에는 사용할 수 없는 

 

indexof()의 대안책이 됩니다.

 

예시 코드와 함께 정리해보도록 하겠습니다.

 

 

 

Array.prototype.find() - JavaScript | MDN

 

Array.prototype.findIndex() - JavaScript | MDN

 

 

 

---

 

find()

기본 사용법은 아래와 같습니다.

기준 배열.find( ( 인수 1, 인수 2, 인수 3 ) => { 함수 실행문 } )

find() 메서드는 모든 배열에 사용이 가능하며 인자로는 함수를 인수로 취합니다.

 

메서드의 인수로 받는 함수는 최대 3개의 인수를 받을 수 있는 함수입니다.

 

첫 번째 인수는 배열의 단일 객체입니다. 

 

두 번째 인수는 단일 객체의 인덱스입니다.

 

세 번째 인수는 기준이 되는 전체 배열입니다.

 

아래 예시 코드와 함께 살펴보겠습니다.

 

 

 

const personData = [{ name: "SH" }, { name: "LSH" }];

let personIdx;

const findedPerson = personData.find((person, idx) => {
  personIdx = idx; // 현재 요소의 인덱스
  return person.name === "LSH"; // 찾으려는 요소
});

console.log(personIdx); // 1 출력
console.log(findedPerson); // {name: 'LSH'} 출력

find() 메서드를 사용하면 배열의 모든 요소에 함수를 실행하게 됩니다. 

 

배열의 모든 요소에 함수가 실행되면 찾으려는 요소에 대해서는 true가 반환되고 나머지 요소에 대해서는 false가 반환됩니다.

 

만약 찾으려는 요소가 배열 안에 중복으로 들어가 있다면 첫 번째 요소만 찾고 종료됩니다. 

 

 

참고하실 점은 find() 메서드는 복사된 값을 반환하는 것이 아닌 배열의 객체와 동일한 객체를 반환한다는 점입니다.

const personData = [{ name: "SH" }, { name: "LSH" }];

const findedPerson = personData.find((person, idx, persons) => {
  return person.name === "LSH";
});

console.log(findedPerson); // {name: 'LSH'} 출력

findedPerson.name = "LLLLL"; // name의 value 변경

console.log(personData, findedPerson); 
/*

[{name: 'SH'}, {name: 'LLLLL'}]
{name: 'LLLLL'}
출력 
*/

즉 찾은 객체의 value를 변경하게 되면 원본 배열의 객체의 value도 변경되게 됩니다.

 

이는 찾으려는 객체의 참조값과 동일한 참조값을 반환한 것을 의미합니다. 

 

 

findIndex()

findIndex() 메서드는 find() 메서드와 동일한 방식으로 작동합니다.

const personData = [{ name: "SH" }, { name: "LSH" }];

const findedPerson = personData.find((person) => {
  return person.name === "LSH";
});

const findedIndex = personData.findIndex((person) => {
  return person.name === "LSH";
});

console.log(findedIndex); // 1 출력

findIndex() 메서드는 배열에서 일치하는 항목을 반환하는 것이 아닌 일치하는 항목의 인덱스를 반환합니다. 

 

 

 

find() 메서드의 경우 찾으려는 요소의 인덱스에 접근이 가능하기 때문에 해당 요소의 인덱스를 사용해야 되는 경우라면 

 

find() 메서드나 findIndex() 메서드 중 하나를 선택하여 사용하시면 될 것입니다.