Study/JavaScript

[JS] find

taecongs 2023. 7. 21. 13:13

알고있으면 좋은 Javascript Tip✨


find()

  • 자바스크립트에서 for문의 남용을 막기 위해 만들어낸 배열함수 이다.
  • 배열 요소 중, 어떠한 조건에 맞는 첫번째 요소만 골라내고 싶다면 가장 알맞은 함수이다.
  • 만약 조건에 만족하는 요소가 없다면 undefined 를 return 한다.
  • 배열을 순환하면서 조건에 맞는 요소를 찾는 순간 순환을 멈추고 즉시 값을 반환한다.
// 화살표 함수 표기법)
array.find((element, index, array) => { ... });

// 콜백함수로 호출하는 법)
array.find(callbackFn, thisArg);

// 익명함수로 표기법)
array.find(function(element, index, array) {

}, thisArg);
  • callback 함수 : 배열의 모든 요소가 거쳐갈 함수
  • element : (순환 중) 현재 처리중인 요소 그 자체
  • index : (순환 중) 현재 처리중인 요소의 index
  • array : find()가 실행되고 있는 원본 배열
  • thisArg : callback 함수가 실행중일 때 this로 사용될 값
let friends = [
    {name: 'Son', age: 30},
    {name: 'Kane', age: 29},
    {name: 'Lucas', age: 30}
];

// 예시) 
let result = friends.find( ({ name }) => name == 'Kane');

// 결과)
result = {name: 'Kane', age: 29}
  • find() 메서드는 배열 friends를 순회하면서 name 속성이 'Kane'인 요소를 찾고, 해당 요소를 result 변수에 할당한다.
  • 따라서 result{ name: 'Kane', age: 29 } 객체가 된다.
  • 만약 찾는 요소가 없다면 undefined를 반환한다.