indexof() 와 lastIndexof()

indexof() 메서드를 사용하면 배열의 인덱스에 어떤 요소가 있는지 파악해서 해당 인덱스를 사용해 항목을 대체하거나 사용이 가능합니다.

 

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

 

 

 

Array.prototype.indexOf() - JavaScript | MDN

 

 

---

indexof()

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

기준배열.indexof(찾을 요소, 시작 인덱스)

indexof() 메서드는 첫 번째 인자로 찾을 요소의 값을 받으며 두 번째 인자로는 선택적 인수인 시작 인덱스를 인자로 받고 해당 인덱스 이후의 요소만 찾게 됩니다.

(두 번째 인자는 선택적 인수이기 때문에 사용자의 필요에 따라 주어도 되고 주지 않아도 무관합니다.)

 

해당 값의 인덱스를 반환합니다.

 

 

 

 

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

const nums = [10, 5, 3, 6, 4, 2];

const findedIndex = nums.indexOf(3);

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

indexof() 메서드의 인자로 찾을 값인 3을 주었습니다. 

 

기준이 되는 배열에서 3은 2 인덱스에 위치하기 때문에 2를 반환하게 됩니다.

 

 

const nums = [10, 5, 3, 6, 4, 3, 2]; // 3이 중복으로 들어간 배열

const findedIndex = nums.indexOf(3);

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

만약 기준이 되는 배열에 찾을 값이 중복으로 들어가 있다면 일치하는 첫 번째 값을 찾은 후에 종료됩니다.

 

즉 해당 값을 가진 모든 인덱스를 반환하는 것이 아니라 제일 처음 발견한 인덱스만 반환합니다.

 

 

 

lastIndexof()

indexof() 메서드는 배열의 왼쪽부터 인자로 받은 값을 찾았습니다.

 

배열의 오른쪽부터 값을 찾고 싶다면 lastIndexof() 메서드를 사용하면 됩니다.

 

const nums = [10, 5, 3, 6, 4, 3, 2];

const findedIndex = nums.indexOf(3);

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

lastIndex() 메서드는 배열의 오른쪽부터 값을 찾기 때문에 가장 먼저 발견한 5 인덱스에 위치한 3을 찾고 종료됩니다.

 

 

 

 

참고사항

indexof()와 lastIndex()는 원시 값에 대해서는 실행되지만 참조값에 관해서는 실행되지 않습니다.

 

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

const findedPerson = personData.indexOf({ name: "SH" });

console.log(findedPerson); // -1 출력

기준이 되는 배열 안에는 2개의 객체가 들어있고 indexof()의 인자로 객체를 주었습니다.

 

결과는 indexof()는 -1의 값을 반환하게 됩니다.

 

-1은 indexof()와 lastIndexof()가 어떤 요소도 찾지 못할 경우 반환하는 값입니다. 

 

이는 객체는 참조값이므로  indexof()에 새 객체를 생성해서 인자로 주면 기준 배열 안의 객체와 인자로 받은 객체의 메모리 주소 값이 다르기 때문에 -1을 반환하게 되는 것입니다.

( personData.indexOf({ name: "SH" })에서 인자로 받은 { name: "SH" }는 새로운 객체를 생성해서 인자로 준 것입니다. )