JavaScript Array find() 함수

Javascriptarray

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

codechachaCopyright ©2019 codechacha