> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/js-frequently-used-in-react/array-methods.md).

# Array methods

[배열 메서드(Array Methods)](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4_%EB%A9%94%EC%84%9C%EB%93%9C)는 React 개발에서 **데이터를 다룰 때 자주 사용**됩니다.

* [find](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find) — 조건에 매칭되는 첫번째 아이템 반환
* [some](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some) — 아이템 중 일부라도 조건에 매칭되면 `true` 반환
* [every](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every) — 아이템 모두 조건에 매칭되어야 `true` 반환
* [includes](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) — 특정 조건의 아이템을 포함할 경우 `true` 반환
* [map](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map) — 배열을 순환 처리한 후, 새로운 배열을 반환
* [filter](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) — 배열 아이템 일부를 걸러내어 새로운 배열을 반환
* [reduce](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) — 배열 아이템을 리듀서(reducer) 함수에 전달/실행 후, 계산된 결과 값 반환

```javascript
const books = [
  { id: 'ISBN-9791191209563', title: '나의 친구 레베' },
  { id: 'ISBN-9791166113239', title: '연애의 행방' },
  { id: 'ISBN-9791158888367', title: '불온한 파랑' }
]


// find
books.find(({title}) => title.includes('레베카'))

// some
books.some(({title}) => title.length % 2 == 0)

// every
books.every(({title}) => title.length % 2 == 1)

// map → includes
books
  .map(book => book.title)
  .includes('연애의 행방')

// filter
books.filter((book, index) => index > 1)

// map → reduce
books
  .map(({id}) => +id.replace(/ISBN-/, ''))
  .reduce((result, next) => result + next, 0)
```