Array.find 자바스크립트 배열 특정 값 찾기

Array.find() 메소드는 ECMAScript 2015(ES6)에 도입되어 모든 최신 브라우저에서 지원되는 메소드입니다.

이 메소드는 배열내의 모든 요소를 검색하여 일치하는 첫 번째 요소를 리턴하거나 찾지 못한 경우 undefined를 리턴합니다.

리턴 값은 동적으로 array, string, number, object 등의 모든 자바스크립트 타입이 될 수 있습니다.

배열 내의 항목을 찾는 기능 면에서는 Array.filter() 메소드와 비슷하지만 find() 메소드는 첫 번째 값만 리턴하고 filter() 메소드는 조건에 만족하는 모든 값을 리턴합니다.

Table of Contents

find() 메소드 설명

다음은 메소드의 문법 구문입니다:

const foo = array.find((value, index, array) => {...}, thisArg);

foo 변수는 배열 내의 모든 요소가 포함될 수 있으므로 모든 타입이 될 수 있습니다.

첫 번째 매개변수는 다음의 매개변수를 가지는 콜백 함수입니다:

value: 현재 탐색 중인 요소
index: 현재 요소의 인덱스 (일반적으로 쓰이지 않음)
array: 루프를 돌고 있는 배열 (거의 사용하지 않음)
콜백 함수는 boolean 값을 리턴해야 하는데 이 값을 통해 어떤 항목을 리턴할지 결정합니다.

두 번째 매개변수인 thisArg는 this 컨텍스트를 변경할 수 있게 해줍니다.

개발자 도구에서 다음의 예제 코드를 사용하는 간단한 방법을 알아보겠습니다:

const found = ['a', 'b', 'c', 'd'].find(x => x === 'a');

console.log(found);

위의 예제에서 보는 바와 같이 이 메소드는 “a”의 얕은 복사(shallow copy)본을 리턴합니다.

console.log() 메소드를 사용하여 found 변수를 출력하면 “a”가 출력됩니다.

배열 항목을 직접 참조하지 않고 복사본이 전달되므로 잠재적인 버그를 완화하는데 도움이 됩니다.

만약 배열에 존재하지 않는 “e”를 찾으려 한다면 메소드는 undefined를 리턴합니다:

const notFound = ['a', 'b', 'c', 'd'].find(x => x === 'e');

console.log(notFound);

이 메소드는 모든 타입을 리턴하므로 다양하게 사용할 수 있습니다.

boolean, string, object, array 등 모든 타입을 다룰 수 있지만 가장 일반적인 사용 사례는 객체를 검색할 때 검색할 ID를 제공해 배열 내부의 객체를 찾는 것 입니다.

예를 들어 리턴 값을 사용하여 특정 요소를 업데이트하거나 서버로 보낼 수 있습니다.

find() 메소드는 첫 번째 요소를 성공적으로 “찾으면” 바로 리턴합니다. 따라서 값이 중복되어있는 배열을 다룰 때는 주의해야 합니다.

find() 메소드 사용 방법

다음과 같은 데이터 구조가 있다고 가정해 보겠습니다:

const items = [
  { id: '🍔', name: 'Super Burger', price: 399 },
  { id: '🍟', name: 'Jumbo Fries', price: 199 },
  { id: '🥤', name: 'Big Slurp', price: 299 }
];

여기서 속성을 검색해 원하는 항목을 찾을 수 있습니다.

이제 메소드를 사용하여 id 속성을 기반으로 요소를 찾아보겠습니다:

const found = items.find((item) => item.id === '🍟');

console.log(found);

원하는 항목을 못 찾은 경우가 있을 수 있기 때문에 데이터 사용 시 안전하게 확인하는 것이 좋습니다:

const found = items.find((item) => item.id === '🍟');

if (found) {
  console.log(`${found.name} ${(found.price / 100).toFixed(2)}`);
}

위의 예제와 같이 항목을 찾았으면 항목의 데이터를 활용해 특별한 출력을 만들 수 있습니다.

find() 메소드 없이 요소 찾기

find() 메소드의 동작을 모방한 for 루프 예제를 확인해 보겠습니다:

let found = undefined;

for (let i = 0; i < items.length; i++) {
  const item = items[i];

  if (item.id === '🍟') {
    found = item;
    break;
  }
}

먼저 found 변수를 선언하고 undefined를 할당합니다. 왜냐하면 배열에서 원하는 값을 찾지 못한 경우를 위해서 입니다.

그런 다음 루프 내에서 요소를 찾아 found 변수에 할당하고 루프를 중단 시킵니다.

위의 방법을 통해 메소드의 기능을 모방할 수 있습니다.

정리

find() 메소드를 사용하여 배열에서 원하는 방식으로 원하는 값을 가져오는 방법을 알아봤습니다.

이는 배열을 통해 선언적으로 검색하고 첫 번째로 일치하는 값을 리턴합니다.

또한 이는 filter() 메소드와 비슷한 기능을 하는데 filter() 메소드는 일치하는 모든 값을 리턴한다는 점이 다릅니다.

자바스크립트 튜토리얼

find() 메소드 설명

find() 메소드 사용 방법

find() 메소드 없이 요소 찾기

정리

관련 글