[Javascript] 배열의 특정 값 찾기 - find(), filter()

 

배열에서 특정 값을 찾는 방법을 알아보고 있습니다.

앞에서는 특정 값이 배열에 존재하는지, 존재한다면 어느 위치에 있는지 찾는 방법을 알아보았습니다.

[Javascript] 배열 특정 값 위치(index) 찾기 - indexOf(), lastIndexOf()

[Javascript] 배열 특정 값 위치(index) 찾기 - findIndex()

[Javascript] 배열에 특정 값이 포함되어 있는지 여부 체크하기

 

 

이번에는 배열에서 특정 값을 찾아서 리턴하는 함수 

find() 와 filter()를 알아보도록 하겠습니다.

 

 배열의 특정 값 찾기 - find(), filter()

1. find()
2. filter()

 

 

1. find()

arr.find(callback(element[, index[, array]])[, thisArg])

 find() 함수는.. 

배열에서 특정 값을 찾는 조건을 callback 함수를 통해 전달하여,

조건에 맞는 값 중 첫번째 값을 리턴합니다.

만약 배열에 조건을 만족하는 값이 없으면 undefined를 리턴합니다.

 

 파라미터 

callback(element, index, array) 함수

조건을 비교할 callback 함수이고, 다음 3개의 파라미터가 전달됩니다.

callback 함수에서 사용자가 테스트할 조건을 정의하고,

만약 배열의 값이 조건에 부합하여 true를 리턴하면,

해당 배열의 값이 find() 함수의 리턴 값이 됩니다.

조건에 부합하는 값을 찾으면, 그 이후의 배열값은 테스트되지 않습니다.

• element : 현재 처리중인 배열의 element입니다.
• index : 현재 처리중인 배열의 index입니다. (optional)
• array : find() 가 호출된 배열입니다. (optional)

thisArg (optional)

callback을 실행할 때 this로 사용할 객체입니다.

 

 리턴값 

callback 함수에 정의한 조건에 부합하는 배열의 첫 번째 값을 리턴합니다.

조건에 부합하는 배열 값이 없을 경우 undefined를 리턴합니다.

** 참조 : callback 함수의 조건에 부합하는 배열의 첫번째 index 값을 알아내기 위해서는 findIndex() 함수를 사용합니다.

2020/08/05 - [IT/Javascript] - [Javascript] 배열 특정 값 위치(index) 찾기 - findIndex()

 

 

 예제 

See the Pen 배열 by anna (@hianna) on CodePen.

find() 함수에 isApple()이라는 callback 함수를 전달하였습니다.

isApple() 함수는 파라미터로 입력받은 객체(element)의 name이 'apple'이면 true를 리턴합니다.

find() 함수는 파라미터로 전달된 callback 함수가 true를 리턴하면

해당 배열의 값을 리턴하고, 더 이상 나머지 배열의 값은 callback 함수로 전달하지 않습니다.

결국, find() 함수는 callback 함수에 정의된 조건에 부합하는 배열의 첫 번째 값을 리턴하는 것입니다.

그래서, 위 예제에서 find() 함수는

arr 배열의 여러 객체 중, name === 'apple'인

arr[0]의 값을 리턴하였습니다.

 

 

 

2. filter()

arr.filter(callback(element[, index[, array]])[, thisArg])

 filter() 함수는.. 

find() 함수가 특정 조건에 부합하는 배열의 첫번째 값만을 리턴한다고 한다면,

filter() 함수는 특정 조건에 부합하는 배열의 모든 값을 배열 형태로 리턴합니다.

 

 파라미터 

find() 함수와 동일합니다.

 

 리턴값 

callback 함수에 정의한 조건에 부합하는 배열의 모든 값을 새로운 배열로 리턴합니다.

조건에 부합하는 배열 값이 없을 경우 빈 배열을 리턴합니다.

 

 

 예제 

See the Pen 배열 by anna (@hianna) on CodePen.

filter() 함수에 isApple 함수를 callback 함수로 전달하였습니다.

filter() 함수는 arr 배열에서 object의 name === 'apple'인 모든 객체를 찾아서

새로운 배열로 생성하여 리턴합니다.

따라서, 위의 예제에서

filter() 함수가 리턴하는 apples는 length가 2인 배열이고,

배열의 2개의 값은 arr[0], arr[2]의 값과 같다는 것을 확인할 수 있습니다.

 

---

 

배열에서 특정 조건의 값을 찾아서 리턴하는 함수인 find(), filter() 함수에 대해서 알아보았습니다.