자바스크립트 - 배열의 특정 요소를 찾아 반환하기 (find() 함수)

find() 함수는 배열에서 특정 요소를 찾게 하는 함수다.

주의할 점은, 이 함수는 가장 첫 번째로 찾은 요소만 반환하고 종료된다.

예를 들어. [100, 200, 300]이라는 배열에서 100이 넘는 요소를 찾고 싶어 find() 함수 사용 시, 가장 먼저 찾은 200만 반환한다.

 

 

예제: 배열에서 100 이상 요소를 찾아 반환하기.

const nums = [100, 200, 300];

const res = nums.find(num => num > 100);

console.log(res); // 200

결과는 가장 첫 번째로 찾은 200만 반환.

만약 배열 속, 300이 200전에 위치해있었으면 (예: [100, 300, 200]),  300을 반환했을 것.

 

 

 

find() 함수 사용 시, 주의점.

const nums = [100, 200, 300];

const res = nums.find(); // TypeError: undefined is not a function

find() 함수 실행 시, 함수 혹은 인라인 함수를 인수로 받지 않으면 에러가 난다.

 

 

 

예제: 배열 속, 찾으려는 요소가 없는 경우.

const nums = [100, 200, 300];

const res = nums.find(num => num > 400);

console.log(res); // undefined

배열 속, 찾으려는 요소가 없는 경우, find() 함수는 undefined를 반환한다.

 

 

 

예제: find() 함수 사용 시, 읽기 쉽게 코드 짜기.

const nums = [100, 200, 300];

const isOver100 = num => num > 100;

const res = nums.find(isOver100);

console.log(res); // 200

첫 예제와 동일하게 결과를 내는 코드지만, 읽기 쉬워진 코드.

 

 

 

예제: find() 함수 실행 중, 현재 요소, 현재 요소의 인덱스, 배열 전체 접근하기.

const nums = [100, 200, 300];

const res = nums.find((num, idx, arr) => {
	console.log(num, idx, arr);
	// 100 0 [ 100, 200, 300 ]
	// 200 1 [ 100, 200, 300 ]
	// 300 2 [ 100, 200, 300 ]
});

filter() 함수와 동일하게 find() 함수도 실행 중에 현재 요소, 현재 요소의 인덱스, 배열 전체를 접근할 수 있다.