find( )/findIndex( )/filter( )

find( ) / findIndex( ) / filter( )

find( ) 메서드는 주어진 판별 함수를 만족하는 첫 요소를 반환하며, 없을 시 undefined를 반환합니다.
findIndex( ) 메서드는 주어진 판별 함수를 만족하는 첫 요소의 식별자(순서)를 반환하며, 없을 시 -1을 반환합니다.
filter( ) 메서드는 주어진 함수의 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환합니다.

---

find( ) / findIndex( ) 메서드

find( ) 메서드는 indexOf( ) 메서드와 마찮가지로 배열값을 찾는 메서드입니다. 차이점은 find( ) 메서드는 인자로 받은 값이 아닌 인자로 받은 판별 함수를 만족하는 첫 배열값을 반환합니다.
또한 찾는 값이 없을 시 -1이 아닌 undefined가 반환됩니다.
findIndex( )는 찾는 배열 값을 식별자로 반환합니다.

　 문법
Array.find(e => e === 찾을 배열값)
Array.findIndex(e => e === 찾을 배열값)

const arrNum = [100, 200, 300, 400, 500];

// const result = arrNum.find(element => element === 300);
const result = arrNum.find(e => e === 300);

document.querySelector(".sample11_N1").innerHTML = "1";
document.querySelector(".sample11_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M1").innerHTML = "arrNum.find(e => e === 300)";
document.querySelector(".sample11_P1").innerHTML = result;


const result2 = arrNum.find(e => e === 600);

document.querySelector(".sample11_N2").innerHTML = "2";
document.querySelector(".sample11_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M2").innerHTML = "arrNum.find(e => e === 600)";
document.querySelector(".sample11_P2").innerHTML = result2;


const arrText = ['javascript', 'jquery', 'react'];
const result3 = arrText.find(el => el === "javascript");

document.querySelector(".sample11_N3").innerHTML = "3";
document.querySelector(".sample11_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M3").innerHTML = "arrText.find(el => el === 'javascript')";
document.querySelector(".sample11_P3").innerHTML = result3;


const result4 = arrText.findIndex(el => el === "javascript");

document.querySelector(".sample11_N4").innerHTML = "4";
document.querySelector(".sample11_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M4").innerHTML = "arrText.findIndex(el => el === 'javascript')";
document.querySelector(".sample11_P4").innerHTML = result4;


const result5 = arrText.findIndex(el => el === "html");

document.querySelector(".sample11_N5").innerHTML = "5";
document.querySelector(".sample11_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M5").innerHTML = "arrText.findIndex(el => el === 'html')";
document.querySelector(".sample11_P5").innerHTML = result5;

결과보기

번호	기본값	메서드	리턴값

filter( ) 메서드

filter( ) 메서드도 배열 값을 찾는 메서드이지만 find( ) 메서드와 다르게 조건부를 사용할 수 있습니다.
다시 말해 모든 배열값이 함수의 조건을 가진 콜백함수에 전달해 true 판정을 받은 배열 값만 모아 반환하게 됩니다.
조건을 통과한 배열값이 없으면 공백을 반환합니다.

문법
filter(e => e(콜백함수 조건) 찾을 값)

const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.filter(el => el === 300);

document.querySelector(".sample12_N1").innerHTML = "1";
document.querySelector(".sample12_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M1").innerHTML = "arrNum.filter(el => el === 300)";
document.querySelector(".sample12_P1").innerHTML = result; 


const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum.filter(el => el === 600);

document.querySelector(".sample12_N2").innerHTML = "2";
document.querySelector(".sample12_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M2").innerHTML = "arrNum.filter(el => el === 600)";
document.querySelector(".sample12_P2").innerHTML = result2; 


const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum.filter(el => el >= 300);     //find랑 다르게 filter는 조건을 걸 수 있는 차이점이 있다.

document.querySelector(".sample12_N3").innerHTML = "3";
document.querySelector(".sample12_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M3").innerHTML = "arrNum.filter(el => el >= 600)";
document.querySelector(".sample12_P3").innerHTML = result3; 

결과보기

번호	기본값	메서드	리턴값