[JavaScript] 배열 메소드 find()과 findIndex()

ES5 문법에서는 배열 내의 검색을 위한 indexOf() 라는 배열 메소드가 있었는데,

ES6 문법에서는 더 강력한 find()와 findIndex() 2개의 배열 메소드를 지원합니다.

지금부터 find()와 findIndex() 메소드에 대해 알아보겠습니다.

---

1. Array.prototype.find()

• 주어진 함수의 조건을 만족하는 첫번째 요소 값을 반환합니다.
• 조건에 맞는 요소가 없다면 undifined를 반환합니다.

 

 

1️⃣ 조건에 맞는 요소가 있을 때

let arr = [1, 5, 6, 3, 2];
let even = arr.find((item)=> item % 2 === 0 );
console.log(even);	// 6

: item % 2가 0인 요소는 6과 2가 있지만 첫번째 요소 값만 반환하기 때문에 6만 출력됩니다.

 

 

2️⃣ 조건에 맞는 요소가 없을 때

let arr = [1, 5, 6, 3, 2];
let over = arr.find((item)=> item > 10 );
console.log(over);	// undifined

: item > 10인 요소는 없기 때문에 undifined가 출력됩니다.

 

 

3️⃣ 배열이 아닌 객체도 가능합니다.

let obj = [
    {name : 'Jennie', age : 23},
    {name : 'Rose', age : 21},
    {name : 'Jisu', age : 24},
    {name : 'Lisa', age : 22},
];
let under = obj.find((item) => item.age < 22);
console.log(under);	// {name : 'Rose', age : 21}

---

💡 만약 조건을 만족하는 모든 요소를 반환하고 싶다면?

ES5의 Array.prototype.filter()를 사용하면 됩니다.

  * filter()는 배열로 반환됩니다.

let num = [1, 2, 3, 4, 5];
let result = num.filter(num => num > 3);
console.log(result);	// [4, 5]

---

2. Array.prototype.findIndex()

• 주어진 함수를 통과한 첫번째 요소의 인덱스 값을 반환합니다.
• 조건에 맞는 요소가 없다면 -1을 반환합니다.

 

 

1️⃣ 조건에 맞는 요소가 있을 때

let arr = [1, 5, 6, 3, 2];
let evenIndex = arr.findIndex((item)=> item % 2 === 0 );
console.log(evenIndex);	// 2

: item % 2가 0인 첫번째 요소는 6인데 6은 arr의 2번째 인덱스이므로 2가 출력됩니다.

 

 

2️⃣ 조건에 맞는 요소가 없을 때

let arr = [1, 5, 6, 3, 2];
let overIndex = arr.findIndex((item)=> item > 10 );
console.log(overIndex);	// -1

: item > 10인 요소는 없기 때문에 -1이 출력됩니다.