find() 구문
먼저 자바스크립트에서 find() 메서드는 배열에서 특정 조건을 만족하는 첫 번째 요소의 값을 반환해줍니다.
arr.find() 메서드의 기본 구문은 다음과 같습니다.
arr.find(callback[, thisArg])callback은 사용자가 정의하는 함수로 element, index, array 아래 세가지 매개 변수를 받습니다. 각 매개변수에 대한 설명은 다음과 같습니다.
- element : 콜백함수에서 처리 중인 현재 엘리먼트입니다.
- index : 콜백함수에서 처리 중인 현재 요소의 인덱스입니다.
- array : find()가 호출된 배열입니다.
callback은 배열의 각 요소가 처음으로 참을 반환할 때까지 호출되는 함수이며, thisArg는 콜백 함수 내에서 이 값을 설정하는 데 사용할 수 있는 선택적 매개변수입니다.
find() 사용 예시
'numbers'라는 숫자 배열을 선언하고 find()를 사용하는 예시입니다.
See the Pen javascript - find() by saladent (@saladent) on CodePen.
이 예제에서 find()는 numbers 배열에서 현재 요소가 3보다 큰지 확인하는 콜백함수를 반복합니다. 'numbers' 배열에서 3보다 큰 첫 번째 요소는 4이므로 selectNumber의 값에 4가 반환됩니다.
만약 지정된 조건을 만족하는 요소가 없다면 find() 메서드는 실행 결과 'undefined'를 반환합니다.
filter() 구문
arr.find()가 주어진 조건을 만족하는 첫번째 요소만 반환한다면 JavaScript의 filter() 메서드는 주어진 조건을 만족하는 원래 배열의 모든 요소를 포함하는 새 배열을 만듭니다.
filter()의 구문은 다음과 같습니다.
arr.filter(callback[, thisArg])callback은 사용자가 정의하는 함수로 element, index, array 아래 세가지 매개 변수를 받습니다. 각 매개변수에 대한 설명은 다음과 같습니다.
- element : 콜백함수에서 처리 중인 현재 엘리먼트입니다.
- index : 콜백함수에서 처리 중인 현재 요소의 인덱스입니다.
- array : filter()가 호출된 배열입니다.
filter() 사용 예시
이 예제에서는 filter() 메서드를 사용하여 3보다 큰 숫자를 반환하는 새 배열 selectNumber를 생성합니다.
See the Pen javascript - filter() by saladent (@saladent) on CodePen.
콜백 함수(num => num > 3)는 배열의 각 요소가 3보다 큰지 확인하고, 이 메서드는 원래 배열의 3보다 큰 새 배열 [4, 5]를 반환합니다.
배열에서 조건에 맞는 특정 값을 찾아주는 find(), filter() 함수에 대해서 알아보았습니다.