[JavaScript] filter를 이용해서 Array 객체에 특정값 찾아 가져오기

Javascript 객체 배열에서 filter 이용하기

 

javascript 데이터 형태 중에서

객체 배열 형태를 많이 이용하다 보니 해당 Array에서 특정 값을 갖고 있는

객체를 찾아야 되는 업무가 많았다.

 

오늘은 javascript의 필터 기능을 이용해서 

특정 key에 특정 value를 가진 객체를 찾아내 보도록 하겠다.

 

 

🤔Array.filter란?

Array filter를 이용하면 해당 조건에 만족하는 요소를 모두 찾아서 반환시켜준다.

 

 

 

예시 코드

<script>
 const numbers = [1,2,3,4,5];
 let result = numbers.filter( number => number > 3 );
 console.log(result); 
</script>

filter 예시코드 결과

위의 코드를 보자. 1~5까지 숫자를 가진 배열에서 3보다 큰 수를 찾으라고 하면

4,5라는 새로운 배열을 만들어서 return 해준다.

filter기능을 이용하면 이처럼 배열에서 내가 원하는 조건을 가진 요소를 가지고 새로운 배열을 만들 수 있다.

 

 

 

🍒객체 배열 내에서 특정 value 값을 가지는 객체 반환하기

단순한 배열이 아닌 조금 더 복잡한 key vlaue를 가진 객체 배열을 만들어보자.

 const students = [
    {name:'김하영', age:18},
    {name:'이소영', age:17},
    {name:'김사라', age:16}
];

이름과 나이를 갖고 있는 객체 배열이 있다고 가정하다.

여기서 김하영이라는 사람의 나이를 가져와서 사용을 해야 한다고 하면

이때 filter를 이용하면 쉽게 가져올 수 있다

 

 let result = students.filter( student => student.name  === '김하영' );

filter에서 name이 감하 영인 사람을 가져올 경우에는 위 코드를 이용하면 된다.

filter는 해당 배열을 for문을 돌면서 name값에 김하영이 있는 데이터를 찾게 된다.

 

위 예시코드 결과

위 코드의 결과를 콘솔로 찍어보면

김하영이라는 데이터를 가진 객체 하나가 들어와 있는 것을 확인할 수 있다.

 

 console.log(result[0].age);

나이만 가져오서 표시하기

콘솔 로그로 0번째 배열에 age를 가져오라고 명령을 하면 

김하영의 나이인 18만이 return 되어 사용이 가능하다.🤘