[ 자바스크립트 ] find()와 filter()의 사용법

JavaScript에서 배열을 다룰 때, 특정 조건을 충족하는 요소를 찾 이때 많이 사용되는 두 가지 메서드가 바로 filter()와 find()입니다. 이 글에서는 이 두 메서드의 차이점과 사용법을 자세히 알아보겠습니다.

 

Array.filter(callback)

---

• 배열 내에서 주어진 조건을 만족하는 모든 요소를 새로운 배열로 반환합니다. 이때 원본 배열은 변경되지 않습니다.

 

[예제]

• numbers 배열에서 10 이상의 값들만을 추출하여 새로운 배열 numAboveTen에 저장합니다.
• 결과적으로 [10, 12]라는 배열이 반환됩니다.

let numbers = [2, 10, 5, 8, 12];

let numAboveTen = numbers.filter(function(number) {
    return number >= 10;
});
console.log(numAboveTen); // [10, 12];

 

 

Array.find(callback)

---

• 배열에서 조건을 만족하는 첫 번째 요소를 반환합니다. 조건을 충족하는 요소가 없을 경우 undefined를 반환하며, 원본 배열에는 영향을 주지 않습니다.

 

[string을 사용한 예제]

let names = ["Sam", "Tom", "White"];

let result = names.fint(function(name) {
    return name === "Tom";
});
console.log(result); // "Tom"

 

[number을 사용한 예제]

let numbers = [2, 11, 4, 12];

let firstNumAboveTen = numbers.find(function(number) {
    return number > 10;
});
concole.log(firstNumAboveTen); // 11

• 이 코드에서는 find() 메서드가 배열에서 10보다 큰 첫 번째 숫자 11을 반환합니다.
• 12도 조건에 맞지만, find()는 첫 번째로 조건을 만족하는 요소만을 반환하므로 11만 출력됩니다.

 

filter() 와.find()의 차이점은 무엇이 있을까?

---

• 반환되는 type에 차이가 있습니다.
•  .filter() 은 배열(array)로 반환합니다. 조건에 맞는 요소가 없을 경우, 빈 배열([])을 반환합니다.
•  .find() 는 첫 번째로 조건에 맞는 단일 요소를 반환합니다. 조건을 만족하는 요소가 없을 경우, undefined를 반환합니다.

 

let numbers = [2, 13, 3, 3, 12];

// .filter() 항상 배열을 반환합니다.
numbers.filter(function(number) {
    return number >= 10;
}); // [13]

// .find() 조건을 충족하는 첫번째 인사 또는 undefined
numbers.find(function(number) {
    return number >= 10;
}); // 13

* 위 예시에서 filter()는 조건에 맞는 모든 요소 [13, 12]를 배열로 반환하지만, find()는 첫 번째로 조건을 만족하는 13만을 반환합니다.

 

let numbers = [2, 13, 3, 3, 12];

// .filter() 항상 배열을 반환합니다.
numbers.filter(function(number) {
    return number >= 20;
}); // []

// .find() 조건을 충족하는 첫번째 인사 또는 undefined
numbers.find(function(number) {
    return number >= 20;
}); // undefined

* filter()가 빈 배열을 반환하고, find()는 undefined를 반환합니다. 이 차이점은 filter()가 언제나 배열을 반환하는 반면, find()는 조건을 만족하는 첫 번째 요소만을 반환하거나 없을 경우 undefined를 반환하는 특성에서 기인합니다.

 

NOTE
.find()의 경우 undefined는 에러를 발생시킬 수 있기 때문에 if condition을 사용하는 것도 좋은 방법입니다. 

 

 

 

Reference

---

Array.prototype.find() - JavaScript | MDN

Array.prototype.filter() - JavaScript | MDN