JS 기초 : 배열 내장 함수 indexOf findIndex find

세 가지 메소드가 어떠한 요소를 찾는다는 점이 같기 때문에 함께 작성했습니다.

◼ indexOf

• 배열의 요소가 배열의 몇 번째 인덱스에 저장되어 있는지 알려주는 메서드
• 배열의 요소가 객체이거나 배열일 때는 사용 할 수 없다.
• 배열명.indexOf(파라미터)의 형태로 작성한다.
• 파라미터에는 찾고자 하는 배열의 요소가 들어간다.

const arrayA = ["ABC", 1, "감자"];
const indexA = arrayA.indexOf("감자"); //2
const indexB = arrayA.indexOf(1); //1

◼ findIndex

• indexOf와 동일하게 배열의 요소의 인덱스를 알려주는 메서드
• 배열의 요소가 객체이거나 배열일 때 사용한다.
• 배열명.findIndex(파라미터)의 형태로 작성한다.

const todos = [
  {id: 1,text: "자바스크립트 입문",done: true},
  { id: 2, text: "함수 배우기", done: true },
  { id: 3, text: "객체와 배열 배우기", done: true },
  { id: 4, text: "배열 내장 함수 배우기", done: false }
];

const index = todos.findIndex((todo) => todo.id === 3);

출력
2

위와 같이 배열의 각 요소가 객체일 때 findIndex메서드를 사용한다. 위의 예제는 todos 객체 중 id가 3인 요소의 인덱스를 찾는 코드이다. 각 요소를 todo로 불러오고 todo.id를 통해 객체 요소인 id에 접근 했다.

◼ find

• findIndex가 몇 번째 값인지를 알려준다면 find는 배열의 요소 자체를 찾아 반환 메서드이다.
• 배열명.find(파라미터)의 형태로 작성한다.

const index = todos.find((todo) => todo.id === 3);

findIndex 예제 코드에 위의 코드를 추가하면 {id: 3, text: "객체와 배열 배우기", done: true}가 출력된다. findIndex와 마찬가지로 배열의 요소인 객체를 todo에 불러오그 객체들 중 id가 3인 객체를 반환하게 된다.

◼ 요약

• 배열의 요소가 몇 번째 값인지 찾기

  1. 객체나 배열일 때 findIndex
  2. 그 외 indexOf

• 배열의 요소 찾기 find