[Javascript] find() / findIndex() / filter()

let products = [
  {
    id: 'apple',
  },
  {
    id: 'banana',
  },
  {
    id: 'orange',
  },
  {
    id: 'avocado',
  },
  {
    id: 'peach',
  },
  {
    id: 'kiwi',
  },
];

 

배열 내 특정 상품 찾기

filter

callback 함수에 정의한 조건에 부합하는 배열의 모든 값을 새로운 배열로 리턴합니다.

조건에 부합하는 배열 값이 없을 경우 빈 배열을 리턴합니다.

find() 함수와 동일합니다.

 

 리턴값 

callback 함수에 정의한 조건에 부합하는 배열의 모든 값을 새로운 배열로 리턴합니다.

조건에 부합하는 배열 값이 없을 경우 빈 배열을 리턴합니다.

 

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

1) apple 을 찾는 함수 생성

function findApple(ele) {
  if(ele.id === 'apple') {
    return true;
  }
}

products.filter(findApple) //배열로 반환
products.find(findApple) //객체로 반환

2) orange 찾아보기

Q. findOrange 함수를 새로 생성할 것인가? x

- 기존코드 수정

function findApple(ele) {
  if(ele.id === this) {
    return true;
  }
}

products.filter(findApple,'orange') //배열로 반환

 

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

매개변수

• callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.
  • element [Optional] : 처리할 현재 요소
  • index [Optional] : 처리할 현재 요소의 인덱스
  • array [Optional] : filter를 호출한 배열
• thisArg [Optional] : callback을 실행할 때 this로 사용하는 값.

반환값

테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

----- 따라서 thisArg 를 활용해 주는 함수로 수정해줍니다.

참고, 화살표 함수로 생성하면 this가 undefined로 나오니 화살표함수 사용하지 말것.

find,  findIndex
filter와 동일하게 thisAtg 사용 가능하므로, 같은 함수를 돌릴 수 있습니다.

find()

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

조건에 맞는 값 중 첫번째 값을 리턴합니다.

만약 배열에 조건을 만족하는 값이 없으면 undefined를 리턴합니다.

 파라미터 

파라미터

callback(element, index, array) 함수

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

 

thisArg (optional)

callback을 실행할 때 this로 사용할 객체입니다.

 리턴값 

리턴값

callback 함수에 정의한 조건에 부합하는 배열의 첫 번째 값을 리턴합니다.

조건에 부합하는 배열 값이 없을 경우 undefined를 리턴합니다.

 

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

 findIndex()

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

배열에서 값을 찾는 조건을 callback 함수로 전달하고,

배열에서 조건에 맞는 값의 '첫번째 index'를 리턴하는 함수입니다.

callback(element, index, array) 함수

조건을 비교할 callback 함수이고, 다음 3개의 파라미터가 전달됩니다.

callback 함수에서 사용자가 테스트할 조건을 정의하고,

만약 배열의 값이 조건에 부합하면 true를 리턴하면,

해당 배열의 index가 findIndex()의 리턴값이 됩니다.

조건에 부합하는 값을 찾으면, 그 이후의 배열값은 테스트 되지 않습니다.

• element : 현재 처리중인 배열의 element입니다.
• index : 현재 처리중인 배열의 index입니다. (optional)
• array : findIndex가 호출된 배열입니다. (optional)

let products = [
  {
    id: 'apple',
    price: 500,
    description: '맛있는 사과',
    amount: 10,
  },
  {
    id: 'banana',
    price: 5000,
    description: '맛있는 바나나',
    amount: 1,
  },
  {
    id: 'apple',
    price: 2500,
    description: '맛있는 사과',
    amount: 3,
  },
];


// apple 찾기
function findApple(ele, idx) {
  if(ele.id === this) {
    console.log(idx)
    return true;
  }
}


products.filter(findApple) //배열로 반환
products.find(findApple) //배열로 반환

thisArg (optional)

callback을 실행할 때 this로 사용할 객체입니다.

 

 리턴값 

callback 함수에 정의한 조건에 부합하는 배열의 첫번째 index를 리턴합니다.

조건에 부합하는 배열 값이 없을 경우 -1을 리턴합니다.

결론

let products = [
  {
    id: 'apple',
    price: 500,
  },
  {
    id: 'banana',
    price: 5000,
  },
  {
    id: 'apple',
    price: 2500,
  }
];

//apple 찾는 함수

function findApple(ele) {
  if(ele.id === 'apple') {
    return true;
  }
}

 

참고 : hianna.tistory.com/406