indexOf(), findIndex(), find()

 

 

indexOf

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.

 

 

 

구문

 

arr.indexOf(searchElement[, fromIndex])

 

• searchElement : 배열에서 찾을 요소이다.
• fromIndex : 검색을 시작할 색인이다. 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환된다.

 

 

예시

const a = ['과자', '빵', '커피', '사과'];

//커피가 몇번째 항목인지 알고싶다면
const index = a.indexOf('커피'); // 2

 

 

 

 

---

 

 

 

findIndex

배열 안에 있는 값이 숫자, 문자열, 또는 불리언이라면 찾고자하는 항목이 몇번째 원소인지 알아낼 때 사용한다.

배열 안에 있는 값이 객체이거나, 배열이라면 indexOf로 찾을 수 없다.

 

 

 

구문

arr.findIndex(callback(element[, index[, array]])[, thisArg])

 

 

 

반환 값

요소가 테스트를 통과하면 배열의 인덱스. 그렇지 않으면 -1을 반환한다.

 

• callback : 배열의 각 값에 대해 실행할 함수
• element : 배열에서 처리중인 현재 요소
• index : 배열에서 처리중인 현재 요소의 인덱스
• array : findIdex 함수가 호출된 배열
• thisArg : 선택 사항. 콜백이 실행될 때 this로 사용할 객체

 

 

예시

 

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

여기서 id가 3인 객체가 몇번째인지 찾으려면, findIndex 함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 찾을 수 있다.

const index = todos.findIndex(todo => todo.id === 3);
console.log(index); //2

 

 

 

 

 

---

 

 

find

찾아낸 값이 몇번째인지 알아내는 것이 아니라, 찾아낸 값 자체를 반환한다.

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없다면 undefined를 반환한다.

 

 

찾은 요소의 값 대신 인덱스를 반환 -> findeIdex()

배열 요소의 위치 반환 -> Array.prototype.indexOf()

 

 

 

구문

arr.find(callback[, thisArg])

 

• callback : 배열의 각 값에 대해 실행할 함수
• index : 콜백함수에서 처리할 현재 요소의 인덱스
• array : find 함수를 호출한 배열
• thisArg : 선택 항목. 콜백이 호출될 때 this로 사용할 객체

 

 

반환 값

 

주어진 판별 함수를 만족하는 첫 번째 요소의 값. 그 외에는 undefined

 

 

 

 

 

 

예시

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

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

위의 결과는 다음과 같다.

{id: 3, text: "객체와 배열 배우기", done: true}

 

 

 

속성 중 하나를 사용하여 배열에서 객체 찾기

let person = [
  {name: 'min' , name:20},
  {name: 'oh' , name:35},
  {name: 'maru' , name:12}
];

function findmaru(a) {
  return a.name === 'maru';
}

console.log(person.find(findmaru)); // {name: 'maru' , name:12}

 

화살표 함수 사용하기

let person = [
  {name: 'min' , name:20},
  {name: 'oh' , name:35},
  {name: 'maru' , name:12}
];

let result = person.find(a => a.name === 'maru');

console.log(result) //{name: 'maru' , name:12}