[JavaScript] 자바스크립트에서 조건을 만족하는 배열 요소(값) 가져오기
2022. 5. 27. 13:35ㆍProgram/JavaScript
052_자바스크립트에서 조건을 만족하는 배열 요소(값) 가져오기
[적용]
- 유저 정보가 담긴 배열에서 ID를 기준으로 정보를 가져오고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| 배열.find(콜백함수) | 콜백 함수 조건에 맞는 첫 요소 | 요소 |
| 배열.findIndex(테스트함수) | 콜백 함수 조건에 맞는 첫 요소의 인덱스 | 숫자 |
[콜백함수 문법]
| 구문 | 의미 |
| ([요소*], [인덱스*], [기존배열]*) => 진리값 | 요소를 확인하고 진리값을 반환 |
[내용]
find()는 배열에서 조건을 만족하는 첫 요소를 가져온다.
const myArray = ['곰', '사자', '여우', '원숭이'];
// 배열에서 '사자'를 가져옴
const targetUser = myArray.find((element) => element === '사자');
// 다음과 같이 표기할 수도 있음
// const targetUser = myArray.find(element => {return element === '사자'});
console.log(targetUser); // 결과: '사자'[예시1]
유저 정보 배열에서 가져온 데이터를 표시하는 검색 시스템 샘플을 확인해 보자
HTML index.html
<body>
<div class="search-word-wrapper">
<label>유저ID<input id="search-id-input" type="text"></label>
</div>
<p id="search-result">
유저 검색 결과 없음
</p>
</body>JavaScript main.js
// id 키와 name 키를 가지는 유저 데이터 배열
const userDataList = [
{ id: 123, name: '곰' },
{ id: 1021, name: '사자' },
{ id: 6021, name: '여우' }
];
/** 검색 ID 입력창 */
const searchIdInput = document.querySelector('#search-id-input');
/** 검색 결과 표시창 */
const searchResult = document.querySelector('#search-result');
// 문자가 입력될 때마다 내용 체크
searchIdInput.addEventListener('keyup', () => {
// 검색 ID 가져오기
const searchId = Number(event.target.value);
findUser(searchId);
});
/** 유저 검색 */
function findUser(searchId) {
// 해당 데이터 가져오기
const targetData = userDataList.find((data) => data.id === searchId);
// 해당 데이터가 없으면 '유저 검색 결과 없음' 표시 후 종료
if (targetData == null) {
searchResult.textContent = '유저 검색 결과 없음';
return;
}
// 검색 결과의 이름을 표시
searchResult.textContent = targetData.name;
}
실행결과
[예시2]
findIndex()는 배열에서 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.
const myArray = ['사자', '곰', '여우', '양'];
// 배열에서 '곰'을 가져옴
const targetIndex = myArray.findIndex((element) => element === '곰');
console.log(targetIndex); // 결과: 1
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 배열(Array) 요소 알파벳순 정렬하기 (0) | 2022.05.30 |
|---|---|
| [JavaScript] 자바스크립트 배열(Array) 요소 정렬하기 (0) | 2022.05.30 |
| [JavaScript] 자바스크립트 배열(Array) 요소 검색하기(배열 값 색인) (0) | 2022.05.27 |
| [JavaScript] 자바스크립트 배열(Array) 결합하기(합치기), 문자열 만들기 (0) | 2022.05.27 |
| [JavaScript] 자바스크립트 배열(Array) 요소 부분(지정위치) 변환(삭제, 추가)하기 (0) | 2022.05.26 |