.filter()

filter메서드는 이름 그대로 요소들을 걸러내는 것이 목적이다.

let arr1 = [4, 15, 357, 495, 500, 1024, 3001];
let arr2 = arr1.filter((n) => n%5 === 0);

console.log(arr2);
// (3) [15, 495, 500]

콜백 함수의 리턴은 boolean을 가진다.
리턴이 true인 요소만 모아서 새로운 배열을 만든다.
만족하는 요소가 없다면 ? 빈 배열이 반환된다.

let arr1 = [11, 377, 1024];
let arr2 = arr1.filter((n) => n%5 === 0);

console.log(arr2);
// []

undefined도 아닌 빈 배열을 반환한다는 점은 중요하다.
보통 도메인을 해결하기 위해서 Array메서드를 여러 개 연결해서 사용하는데,
빈 배열이라도 반환함으로써 중간에 오류가 나지 않고 다음 Array메서드를 사용할 수 있다.

// 5의 배수만 구해서 각 요소를 2배..
let arr1 = [6, 377, 1024];	// 5의 배수 없음 !
let arr2 = arr1.filter((n) => n % 5 === 0)
    .map((n) => n * 2);  	// filter로부터 빈 배열이 반환됨.

console.log(arr2);
// []
// -> map의 콜백 함수는 결국 한 번도 호출되지 않았으나 에러 없음.

만약 filter로부터 빈 배열이 아닌 결과 없음을 의미하는 다른 값이 반환되었다면 에러가 발생했을 것이다.

.find()

ES5에서는 주로 Array.prototype.foreach(), Array.prototype.map(), Array.prototype.filter()를 사용해서 특정 또는 전체 값에 대한 처리를 했다.
이 메서드들은 한 배열 안에 있는 모든 데이터를 확인한 후 변경 및 삭제를 한다.
어떤 하나의 특정 값만 바꾸려고 하는데 모든 데이터를 확인해야 한다.

ES6에서 이런 단점을 보완하고자 Array.prototype.find()가 나왔다.

find메서드는 filter와 비슷하지만 단 하나의 요소만 리턴한다.
find는 콜백 함수의 리턴이 true인 요소를 찾을 때까지 순회하다가 찾으면 바로 끝난다.
만약 발견하지 못한다면 ? undefined가 반환된다.

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

// 정수 배열에서 5의 배수인 정수만 모으기
var arr = [4,  377, 1024];
var arr2 = arr.find(function (n) {
    return n % 5 == 0;
});

console.log(arr2); // undefined

---

• 찾은 요소의 값 대신 인덱스를 반환하는 findIndex() 메서드.
• 배열 요소의 위치를 찾고자 하는 경우에는 Array.prototype.indexOf()
• 배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에는 Array.prototype.indexOf() 또는 Array.prototype.includes()