[JS] 배열의 특정 값 찾기 (find, filter)

 

 

 

 

 

 

 

📌 배열에서 특정 값을 찾아서 리턴하는 함수 find( ) 와 filter( )

 

자바스크립트에서 배열의 특정 값을 찾아서 리턴하는 함수는 find( ),와 filter( )가 있다.

 

 

1️⃣ find( )

find( )는 배열에서 특정 값을 찾는 조건을 callback 함수를 통해 전달하여, 조건에 해당하는 값이 배열에 있을 경우 해당 배열에서 첫번째로 일치하는 값을 리턴한다. 또한, 배열에 조건을 만족하는 값이 없으면 undefined를 리턴한다.

 

* callback 함수의 조건과 일치하는 배열의 값의 index를 알아내기 위해 findIndex() 함수를 사용한다.

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

 

 

 파라미터 

callback(element, index, array)

• element : 배열의 element
• index : 배열의 index (optional)
• array : find() 가 호출된 배열 (optional)

 

thisArg (optional)

callback을 실행할 때 this로 사용할 객체

 

 

 예제 

const arr = [
  {name: 'dog', age : 4}, 
  {name: 'cat', age : 6},
  {name: 'rabbit', age: 2}
];

function isDog(element)  {
  if(element.name === 'dog')  {
    return true;
  }
}

const dog = arr.find(isDog);
console.log(dog.name); // dog
console.log(dog.age); // 4

 

find( ) 함수에 isDog( ) 라는 callback 함수를 전달

→ isDog( ) 함수는 파라미터로 입력받은 객체(element)의 name이 'dog'이면 true를 리턴

→ find( ) 함수는 파라미터로 전달된 callback 함수가 true를 리턴하면 해당 배열의 값을 리턴

→ 따라서, find( ) 함수는 arr 배열의 여러 객체 중, name === 'dog'인 arr[0]의 값을 리턴

 

 

 

 

2️⃣ filter( )

find( ) 함수는 특정 조건에 일치하는 배열의 첫번째 값만을 리턴한다.

filter( ) 함수는 특정 조건에 일치하는 배열의 모든 값을 새로운 배열로 만들어 리턴한다.

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

 

 

 파라미터 

callback(element, index, array)

• element : 배열의 element
• index : 배열의 index (optional)
• array : find() 가 호출된 배열 (optional)

 

thisArg (optional)

callback을 실행할 때 this로 사용할 객체

 

 

 예제 

const arr = [
  {name: 'dog', age : 4}, 
  {name: 'cat', age : 6},
  {name: 'dog', age: 2}
];

function isDog(element)  {
  if(element.name === 'dog')  {
    return true;
  }
}

const dog = arr.filter(isDog);

console.log(dog.length); // 2
console.log(dog[0].name + ',' + dog[0].price); // dog, 4
console.log(dog[1].name + ',' + dog[1].price); // dog, 2

 

filter( ) 함수에 isDog 함수를 callback 함수로 전달

→ filter( ) 함수는 arr 배열에서 name === 'dog'인 모든 객체를 찾아서 새로운 배열을 생성하여 리턴

→ filter( ) 함수가 리턴하는 dog는 length가 2인 배열이고, 값은 arr[0], arr[2]의 값과 같다