# find

💡 Si se quiere obtener el primer elemento emitido, sin que cumpla ninguna operación, se puede usar el operador [first](https://github.com/puntotech/rxjs-docu/blob/master/operators/filtering/first/README.md)

<details>

<summary>Signatura</summary>

#### Firma

`find<T>(predicate: (value: T, index: number, source: Observable<T>) => boolean, thisArg?: any): OperatorFunction<T, T | undefined>`

#### Parámetros

Opcional. El valor por defecto es `undefined`. Un argumento opcional para determinar el valor del `this` en la función `predicate`.

#### Retorna

`OperatorFunction<T, T | undefined>`: Un Observable del primer elemento que cumpla la condición.

</details>

## Descripción

Encuentra el primer valor que cumple una condición y lo emite.

![Diagrama de canicas del operador find](https://github.com/puntotech/rxjs-docu/blob/master/doc/operators/conditional/assets/images/marble-diagrams/conditional-boolean/find.png)

`find` busca el primer elemento del Observable fuente que cumpla la condición especificada en la función `predicate` y retorna la primera ocurrencia que exista en la fuente. Al contrario que el operador `first`, la función `predicate` es obligatoria, y no se emite un error si no se encuentra un valor válido.

## Ejemplos

**Emite la primera vez que se presiona la tecla X, y se completa el flujo**

[StackBlitz](https://stackblitz.com/edit/docu-rxjs-find?file=index.ts)

```typescript
import { find } from "rxjs/operators";
import { fromEvent } from "rxjs";

const key$ = fromEvent<KeyboardEvent>(document, "keydown");

key$.pipe(find(({ code }) => code === "KeyX")).subscribe(console.log);
// Salida: KeyboardEvent {}
```

**Emitir el primer lenguaje de tipo Multiparadigma**

Aunque haya más de un lenguaje de tipo multiparadigma, find emite únicamente el primero que encuentra.

[StackBlitz](https://stackblitz.com/edit/docu-rxjs-find-2?file=index.ts)

```javascript
import { find } from "rxjs/operators";
import { from } from "rxjs";

const language$ = from([
  { name: "Java", type: "Orientado a objetos" },
  { name: "Ruby", type: "Multiparadigma" },
  { name: "Haskell", type: "Funcional" },
  { name: "Rust", type: "Multiparadigma" },
]);

language$
  .pipe(find(({ type }) => type === "Multiparadigma"))
  .subscribe(console.log);
// Salida: { name: "Ruby", type: "Multiparadigma" }
```

**Si ningún elemento cumple la condición, se emite undefined**

[StackBlitz](https://stackblitz.com/edit/docu-rxjs-find-3?file=index.ts)

```javascript
import { find } from "rxjs/operators";
import { from } from "rxjs";

const user$ = from([
  { name: "Nya", language: "TS" },
  { name: "Juan", language: "JS" },
  { name: "Carlos", language: "Java" },
]);

user$
  .pipe(find(({ language }) => language === "PHP"))
  .subscribe(console.log, console.error, () =>
    console.log("¡Flujo completado!")
  );
// Salida: undefined, ¡Flujo completado!
```

### Ejemplo de la documentación oficial

**Encuentra y emite el primer click que ocurra en un elemento DIV**

```javascript
import { fromEvent } from "rxjs";
import { find } from "rxjs/operators";

const clicks = fromEvent(document, "click");
const result = clicks.pipe(find((ev) => ev.target.tagName === "DIV"));
result.subscribe((x) => console.log(x));
```

### Recursos adicionales

[![Source code](https://github.com/puntotech/rxjs-docu/blob/master/doc/operators/conditional/assets/icons/source-code.png)](https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/find.ts)

[Documentación oficial en inglés](https://rxjs.dev/api/operators/find)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.rxjs.es/operadores/conditional/find.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.