JavaScript find(), findIndex()

find(), findIndex()

---

find() / findIndex()

find()메서드는 배열 요소를 검색할 때 사용합니다. 조건에 일치하는 요소의 값을 반환하며 없을 경우 undefined를 반환합니다. findIndex()메서드는 배열 요소를 검색할 때 사용하며 인덱스로 반환하며 조건에 일치하는 값이 없을 경우 -1을 반환합니다.

번호	기본값	메서드	리턴값

js

//01. find()
const arrNum = [100, 200, 300, 400, 500];
// const result = arrNum.find(function(element){
//     return element === 300;
// });
// const result = arrNum.find((element) => {
//     return element === 300;
// });
// const result = arrNum.find(element => {
//     return 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;

//02. findIndex()
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;