2022. 5. 31. 19:43ㆍProgram/JavaScript
056_자바스크립트 조건을 만족하는 배열 요소 추출하여 새 배열 만들기
[적용]
- 유저 정보 배열에서 18세 이상인 유저의 정보만을 가져와 배열을 생성하고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| 배열.filter(콜백함수) | 콜백 함수 조건을 만족하는 데이터의 배열 생성 | 배열 |
[문법] - 콜백 함수
| 구문 | 의미 |
| ([요소*], [인덱스*], [기존배열*]) => 진리값 | 요소를 받아 진위 반환 |
* 생략 가능
[내용]
filter()는 콜백 함수 조건에 만족하는 요소들을 새로운 배열로 생성한다. [10, 20, 30, 40] 배열에서 30 이상의 수를 가져와 배열을 생성하는 샘플을 확인해 보자
const newArray = [10, 20, 30, 40].filter((value) => value >= 30);
console.log(newArray); // 결과: [30, 40]
콜백 함수는 요소가 30 이상인지를 확인한다. 30 이상이면 true를 반환하고 새로운 배열의 요소가 된다.
콜백 함수를 다음과 같이 사용할 수도 있다.
const newArray = [10, 20, 30, 40].filter((value) => {
return value >= 30;
}):
const newArray = [10, 20, 30, 40].filter(function(value) {
return value >= 30;
});[예시]
20세 이상, 30세 이상, 40세 이상의 레이브 (Label)을 가지는 버튼을 생성하여
클릭에 따라 유저 리스트를 출력하는 샘플을 확인해 보자
HTML index.html
<body>
<div class="button-wrapper">
<button class="button" data-age="20">20세 이상</button>
<button class="button" data-age="30">30세 이상</button>
<button class="button" data-age="40">40세 이상</button>
</div>
<ul class="user_list">
</ul>
</body>버튼 클릭 시의 onClickButton() 처리는 button 요소가 가지고 있는 데이터 값을 가져온다.
조건에 만족하는 요소를 userDataList에서 가져와 updateList()를 통해 배열을 생성한다.
JavaScript main.js
// 데이터
const userDataList = [
{ name: '곰', age: 18 },
{ name: '여우', age: 27 },
{ name: '사자', age: 32 },
{ name: '얼룩말', age: 41 },
{ name: '기린', age: 56 },
];
// .button 요소의 이벤트 설정
document.querySelectorAll('.button').forEach((element) => {
element.addEventListener('click', (event) => {
onClickButton(event);
});
});
/**
* 버튼 클릭 시 처리
*/
function onClickButton(event) {
// 클릭한 버튼의 요소
const button = event.target;
// 버튼 요소에서 data-age 가져오기
const targetAge = button.dataset.age;
// targetAge 이상의 유저 배열 생성
const filterdList = userDataList.filter((data) => data.age >= targetAge);
// 배열을 출력
updateList(filterdList);
}
/**
* 유저의 배열을 출력
*/
function updateList(filterdList) {
let listHtml = '';
for (const data of filterdList) {
listHtml += `<li>${data.name} : ${data.age}세</li>`;
}
document.querySelector('.user_list').innerHTML = listHtml;
}
실행결과
클릭한 버튼에 따라 배열을 필터링 한다.
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 유사 배열 객체를 배열(Array)로 변환하기 (0) | 2022.05.31 |
|---|---|
| [JavaScript] 자바스크립트 배열 요소 하나로 정리하기(합치기) (0) | 2022.05.31 |
| [JavaScript] 자바스크립트 배열(Array) 요소 추출해서 새 배열 만들기 (0) | 2022.05.30 |
| [JavaScript] 자바스크립트 배열(Array) 요소 알파벳순 정렬하기 (0) | 2022.05.30 |
| [JavaScript] 자바스크립트 배열(Array) 요소 정렬하기 (0) | 2022.05.30 |