find()
함수를 사용하여 배열에서 특정 조건을 만족하는 값을 찾는 방법을 소개합니다.
1. Syntax
find()
는 인자로 함수를 받으며, 배열의 요소들 중에서 함수의 조건을 만족하는 첫번째 요소를 찾아서 리턴합니다.
array.find(function(currentValue, index, arr));
- currentValue : 배열의 요소들 중에 현재 함수로 조건을 확인 중인 요소
- index : 배열에서 currentValue의 index
- arr : 배열 객체
2. 배열에서 15보다 큰 숫자 찾기
find()
화살표 함수를 이용하여 15보다 큰 숫자를 찾도록 구현할 수 있습니다.
아래 예제에서 배열의 모든 요소들에 대해서 순차적으로 함수의 조건을 만족하는지 확인하다가 30에서 조건을 만족하여 30을 리턴하며 탐색은 중단됩니다.
const array1 = [5, 8, 11, 30, 22];
const found = array1.find(element => element > 15);
console.log(found);
Output:
30
2. 특정 조건의 객체 찾기
아래 예제는 students 배열에서 객체의 name 값이 Todd
인 객체를 찾습니다.
이번에는 화살표 함수를 사용하지 않고 함수를 만들어 find()
에 전달하였습니다.
var students = [
{name: 'Terry', age: 25},
{name: 'Todd', age: 33},
{name: 'Alex', age: 29}
];
function findTodd(student) {
return student.name === 'Todd';
}
console.log(students.find(findTodd));
Output:
{ name: 'Todd', age: 33 }
화살표 함수를 사용하면 아래와 같이 구현할 수 있습니다.
var students = [
{name: 'Terry', age: 25},
{name: 'Todd', age: 33},
{name: 'Alex', age: 29}
];
console.log(students.find(student => student.name === 'Todd'));
3. Index와 Array를 사용하는 예제
위의 예제에서 함수에 Index와 Array 인자도 함께 전달하여, 함수 안에서 로그로 출력하도록 구현하였습니다.
var students = [
{name: 'Terry', age: 25},
{name: 'Todd', age: 33},
{name: 'Alex', age: 29}
];
function findAlex(student, index, array) {
console.log('student.name: ' + student.name)
console.log('index: ' + index)
console.log('array[index]: ' + array[index])
return student.name === 'Alex';
}
console.log(students.find(findAlex));
Output:
student.name: Terry
index: 0
array[index]: [object Object]
student.name: Todd
index: 1
array[index]: [object Object]
student.name: Alex
index: 2
array[index]: [object Object]
{ name: 'Alex', age: 29 }
화살표 함수로 Index와 Array 인자를 받으려면 아래와 같이 구현할 수 있습니다.
var students = [
{name: 'Terry', age: 25},
{name: 'Todd', age: 33},
{name: 'Alex', age: 29}
];
console.log(students.find((student, index, array) => {
console.log('student.name: ' + student.name)
console.log('index: ' + index)
console.log('array[index]: ' + array[index])
return student.name === 'Alex';
}));
Loading script...
Related Posts
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화
- JavaScript Set add() 함수
- JavaScript Set clear() 함수, 모든 값 제거
- JavaScript Set delete() 함수, 값 제거
- JavaScript Set has() 함수 (값 존재 여부 확인)
- JavaScript String split() 함수
- JavaScript - 경과 시간 계산 (Elapsed time)
- JavaScript - 실행 시간 측정 방법
- JavaScript - 날짜, 시간 포맷 (Date format)
- JavaScript - slice()로 배열 자르기, 나누기
- Node.js - 파일에 특정 문자열이 포함되어있는지 확인
- Node.js - 특정 패턴과 일치하는 모든 파일 찾기
- Node.js - 디렉토리의 파일 리스트 가져오기
- Node.js - 파일, 디렉토리(하위 파일) 삭제
- Node.js - 파일 이름 변경
- JavaScript - switch 조건문
- JavaScript - 배열의 특정 요소 찾기, Index 찾기
- JavaScript - 특정 값으로 배열 채우기, Array.fill()
- JavaScript - 배열을 객체로 변환, 4가지 방법
- JavaScript - 이번 달(특정 달)의 1일, 마지막 일 구하기
- JavaScript - 배열 요소 삭제 방법
- JavaScript - null, undefined 체크 방법
- JavaScript - 배열에 특정 값이 포함되어있는지 확인
- JavaScript - 변수가 배열인지 확인, 3가지 방법
- JavaScript - 배열에서 빈 값, undefined, null 제거하기
- JavaScript - Date에 시간(일/시/분/초) 더하기
- JavaScript - Map의 key를 배열로 변환
- JavaScript - Map의 value를 배열로 변환
- JavaScript - Map 요소 삭제 방법
- JavaScript - Map 생성 및 초기화, 3가지 방법
- JavaScript - Map 순회, 3가지 방법