[JavaScript] 배열 특정 값 찾기 - find(), filter()

 

 

이전 포스팅에서

배열의 특정 값 index를 찾는 방법을 알아보았습니다.

[JavaScript] 배열 특정 값 인덱스(index) 찾기(1) - indexOf()

[JavaScript] 배열 특정 값 인덱스(index) 찾기(2) - lastIndexOf()

[JavaScript] 배열 특정 값 인덱스(index) 찾기(3) - findIndex()

 

 

이번 포스팅에서는

find()와 filter() 메서드를 이용해

배열에서 특정 값 찾는 방법을 알아보겠습니다.

 

배열 특정 값 찾기 - find(), filter()

• 1. find()
• 2. filter()

 

1. find()

arr.find(callback[, thisArg])

find() 메서드는 배열에서 특정 값을 찾는 조건을 callback함수를 통해 전달하여,

조건에 만족하는 첫 번째 요소의 값을 반환합니다.

그리고 조건에 만족하는 요소가 없다면 undefined를 반환합니다.

find()는 호출의 대상이 된 원본 배열을 변경하지 않습니다.

 

 

callback

배열의 각 값에 대해 실행할 함수

아래의 세 인자(매개변수, Parameter)를 받습니다.

 

element

콜백함수에서 처리할 현재 요소

 

index(생략 가능)

콜백함수에서 처리할 현재 요소의 인덱스

 

array(생략 가능)

find()를 호출한 배열

 

 

thisArg(생략 가능)

callback 함수가 실행될 때 this로 사용할 객체.

 

 

반환 값

callback 함수에 전달한 조건에 만족하는 배열의 첫 번째 요소의 값을 반환합니다.

조건에 만족하는 요소가 없다면 undefined를 반환합니다.

 

 

예제) 속성 중 하나를 사용하여 배열에서 객체 찾기

const fruits = [
{ name: 'apply', price: 1000 },
{ name: 'banana', price: 2000 },
{ name: 'banana', price: 2000 },
{ name: 'lemon', price: 3000 },
];

function isBanana(element) {
if (element.name === 'banana') return true;
}

const banana = fruits.find(isBanana);
console.log(banana); // {name: 'banana', price: 2000}
console.log(banana.name); // banana
console.log(banana.price); // 2000

const banana = fruits.find(isBanana);

find() 메서드에 isBanana() 함수를 callback 함수에 전달했습니다.

isBanana() 함수는 인자로 입력받은 객체(element)의 name이 'banana'가 맞다면 true를 반환합니다.

find() 메서드는 인자로 전달된 callback 함수가 true를 반환하면

해당 배열의 값을 반환하고 callback 함수를 종료합니다.

 

위 예제에서 fruits 배열의 여러 객체 중에

name === 'banana'

name이 'banana'인 fruits[1]의 값을 반환했습니다.

따라서, find() 메서드는

callback 함수에 전달한 조건에 만족했을 때

배열의 첫 번째 값을 반환하는 것입니다.

 

 

2. filter()

filter(callbackFn)
filter(callbackFn, thisArg)

filter() 메서드는 배열의 요소를 순차적으로 순회하면서

조건에 일치하는 모든 요소를 새로운 배열로 반환합니다.

filter()는 원본 배열을 변경하지 않습니다.

 

 

callback

배열의 각 요소에 대해 실행할 함수

이 함수는 다음 인수를 사용하여 호출합니다.

 

element

배열에서 처리 중인 현재 요소

 

index(생략 가능)

배열에서 처리 중인 현재 요소의 인덱스

 

array(생략 가능)

filter()가 호출된 배열

 

 

thisArg(생략 가능)

callback 함수를 실행할 때 this로 사용할 값.

 

 

반환 값

callback 함수에 전달된 조건에 일치하는 모든 요소를 새로운 배열로 반환합니다.

조건에 일치하는 요소가 없으면 빈 배열이 반환됩니다.

 

 

예제) 동일한 모든 요소 찾기

const fruits = [
  { name: 'apply', price: 1000 },
  { name: 'banana', price: 2000 },
  { name: 'banana', price: 2000 },
  { name: 'lemon', price: 3000 },
];

function isBanana(element) {
  if (element.name === 'banana') return true;
}
const bananas = fruits.filter(isBanana);
const melons = fruits.filter(isMelon);
console.log(bananas.length); // 2
console.log(bananas); // Array(2) {name: 'banana', price: 2000} {name: 'banana', price: 2000} 

function isMelon(element) {
  if (element.name === 'melon') return true;
}
console.log(melons); // []

const bananas = fruits.filter(isBanana);

filter() 메서드에 isBanana 함수를 callback함수에 전달했습니다.

filter() 메서드는 fruits 배열에서 객체의 name이 'banana'인 모든 객체를 찾아

새로운 배열을 생성하여 반환합니다.

 

위 예제에서 filter() 메서드가 반환하는 bananas는

length가 2인 배열이고, 배열 2개의 값은 fruits[1], fruits[2]의 값과 같습니다.

 

const melons = fruits.filter(isMelon);

filter() 메서드에 isMelon 함수를 callback함수에 전달했습니다.

fruits배열에 name이 'melon'인 객체는 없으므로 

filter() 메서드는 빈 배열을 반환합니다.

 

 

 

예제) 10 미만인 모든 요소 찾기

const numbers =  [1, 5, 7, 15, 20, 30];

function isUnder(value) {
  return value <= 10;
}

const filtered = numbers.filter(isUnder);
console.log(filtered); //[1, 5, 7]

const filtered = arr.filter(isUnder);

filter() 메서드에 isUnder() 함수를 callback함수에 전달했습니다.

filter() 메서드는 numbers배열에서 10 미만인 모든 요소를 찾아

새로운 배열로 생성하여 반환합니다.

 

 

 

 

배열에서 특정 값을 찾아 반환하는 find()와 filter() 메서드를 알아보았습니다.