find()

형식

arr.find(callback(element[,index[, arry]]),[,thisArg])

find()함수는 특정 값을 찾는 조건을 callback 함수를 통해 전달하며,
조건에 맞는 값 중 첫번째 값을 리턴함.
만약 조건에 만족하는 값이 없으면 undefincd리턴

파라미터

callback(element, index, array) 함수
조건을 비교한 callback함수이고, 다음 3개의 파라미터가 전달됨.
callback함수에서 사용할 사용자가 테스트할 조건을 정의하고
해당 배열에 값이 find()함수의 리턴값이 됨.
조건에 부합하는 값을 찾으면, 그 이후의 배열은 테스트되지 않음

• element : 현재 처리중인 배열의 element
• index : 현재 처리중인 배열의 index(optional)
• array : find()가 호출된 배열(optional)

thisArg(Optional)
callback을 실행할 때 this로 사용할 객체

return 값

callback함수에 정의한 조건에 부합하는 배열의 첫 번째 값을 리턴.
조건에 부합하는 배열 값이 없을 경우 undefined리턴

📎 Reference
callback함수의 조건에 부합하는 배열의 첫 번째 index값을 알아내기 위해서는 findIndex()함수를 사용함

Sample code

const arr = [
  {name: 'candy', price : 1000}, 
  {name: 'chips', price : 2000},
  {name: 'chocolate', price: 3000}
];

function isCandy(element)  {
  if(element.name === 'candy')  {
    return true;
  }
}

const candy = arr.find(isCandy);
document.writeln(candy.name); // apple
document.writeln(candy.price); // 1000

[result]
apple 1000

filter()

형식

arr.filter(callback(element[, index[, array]])[, thisArg])

finde() 함수가 특정 조건에 부합하는 배열의 첫 번째 값만 리턴한다고 하면,
filter() 함수는 특정 조건에 부합한느 배열의 모든 값을 배열 형태로 리턴

파라미터

find()함수와 동일

return 값

callback 함수에 정의한 조건에 부합하는 배열의 모든 값을 새로운 배열로 리턴함.
조건에 부합하는 배열 값이 없을 경우 빈 배열을 리턴

Sample code

const arr = [
  {name: 'candy', price : 1000}, 
  {name: 'chips', price : 2000},
  {name: 'chocolate', price: 3000}
];

function isCandy(element)  {
  if(element.name === 'candy')  {
    return true;
  }
}

const candy = arr.filter(isCandy);

document.writeln(candy.length); // 2
document.writeln('<br>');
document.writeln(candy[0].name + ',' + candy[0].price); // apple, 1000
document.writeln(candy[1].name + ',' + candy[1].price); // apple, 3000

[result]
2
apple, 1000 apple, 3000