No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
7 Hrs
29 Min
33 Seg

Recorriendo Arrays con .find(), .forEach() y .some()

27/30
Recursos

Para continuar con otros métodos para recorrer arrays, aprenderás find, forEach y some.Utilizaremos el siguiente array de objetos para los ejemplos de los métodos:

var articulos = [
  { nombre: "Bici", costo: 3000 },
  { nombre: "TV", costo: 2500 },
  { nombre: "Libro", costo: 320 },
  { nombre: "Celular", costo: 10000 },
  { nombre: "Laptop", costo: 20000 },
  { nombre: "Teclado", costo: 500 },
  { nombre: "Audifonos", costo: 1700 },
]

Cómo utilizar el método find

El método find consiste en encontrar el primer elemento de un array que cumpla con la condición especificada en la función (callback). Si ningún elemento cumpla con la condición, retornará undefined.

El método find recibe dos argumentos:

  • La función que itera y evalúa cada elemento del array hasta encuentre uno que cumpla con la condición especificada (obligatorio).
  • Un objeto al que puede hacer referencia el contexto this en la función. Si se lo omite, será undefined.
array.find(function(), thisArg)

La función, que recibe como argumento, utiliza tres parámetros opcionales:

  • El valor actual del elemento iterado. Es decir, si es la primera iteración, será el primer elemento, y así sucesivamente.
  • El índice del elemento iterado. Es decir, si es la primera iteración, será el índice 0, y así sucesivamente.
  • El array que está iterando.
array.find(function(element, index, array))

Practiquemos el uso del método find

Utilicemos el array articulos que definimos para encontrar algún artículo que su nombre sea Laptop.

Entonces utilizamos el método find que retorne la condición que necesitamos. Recuerda que el primer parámetro de la función callback es cada uno de los elementos del array.

var algunArticulo = articulos.find(function (articulo) {
  return (articulo.nombre = "Laptop")
})
console.log(algunArticulo)
/* 
{ nombre: 'Laptop', costo: 3000 }
*/

Cómo utilizar el método forEach

El método forEach de los arrays consiste en ejecutar una función (callback) para cada uno de los elementos iterados. Iterar significa repetir una acción varias veces. Este método no retorna ningún valor.

Este método recibe dos argumentos:

  • La función que itera cada elemento del array (obligatorio).
  • Un objeto al que puede hacer referencia el contexto this en la función. Si se lo omite, será undefined.
array.forEach(function(), thisArg)

La función, que recibe como argumento el método forEach, utiliza tres parámetros opcionales:

  • El valor actual del elemento iterado. Es decir, si es la primera iteración, será el primer elemento, y así sucesivamente.
  • El índice del elemento iterado. Es decir, si es la primera iteración, será el índice 0, y así sucesivamente.
  • El array que está iterando.
array.forEach(function(element, index, array))

Practiquemos el uso del método forEach

Utilicemos el array articulos que definimos para mostrar todos los artículos.

Entonces utilizamos el método forEach y que ejecute la función console.log para cada uno de los elementos. Recuerda que el primer parámetro de la función callback es cada uno de los elementos del array.

articulos.forEach(function (articulo) {
  console.log(articulo)
})
/* 
{ nombre: 'Bici', costo: 3000 }
{ nombre: 'TV', costo: 2500 }
...
{ nombre: 'Audifonos', costo: 1700 }
*/

Cómo utilizar el método some

El método somees inmutable y consiste retornar un valor lógico verdadero si existe al menos un elemento que cumpla la condición establecida en la función (callback).

El método some recibe dos argumentos:

  • La función que itera y evalúa cada elemento del array hasta que al menos uno cumpla con la condición especificada (obligatorio).
  • Un objeto al que puede hacer referencia el contexto this en la función. Si se lo omite, será undefined.
array.some(function(), thisArg)

La función, que recibe como argumento el método some, utiliza tres parámetros:

  • El valor actual del elemento iterado. Es decir, si es la primera iteración, será el primer elemento, y así sucesivamente.
  • El índice del elemento iterado. Es decir, si es la primera iteración, será el índice 0, y así sucesivamente.
  • El array que está iterando.
array.some(function(element, index, array))

Practiquemos el uso del método some

Utilicemos el array articulos que definimos para saber si existe al menos un artículo con el costo menor o igual que 700.

Entonces utilizamos el método some que retorne la condición que necesitamos. Recuerda que el primer parámetro de la función callback es cada uno de los elementos del array.

var existeArticulo = articulos.some(function (articulo) {
  return articulo.costo <= 700
})
console.log(existeArticulo) // true

Próximos pasos

Existen más métodos mutables e inmutables de arrays. Si quieres aprender y profundizar sobre este tema, que es fundamental como desarrollador de JavaScript, toma el Curso de Manipulación de Arrays en JavaScript.

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 322

Preguntas 48

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Por si a alguien le quedó alguna duda con respecto a la diferencia entre find y filter:

El método find () devuelve el primer valor que coincide de la colección. Una vez que coincida con el valor en los resultados, no verificará los valores restantes en la colección de matriz.

El método filter () devuelve los valores coincidentes en una matriz de la colección. Verificará todos los valores de la colección y devolverá los valores coincidentes en una matriz.

A modo de recopilación:

  • find() : Devuelve el primer elemento del array que cumpla con la condición dada
  • foreach() : Ejecuta lo que le definamos una vez por cada elemento de nuestro array
  • some() : Comprueba si al menos un elemento del array cumple con la condición que le damos
  • filter() : Devuelve todos los elementos del array que cumplan con la condición dada
    Acá te dejo la documentación de cada uno: find() - foreach() - some() - filter()

Esta pregunta me la hicieron en una entrevista:
¿Cual es la diferencia entre find y filter ?

filter retorna todas las coincidencias y find retorna solo la primer coincidencia

Mi recomendación aprendan a la perfección a utilizar estos métodos y combinen los con un if, else if y generen nuevos arreglos con push…no se queden solo con la clase, busquen ejercicios complejos.
Estos métodos son los primeros que te evalúan en una prueba técnica para algún trabajo como desarrollador.

var articulos = [
    { nombre: "Bici", costo: 3000 },
    { nombre: "TV", costo: 2500 },
    { nombre: "Libro", costo: 320 },
    { nombre: "Celular", costo: 10000 },
    { nombre: "Laptop", costo: 20000 },
    { nombre: "Teclado", costo: 500 },
    { nombre: "Audifonos", costo: 1700 },
];

//filter Genera un nuevo array
var articulosFiltrados = articulos.filter(function(articulo){
    return articulo.costo <= 500; //articulos con precio menor a 500 pesos
});

//map Ayuda a mapear ciertos elementos de los articulos, es necesario generar nuevo array
var nombreArticulos = articulos.map(function(articulo){
    return articulo.nombre;
});

//find Ayuda a encontrar algo dentro del array articulos
var encuentraArticulo = articulos.find(function(articulo){
    return articulo.nombre === "Laptop";
});

//forEach No es necesario generar nuevo array, se utiliza para realizar un recorrido de un array principal
articulos.forEach(function(articulo){
    console.log(articulo.nombre);
});

//some Se genera nuevo array, regresa un condición en Boolean
var articulosBaratos = articulos.some(function(articulo){
    return articulo.costo <= 700;
});```

Muy buena clase! Es importante conocer como funcionan los métodos para no confundirlos y sacarles el máximo provecho. Las diferencias más importantes son:
El .forEach() NO crea un nuevo array y el .map() sí lo hace.
El .filter() crea un nuevo array con los objetos que cumplan una condición, el .some() solamente indica si hay o no algún objeto que cumpla dicha condición.
El .find () devuelve SOLO el primer objeto que cumpla con la condición.
EJ: Si en tu array de artículos tienes una bici de $800 y luego un celular de $800, si usas un .find() para buscar un artículo de dicho costo aparecerá solo la bicicleta, si deseas ambos tienes que usar un .filter().

Espero que les sirva y háganme saber si me equivoqué en algo, saludos.

Para visualizar los arrays con objetos, en vez de usar
console.log( articulos) Les recomiendo utilizar console.table( articulo) 🙌🏻

Que buen profesor! Explica muy bien.

¿y si no encuentran lo que buscan?

find() -> regresa “undefined” si no encuentra ningún elemento que cumpla con la condifción del filtro
some() -> regresa “false” cuando ningún elemento coincide con la condición
forEach() -> regresa “undefined” en un array vacío.



  • El método forEach() llama a una función (una función de devolución de llamada) una vez para cada elemento de la matriz.

  • El método map() crea una nueva matriz al realizar una función en cada elemento de la matriz.

  • El método filter() crea una nueva matriz con elementos de matriz que pasa una prueba.

  • El método reduce() ejecuta una función en cada elemento de la matriz para producir (reducirlo) un solo valor.

Aquí algunas notas de la clase, Platzicoders:
.

.
Espero que les ayude.
(⌐■_■)

Un dato….
Si ponen en vez de “Console.log” / “Console.table” les mostrará la info pero en forma de tabla.

.find : devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada. En cualquier otro caso se devuelve undefined.
.forEach: ejecuta la función indicada una vez por cada elemento del array.
.some : comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada.

El método find solo devuelve el primer valor que coincida con la condición, si buscar por ejemplo un costo de 1000 y hay varios productos, devolverá el primero.

🤔 Los métodos tienen un uso exclusivo para una ocasión especifica. Diferenciarlos nos permite realizar una mejor implementación de los mismos.

Si solo el metodo .some() devuelve true o false… para que genera un nuevo Array?

var articulos = [
    { nombre: "Bici", costo: 3000 },
    { nombre: "TV", costo: 2500 },
    { nombre: "Libro", costo: 320 },
    { nombre: "Celular", costo: 10000 },
    { nombre: "Laptop", costo: 20000 },
    { nombre: "Teclado", costo: 500 },
    { nombre: "Audifonos", costo: 1700 }
];

var encuentraArticulo = articulos.find(function(articulo){
    return articulo.nombre === "Laptop";
});

articulos.forEach(function(articulo){
    console.log(articulo.nombre);
});

var articulosBaratos = articulos.some(function(articulo){
    return articulo.costo <= 700;
});

¡Hola Platzinautas! Les comparto este apunte sobre Métodos para recorrer Arrays en JS. 😃

var cars = [];
var year = 2010;
function addCar(marca, modelo, anio){
    this.marca = marca;
    this.modelo = modelo;
    this.anio = anio;
}
for (let index = 0; index < 10; index++) {
    var carName = "auto"+ index; //nombre unico modelo de carro
    cars[index] = new addCar(carName, "model", year);
    year++; //incremento de cada año
    console.log(cars[index]);
}


var cars = [];
var year = 2010;

function addCar(marca, modelo, anio){
    this.marca = marca;
    this.modelo = modelo;
    this.anio = anio;
}

for (let index = 0; index < 10; index++) {
    var carName = "auto"+ index; //nombre unico modelo de carro
    cars[index] = new addCar(carName, "model", year);
    year++; //incremento de cada año
    console.log(cars[index]);
}

//Metodo 1
//Me ayuda a filtrar todos los autos con un año menor o igual a 2014
var filtroAutos = cars.filter(function(carro){return carro.anio <= 2014});

//Metodo 2
//me ayuda a mapear los autos, esto me retorna todos las marcas de los autos
var nombreAutos = cars.map(function(carro){return carro.marca});

//Metodo 3
//Me ayuda a buscar todos los autos que se llamen auto4
var filtroAutos = cars.find(function(carro){return carro.marca === "auto4"});

//metodo 4
//me ayuda a filrar sin necesidad de crear una nueva variable
cars.forEach(function(car){console.log(car.marca);});

//metodo 5
//me ayuda a validar si una funcion es verdadera solo retorna true o false… Solo me ayuda a saber si algo es verdad (ejemplo si hay autos viejos en mi array de objetos)
var autosViejos = cars.some(function(car){return car.anio < 2014;});

Apuntes completos en Notion

Este es un excelente sitio para aprender y conocer todos los métodos que existen de los Arrays y este es un excelente sitio para practicar

Operaciones sobre array:

  • find()
  • forEach()
  • some(): regresa un boolean
var articulos = [
  { nombre: "Tv", costo: 1500 },
  { nombre: "PC", costo: 4000 },
  { nombre: "Bombillo", costo: 1 },
  { nombre: "Mesa", costo: 100 },
];

// .filter = filtra segun lo necesitemos
var filtro = articulos.filter(function (articulo) {
  return articulo.costo <= 1000;
});

// .map = regresa el parametro del objeto
var nombre = articulos.map( function (articulo) {
    return articulo.nombre
})

//.find = encuentra el objeto buscado segun el parametro
var encuentra = articulos.find(function (articulos) {
    return articulos.nombre === "PC"
})

//.foreach = listar 
articulos.forEach(function (articulos) {
    console.log(articulos.nombre);
})

//some = comprobar si existe o no
var baratos = articulos.some(function (articulos) {
    return articulos.costo <= 1000
})```

Diego, eres un gran profesor!

//Javascript te permite crear arrays de objetos
var cumpleannos = [
    {persona:"Luna",dia:13},
    {persona:"Mia",dia:8},
    {persona:"Valery",dia:19},
    {persona:"Arturo",dia:3},
    {persona:"Marisol",dia:3},
    {persona:"Leo",dia:18},
    {persona:"Leslie",dia:24},
    {persona:"Mia",dia:22},
    {persona:"Jose",dia:31},
    {persona:"Mia",dia:4},
]
/* METODO FILTER Crea un nuevo arreglo y con la funcion pasando como parametro cada objeto, regresa al arreglo que se esta creando
los objetos que cumplen con la condicion en el return*/
var cumpleannosPosterioresA10 = cumpleannos.filter(function(cumpleanno){
    return cumpleanno.dia >= 10;
});
/* METODO MAP Crea un nuevo arreglo ya no con objetos, sino con los valores del valor que necesitamos */
var nombresCumpleanneros = cumpleannos.map(function(nombreCumpleannero){
    return nombreCumpleannero.persona;
});
/*METODO FIND Sirve para buscar dentro de un arreglo en este caso dentro de varios objetos el valor buscado y 
crea un nuevo arreglo con la busqueda, el detalle es que al parecer solo retorna el primer valor encontrado, en caso
que este se encuentre duplicado */
var buscarCumpleannero = cumpleannos.find(function(cumpleannero){
    return cumpleannero.persona === "Mia";
});
/*METODO FOREACH A diferencia de los anteriores no genenra un arreglo solo obtiene los valores indicados en el arreglo*/
cumpleannos.forEach(function(cumpleanno){
    console.log(cumpleanno.persona);
});

/* METODO SOME Te permite validar mediante un true o false si se cumple una condicion dentro de tus arreglos */
var nombreMia = cumpleannos.some(function(nombre){
    return nombre.persona === "Mia";
}
);```

Lo ultimo que dice es que en la siguiente clase vamos a ver dos metodos mas, pero la clase siguiente es el final del curso.
Falto una clase?

mi pregunta es la siguiente ,para que nos serviría en el futuro estos metodos(filter, map ,find) para que nos serviria ?

Diferencia entre find y filter.

.
find devuelve la primera coincidencia, filter devuelve todas

//Método para encontrar algo en el array, no modifica sino que crea uno nuevo
var encuentraArticulo = articulos.find(function(articulo) {
    return articulo.nombre === "Laptop";
})

//Método que no generar un nuevo array simplemente hace un filtrado, y es la forma de presentar valores o propiedades que nos interesan
articulos.forEach(function(articulo){
    console.log(articulo.nombre)
});

//Método que nos devuelve la validación de una condición específica pero no me muestra cuales son, para ello utilizo filter.
var articulosBaratos = articulos.some(function(articulo){
    return articulo.costo <= 700;
})

Usen funciones flecha, es buena practica y te deja el codigo mas limpio.

En mi opinion esta es de las clases mas importantes para todo programador junior.

Navegando por interted me encontre con esta pagina, como una guia para poder aprender JavaScript en caso de queles pueda servir JS

wo0w

El método some() comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada.

Documentación sobre el método some():
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/some

No había usado some(), pero se me ocurrió hacer un filtro de esta manera:

let articulos = [
    { nombre: "Bici", costo: 3000 },
    { nombre: "TV", costo: 2500 },
    { nombre: "Libro", costo: 320 },
    { nombre: "Celular", costo: 10000 },
    { nombre: "Laptop", costo: 20000 },
    { nombre: "Teclado", costo: 500 },
    { nombre: "Audifonos", costo: 1700 }
];

let articulosBaratos = articulos.some(articulo => {
  return articulo.costo <= 700 ? console.log(articulo.nombre) : '';
});

Si la condición se cumple me retorna el nombre de los artículos que cuyo costo sea menor a 700

some retorna true o false. Dependiendo si se cumple la validación ejecutada.

const articulos = [
  { nombre: 'Bici', costo: 800000 },
  { nombre: 'Tv', costo: 2000000 },
  { nombre: 'Radio', costo: 350000 },
  { nombre: 'Movil', costo: 3000000 },
  { nombre: 'Cuaderno', costo: 50000 },
  { nombre: 'PC', costo: 1900000 },
  { nombre: 'Mouse', costo: 30000 },
  { nombre: 'Escoba', costo: 10000 }
];

let articulosFitrados = articulos.filter( ( {costo} ) => costo < 500000 ); // filtra todos los valores semejantes
console.log(articulosFitrados);

let nombreFitrados = articulos.map( ( {nombre} ) => nombre);
console.log(nombreFitrados);

let buscarArticulo = articulos.find( ( {nombre} ) => nombre === 'Cuaderno' ); // Devuelve el primer valor que encuentra
console.log(buscarArticulo);

let printArticulos = articulos.forEach( ( {nombre, costo} ) => console.log(nombre, costo)); // Itera el array como un for of

let exitenEsosArticulos = articulos.some( ( {costo} ) => costo <= 500000 ); // Devuelve Verdader cuando si existen o falso cuando no
console.log(exitenEsosArticulos);
let i = 0;
var articulosComprados = [
    {nombre:'Bici',costo:800000},
    {nombre:'Tv',costo:2000000},
    {nombre:'Radio',costo:350000},
    {nombre:'Movil',costo:3000000},
    {nombre:'Cuaderno',costo:50000},
    {nombre:'PC',costo:1900000},
    {nombre:'Mouse',costo:30000},
    {nombre:'Escoba',costo:10000}
];
var buscaArticuloCosto = articulosComprados.find(function(articulo){
    if(articulo.nombre === 'PC'){
        console.log('El articulo PC ya existe!!');
    }
});

buscaArticuloCosto;

var iteraArticulos = articulosComprados.forEach(function(articulo){
    i++;
    console.log(`Articulo #${i}. ${articulo.nombre}`);
});

var validaArticulo = articulosComprados.some(function(articulo){
    return articulo.costo<=30000;
});
console.log(`¿Existe al menos 1 articulo de 30.000 o menos? ${validaArticulo ?'Si' :'No'}`);

Apliqué el articulo.nombre === “Laptop” con el método FILTER y de igual forma funcionó. Dicho esto…
¿Cuál sería el mejor método a elegir y por qué?

Buena clase.
Aunque parece que algo hizo falta, pues el siguiente video es la despedida…

var articulos = [{
        nombre: "Bici",
        costo: 3000
    },
    {
        nombre: "TV",
        costo: 2500
    },
    {
        nombre: "Libro",
        costo: 320
    },
    {
        nombre: "Celular",
        costo: 1000,
    },
    {
        nombre: "Laptop",
        costo: 20000
    },
    {
        nombre: "Teclado",
        costo: 500
    },
    {
        nombre: "Audifonos",
        costo: 1700
    },
];
// Metodo .find

// Este metodo nos ayuda a encontrar algo adentro de este articulo en este ejemplo, este me generara un nuevo array con el valor que le puse este valida un true o un false si existe si existe me regresa un resultado si no se cumple no me devuelve nada

var encuentraArticulo = articulos.find(function (articulo) {
    return articulo.nombre === "Laptop"
});

// Metodo forEach
// forEach no me genera un array simplemente hace un filtrado sobre el array
// en que queremos buscar sin modificar cosas
// mandamos a llamar a

articulos.forEach(function (articulo) {
    console.log(articulo.nombre);
});

// esto me regresa son los valores de nombre de mi array

// Bici
// TV
// Celular
// Laptop
// Teclado
// Audifonos
// Libro

// metodo .some()
// .some() Nos regresa una validacion de verdadero o falso para articulos que cumplan
// con esta validacion

var articulosBaratos = articulos.some(
    function(articulo) {
        return articulo.costo <= 700;
    }
);
//  en este caso ve devolvera un true por que tenggo articulos menosres a 700

//  esto nos puede ayudar si trabajamos en una tienda digital y el usuario quiere filtrar si hay articulos menorews a ese precio

Find. te devuelve el primero elemento del array que coincida con la condición.

ForEach. Recorre el array o elemento del array seleccionado.

some. te devuelve literalmente un boolean, si alguno de los elementos del array, cumple con la condición descrita dentro del some. Devuelve true, de lo contrario devuelve False.

/**
 * 3. find() ---> encontrar algo dentro del array
 * genera un nuevo array
 */

 var encuentraArticulo = articulos.find(function(articulo){
     return articulo.nombre === "Laptop"
 });

 console.log(encuentraArticulo)
 // { nombre: 'Laptop', costo: 20000 }

 /**
  * foreach ---> no genera un array nuevo
  */

  articulos.forEach(function (articulo){
        console.log(articulo.nombre);
  });

  /**
   * Bici
TV
Libro
Celular
Laptop
Teclado
Audifonos
   */

   // 4. some() --> regresa una validacion de veradero o falso
   // se genera un nuevo arreglo

   var articulosBaratos = articulos.some(function(articulo){
        return articulo.costo <= 700
   });

   console.log(articulosBaratos);

   // true ```

Si existe mas de 1 articulo con el mismo nombre, find solo te devuelve el primero que encuentra.

Algunos métodos son muy similares, aunque son exclusivamente para una ocasión especifica

Importante poder saber que métodos regresar un nuevo array y cuáles no. Por ejemplo forEach no regresa un nuevo array.

Me parece un poco confuso a la hora de usar cada uno.

Sigan a este canal de youtube.
https://www.youtube.com/watch?v=R8rmfD9Y5-c

Hola a todos.
Estuve mirando sobre cuál es la diferencia entre map() y forEach() y la verdad me costó saber cuál era.
Pero la diferencia está en el resultado y la variable. Por ejemplo, para el método map(), tú creas una nueva variable para guardar el nuevo array generado.
En cambio el método forEach() no me modifica el array original ni me genera uno nuevo, pero en cambio el resultado no será como un array sino como si se estuviera iterando sobre cada elemento y me diera un resultado independiente. (Creo que de ahí viene el nombre for each)
Espero puedan entenderme, buena suerte.

26/30 Recorriendo Arrays con .find(), .forEach() y .some()

Para recorrer arrays tenemos tres métodos importantes:

  • find
  • forEach
  • some

Utilizaremos un array de objetos llamado “artículos” para los ejemplos.

El método find busca el primer elemento de un array que cumpla con una condición dada, y si no encuentra ninguno retorna undefined.

Se le pasa una función como argumentos que evalúa cada elemento del array y tiene como parámetros el elemento actual, su índice y el array completo.

Por ejemplo, para encontrar un objeto en “artículos” que tenga el nombre “Laptop”, podemos utilizar:

var algunArticulo = articulos.find(function (articulo) {
		return articulo.nombre = "Laptop"
})
console.log(algunArticulo)

El método forEach ejecuta una función para cada elemento del array. No retorna ningún valor. Al igual que el método find, se le pasa una función como argumento que tiene como parámetros el elemento actual, su índice y el array completo. Por ejemplo, para mostrar cada objeto de “articulos” en la consola, podemos utilizar:

articulos.forEach(function (articulo) {
		console.log(articulo)
})

El método some retorna true si al menos un elemento del array cumple con una condición dada, y false si no hay ninguno que la cumpla. Se le pasa una función como argumento que evalúa cada elemento del array y tiene como parámetros el elemento actual, su índice y el array completo. Por ejemplo, para saber si hay algún objeto en “articulos” que tenga un costo menos o igual a 700, podemos utilizar:

var existeArticulo = articulos.some(function (articulo) {
		return articulo.costo <= 700
})
console.log(existeArticulo) // true

El profe Diego se equivocó en su explicación. El método .find() NO devuelve un array, devuelve el elemento (en su tipo) de lo que sea que esté compuesto el array sobre el que esté operando. Si el array estuviera compuesto de arrays anidados ahí sí devolvería un array.

Hola, aca le dejo este link https://jsfiddle.net/ por si gustan, mas comodo que trabajar desde el navegado.
Saludos

Una manera mas rápida de filtrar

diferencia entre .map y forEach:

  • map: retorna un arreglo con la información solicitada.

  • forEach: retorna una lista con la información solicitada.

//Nuestro Array
var articulos = [
    { nombre: "Bici", costo: 3000 },
    { nombre: "Tv", costo: 2500 },
    { nombre: "Libro", costo: 320 },
    { nombre: "Celular", costo: 10000 },
    { nombre: "Laptop", costo: 20000 },
    { nombre: "Teclado", costo: 500 },
    { nombre: "Audifonos", costo: 1700 }
];

/*********Formas o metodos de recorrer nuestro Array***********/
//Filtrar objetos del Array, metodo Filter (Crea un nuevo array)
var articulosFiltrados = articulos.filter(function(articulo){
    return articulo.costo <= 500;
});


//Segundo metodo, Map, recorre todo el array y todos los valores solicitados (Crea un nuevo array)
var nombreArticulos = articulos.map(function(articulo){
    return articulo.nombre;
});

//Tercer metodo, Find, busca valor especifico en el array (Crea un nuevo array)
var encuentraArticulo = articulos.find(function(articulo){
    return articulo.nombre === "Laptop";
});

/*Cuarto metodo, ForEach, para traer solo los valores o propiedades que 
queremos de nuestro array (No crea un nuevo array, llamamos el que a tenemos)*/
articulos.forEach(function(articulo){
    console.log(articulo.nombre);
});

//Quinto metodo, Some, para realizar validacion si existe o no un valor, regresa true o false
var articulosBaratos = articulos.some(function(articulo){
    return articulo.costo <= 700;
});
var  articulos = [
	{ nombre: "Bici", costo: 3000 },
	{ nombre: "Tv", costo: 2500 },
	{ nombre: "Libro", costo: 320 },
	{ nombre: "Celular", costo: 10000 },
	{ nombre: "Laptop", costo: 20000 },
	{ nombre: "Teclado", costo: 500 },
	{ nombre: "Audífonos", costo: 1700 },
] ;

Find: éste método no va a modificar el array que ya tenemos, sino que va a generar un nuevo array con el valor que le pasemos, si es que lo encuentra, find va a validar un true o un false, si el artículo existe lo va a regresar, si no existe no lo hace.

var encuentraArticulo = articulos.find(function(articulo){
	return articulo.nombre === "Laptop"
});

Estamos generando un array que va a tener como valor “articulos.find”(el array del ejemplo anterior), este a su vez va a tener una function que como parámetro va a tener “articulo”, es decir, vamos a buscar un artículo, y pedimos que la función nos retorne del array “articulos” un articulo cuya referencia sea estrictamente igual a “Laptop”. si tiene el articulo llamado “Laptop”, que lo regrese o retorne, si no lo tiene que no regrese nada.

> encuentraArticulo
< { nombre: "Laptop", costo: 20000 }

Ahora éste nuevo array “encuentraArticulo” ya tiene el artículo del ejemplo.

ForEach (): este método no va a generar un nuevo array, simplemente va a hacer el filtrado sobre “articulos” y nos va a regresar cosas:

articulos.forEach(function(articulo){
	console.log(articulo.nombre);
});

Como no va a generar un nuevo array, hay que llamar directamente articulos.forEach(), adentro del método generamos una función, como parámetro colocamos el articulo que queremos que nos traiga, y le pedimos nos imprima los nombres de los artículos que tiene este array.

Si en vez de .nombre colocamos .costo, nos traería los mismos. Esto nos puede servir por ejemplo, si estamos trabajando en un e-comerce, y el usuario que esta intentando comprar un artículo y hace ciertos filtros dentro del sitio, para ver productos de cierto costo o marca, de ésta manera programaríamos los filtros del e-comerce.

Some(): nos va a regresar una validación de verdadero o falso, para artículos que cumplan con esa validación.

var articulosBaratos =  articulos.some(function(articulo) {
	return articulo.costo <= 700;
});

Con éste método creamos un nuevo array, la función nos va a ayudar a validar, si un artículo tiene un costo menor o igual a 700 pesos.

> articulosBaratos
< true

Nos regresa true, porque nos dice, si hay artículos menores a 700 pesos, si no se cumple la condición, nos regresa false.

METODO FILTER:
El metodo filter crea un nuevo array en donde se almacenan
solo los objetos que pasaron el filtro que se le indico en
la funcion.

METODO FIND:
El metodo find es un metodo de busqueda no de filtrado,
por lo que siempre retornara el primer objeto que
encuentre que cumpla con los parametros establecidos
por la funcion entonces dejara de iterar.

De la manera en que lo entendi la diferencia entre el metodo Find() y Filter() es: mientras filter itera por todo el array filtrando los objetos que cumplan con los parametros pasados por la funcion retarnodolos al nuevo array. Find es un metodo de busqueda, por lo que solo retornara el primer objeto que encuentre con los parametros pasados por la funcion y cuando esto ocurra ya no iterara mas por el array.

Les comparto mi trabajo

var articulos=[
    {nombre:"bici", costo:300, categoria:"deportes"},
    {nombre:"tv", costo:280,categoria:"tecnología"},
    {nombre:"libro", costo:60,categoria:"osio"},
    {nombre:"celular", costo:423,categoria:"tecnología"},
    {nombre:"trotadora", costo:253,categoria:"deportes"},
    {nombre:"revista", costo:4,categoria:"osio"},
    {nombre:"laptop", costo:1423,categoria:"tecnología"},
    {nombre:"lima", costo:5,categoria:"belleza"},
    {nombre:"licuadora", costo:75,categoria:"hogar"},
    
]

var categoriaArticulos=articulos.filter(function(articulo){
    return articulo.categoria==="tecnología"
})
console.log(`Los artículos filtrados por la categoría son :`)

console.log(categoriaArticulos)

var precios=articulos.filter(function(articulo){
    return articulo.costo>60 && articulo.costo<=300
})
console.log(`Los artículos filtrados por rango de precio son:`)

console.log(precios)

var nombre=articulos.filter(function(articulo){
    return articulo.nombre.includes("li")
})
console.log(`Los artículosque coinciden con el criterio de busqueda son:`)
console.log(nombre);

Ecomerce.

El celular y los audífonos más caros el curso jajaja

Se nota cuando un profesor sabe un tema, lo explica tan simple

🤖🤖🤖
find() : Devuelve el primer elemento del array que cumpla con la condición dada
foreach() : Ejecuta lo que le definamos una vez por cada elemento del array.
some() : Comprueba si al menos un elemento del array cumple con la condición que le demos.
filter() : Devuelve todos los elementos del array que cumplan con la condición dada.

Dejo mis apuntes

//.find nos ayuda a encontrar algo dentro de articulos
var encuentraArticulo = articulos.find(function (articulo) {
    return articulo.nombre === "Sillon"
});
console.log(encuentraArticulo);

//.forEach no crea un nuevo array
articulos.forEach(function (articulo) {
    console.log(articulo.nombre);
});

//.some devuelve true o false dependiendo si cumple la condición
var articulosBaratos = articulos.some(function (articulo) {
    return articulo.costo <= 700;
});
console.log(articulosBaratos);

Aqui les dejo los 5 metodos con arrow functions:

//Metodos de recorrido

const items = [
	{ nombre: 'Celular', precio: 1000 },
	{ nombre: 'Computadora', precio: 1500 },
	{ nombre: 'Calculadora', precio: 2000 },
	{ nombre: 'Teclado', precio: 100 },
	{ nombre: 'Raton', precio: 70 },
	{ nombre: 'Bicicleta', precio: 30000 },
];
//Metodo filter
const itemsFilter = items.filter(item => item.precio <= 500);
console.log(itemsFilter);

//Metodo map

const nameItems = items.map(item => item.nombre);
console.log(nameItems);

//Metodo find

const itemFind = items.find(item => item.nombre === "Calculadora");
console.log(itemFind);

//Metodo foreach 

items.forEach(item => console.log(item.nombre));

//Metodo some

const cheapItems = items.some(item => item.precio <= 500);
console.log(cheapItems);

Apuntes resumidos para quien le interese y sirva:

Más métodos

  1. Find: funciona con false y true, si existe el artículo es true y lo regresa, si no existe es false y no va a regresar nada.
var encuentraArticulo = articulos.find(function(articulo){
    return articulo.nombre === "Laptop"
});
undefined
encuentraArticulo
{nombre: "Laptop", costo: 20000}
  1. For each: a diferencia de métodos pasados, este no crea arrays nuevos.
articulos.forEach(function(articulo){
    console.log(articulo.nombre)
});

Bici
Tv
Libro
Celular
Laptop
Teclado
Audífonos

Regresa la propiedad deseada únicamente.

  1. Some: Regresa una validación de true o false a la condición que establezca la función
var articulosBaratos = articulos.some(function(articulo){
    return articulo.costo <= 700;
});

articulosBaratos
true

Solo indica que sí, sí hay artículos que cuesten menos de 700.

otra forma de llamar al foreach

articulos.forEach(articulo => {
    console.log(articulo.nombre);
});```

El método find() devuelve un objeto (el primero coincidente), el método filter() devuelve un array con todas las coincidencias.

var articulos  = [
    {nombre: "bici", costo: 3000 },
    {nombre: "tv", costo: 2500 },
    {nombre: "libro", costo: 320 },
    {nombre: "celular", costo: 10000 },
    {nombre: "laptop", costo: 20000 },
    {nombre: "teclado", costo: 500 },
    {nombre: "audifonos", costo: 1700 },
];

var articulosFiltrados = articulos.filter(function(articulo){
    return articulo.costo <= 500
});

var nombreArticulos = articulos.map(function(articulos){
    return articulos.nombre
});
var encuentraArticulos = articulos.find(function(articulos){
    return articulos.nombre === "laptop"
});

var articulosBaratosdd = articulos.some(function(a){
    return a.costo >= 700
});

articulos.forEach(function(a){
    console.log(a.nombre)
    console.log(a.costo)
});
  • .find(): Como su nombre lo dice, es utilizada estrictamente para buscar un elemento en especifico dentro de nuestra array.

  • .forEach(): Este método en comparación con los demás anteriores no generara ningún array nuevo, si no que caminará sobre el array original y dependiendo las condiciones que le pongamos a dicho método nos generará algunas cosas.

  • .some(): este método nos retornara un nuevo arreglo de artículos que cumplan con la validación que nosotros le asignemos en dicho método. Pero debemos tener en cuenta que esta validación será de valor booleano, solo retornará verdadero o falso.

// Recorrer Array
let tasks = [{
        description: "Enviar mail de status laboral",
        priority: "HIGH",
        done: false,
    },
    {
        description: "Buscar ropa de la lavandería",
        priority: "LOW",
        done: false,
    },
    {
        description: "Pagar el seguro",
        priority: "HIGH",
        done: false,
    },
    {
        description: "Pasar por el super mercado",
        priority: "LOW",
        done: false,
    },
];

// filter() devuelve un nuevo array con los elementos que coinciden con el filtro.
const tasksHigh = tasks.filter((task) => {
    return task.priority === "HIGH";
});
const tasksLow = tasks.filter((task) => {
    return task.priority === "LOW";
});
console.log('Prioridad Alta: ', tasksHigh);
console.log('Prioridad Baja: ', tasksLow);

// maps() recorre todos los elementos
// en caso de pasarle algo para que compare devuelve true o false.
const tasksMaps = tasks.map(task => {
    return task.description;
});
const tasksFilterWhitMaps = tasks.map(task => {
    return task.priority === "LOW";
});
console.log('Mapeando  ', tasksMaps);
console.log('Mapeando tasksFilterWhitMaps ', tasksFilterWhitMaps); // [ false, true, false, true ]

// find() Devuelve la primera coincidencia
const tasksFind = tasks.find(task => {
    return task.priority === 'HIGH';
});
console.log('tasksFind', tasksFind);

// foreach() // No genera un nuevo array
tasks.forEach(task => {
    console.log('Descripción: ', task.description);
});

// some() recorre y verifica si hay algún elemento que coincida con el parámetro enviado
const tasksSome = tasks.some(task => {
    return task.done === true;
});
console.log('tasksSome: ', tasksSome);

buena clase, nos toca es practicar

Muy bien explicado.

Para crear un array con un grupo de objetos que cumplan la condición hice lo siguiente, comentarios please para saber si estoy en lo correcto:

var articulosEncontrados = [];
articulos.forEach((articulo) => {
  articulo.nombre === 'Laptop' ? articulosEncontrados.push(articulo) : false;
})

var articulos = [
{nombre: “bici”, costo: 3000},
{nombre:“tv”, costo: 2500},
{nombre: “libro”, costo:320},
{nombre: “celular”, costo: 10000},
{nombre: “laptop”, costo:20000},
{nombre: “teclado”, costo: 500},
{nombre: “audifonos”, costo: 1700},
];

//metodo filter
var articulosfiltados = articulos.filter(function(articulos){
return articulos.costo <= 500
});

//metodo map
var nombrearticulos = articulos.map(function(articulos){
return articulos.nombre
});

//metodo for forEach
articulos.forEach(function(articulo) {
console.log(articulo.nombre);

});

//metodo some

var articulosbaratos = articulos.some(function(articulos){
return articulos.costo <= 700;
});

que clase tan estupenda 😄 que felicidad 😄

Muy interesante, ya estoy aclarando algo que me confundía mucho en JS el tema de las functions como parámetros, porqué razón colocan eso, etc… y los métodos perfectamente explicados profe, muy bien!

Diego explica todo súper simple y con excelentes ejemplos! 😮

<code>var articulos = [
      {nombre: "arduino",costo: 1000},
      {nombre: "raspberrypi",costo: 1500},
      {nombre: "nodemcu",costo: 500},
      {nombre: "pic",costo: 200},
      {nombre: "plc",costo: 3000},
      {nombre: "daq",costo: 5000}  
];
var articulo = articulos.push("tarjeta personalizada"); //agrega elemento al final del arreglo
var articulo = articulos.pop("tarjeta personalizada"); //elimina elemento del final del arreglo
var articulo = articulos.shift("tarjeta personalizada"); //agrega elemento al inicio del arreglo
var articulo = articulos.unshift("tarjeta personalizada"); //elimina elemento al inicio del arreglo
var articulo = articulos.indexOf("arduino"); //Regresa el index del elemento dentro del arreglo
var filtrado = articulos.filter(function(articulo){
      return articulo.costo <= 1000});    //filtra un elemento con base a una condición
var mapeo = articulos.map(function(articulo){
            return articulo.nombre});     //regresa un arreglo con la información de los elementos solicitados
var encuentra = articulos.find(function(articulo){
      return articulo.nombre==="pic"});   //Encuentra el elemento del arreglo con la característica solicitada
articulos.forEach(function(articulo){
      console.log(articulo.nombre);       //itera todo el arreglo y regresa la información solicitada
});
var filtrado = articulos.some(function(articulo){
      return articulo.costo >= 1000});    //regresa un valor booleano si el arreglo cuenta con elementos que coincidan con la descripción</code>

Transmito el resumen de los métodos de recorrido:

var articulos = [
    { nombre: "Bicicleta", costo: 200 },
    { nombre: "Telvesion", costo: 2300 },
    { nombre: "Libro", costo: 120 },
    { nombre: "Celular", costo: 4000 },
    { nombre: "Laptop", costo: 5400 },
    { nombre: "Mesa", costo: 400 },
    { nombre: "Audifonos", costo: 1700 }
];

//Metodo Filter
var articulosFiltrados = articulos.filter(function (articulo) {
    return articulo.costo < 500;
});

// Método Map
var nombreArticulos = articulos.map(function (articulo) {
    return articulo.nombre;
});

//Método find
var encuentraArticulo = articulos.find(function (articulo) {
    return articulo.nombre === "Libro";
});

// Método forEach
articulos.forEach(function (articulo) {
    console.log(articulo.nombre == "Libro");
});

// Método some. Solo nos regresa si es True o False.
var articulosBaratos = articulos.some(function (articulo) {
    return articulo.costo <= 500;
});```

Find. te devuelve el primero elemento del array que coincida con la condición.

ForEach. Recorre el array o elemento del array seleccionado.

some. te devuelve literalmente un boolean, si alguno de los elementos del array, cumple con la condición descrita dentro del some. Devuelve true, de lo contrario devuelve False.

no me queda claro porque en la funcion se coloca articulo en vez de colocarlo en plural articulos?

Tengo una pregunta que quizas va mas orientada al diseño web, pero si tomando el ejemplo de la tienda en linea al momento del usuario querer filtrar los articulos, se haria el filtrado en la parte del frontend? o seria al momento de consultar al backend, se que se puede hacer de ambas maneras, pero quisiera saber cual seria la "good practice", si hacer de nuevo una cosnulta a BD o en frontend hacer el filtrado. Gracias de antemano a quien me conteste :)
con este tipo de metodos se puede meter a un marketplace no?
```js var encuentraArticulo = articulos.find(function(articulo){ return articulo.nombre === "Laptop" }) ```En la nueva variable de tipo array va a contener el objeto completo que contenga la condición. ```js articulos.forEach(function(articulo){ console.log(articulo.nombre) }) ```Hace el filtro sobre el array principal sin modificarlo, regresa cosas (.xyz) con el console.log. ```js var articulosBaratos = articulos.some(function(articulo){ return articulo.costo <=700 }) ```La nueva variable es un bool de la validación que revisa en todo el array principal.
Tengo una duda, find() termina alterando el array inicial, especificamente el primer elemento de nuestro array original lo cambia al valor que queremos buscar
Ya entendí el porque, pero no me deja eliminar el comentario

Usamos some() para verificar si al menos un elemento de nuestro array cumple con la condición.
Si necesitamos verificar que todos nuestros elementos de nuestro array cumplen con la condición, usamos every(), y devuelve true o false.

Que buenos métodos la verdad son muy útiles

Algunos métodos más de recorrer arrays:

El método forEach se utiliza para ejecutar una función en cada elemento del array: const array = [1, 2, 3, 4, 5]; array.forEach(function(element) { console.log(element); });

El método find() se utiliza en JavaScript para encontrar el primer elemento en un array que cumple con una determinada condición. Una vez que se encuentra el elemento que cumple con la condición, el método find() devuelve ese elemento y finaliza la búsqueda. Si ningún elemento cumple con la condición, el método find() devuelve undefined. El método find() solo devuelve el primer elemento que cumple con la condición, incluso si hay más elementos que también la cumplen.

Hice este pequeño bloque de código para experimentar con la lógica de las validaciones. Fue divertido.

alert("Enter an article you wanna know if it's cheap or not");
let userSearch=prompt("Enter the article: ");
let isCheap=articles.some(article=>{
  if (article.name.toLowerCase()===userSearch.toLowerCase()){
    return article.price<700;
  }
  return false;
});

if(isCheap){
  alert(`The ${userSearch} article is cheap`)
} else {
  alert(`The ${userSearch} article is not cheap`)
}
var articulos = [
    { nombre: "Bici", costo: 3000 },
    { nombre: "TV", costo: 2500 },
    { nombre: "Libro", costo: 320 },
    { nombre: "Celular", costo: 10000 },
    { nombre: "Laptop", costo: 20000 },
    { nombre: "Teclado", costo: 500 },
    { nombre: "Audifonos", costo: 1700 },
  ];

//Metodo FIND

var encuentraArticulo = articulos.find (function(articulo){
    return articulo.nombre === "Laptop"
})

//En la consola
// encuentraArticulo
    // {nombre: 'Laptop', costo: 20000}


//Metodo FOR EACH

articulos.forEach(function(articulo){
    console.log(articulo.nombre)
})

// En consola
    // Bici
    // TV
    // Libro
    // Celular
    // Laptop
    // Teclado
    // Audifonos

//metodo SOME

var articulosBaratos = articulos.some(function(articulo){
    return articulo.costo <= 700
})

//En la consola

// articulosBaratos
    // true

Método find();
Este me sirve para encontrar un objeto que tiene un dato específico

var encontrarArticulo = articulos.find(  function(articulo){
return articulo.nombre === "Bici";
}  );

Método forEach();
Este sirve para recorrer el array como tal

articulos.forEach(  function(articulo){
console.log(articulo.nombre);
}  );

Método some();
Devuelve una validación para artículos que cumplan una validación

var articulosBaratos = articulos.some(  function(articulo){
return articulo.costo <= 700;
}  );

Tenemos dos métodos que se pueden llegar a confundir, .find y .filter
.find retorna el primer elemento que cumple con la condición
.filter retornar un array de los elemento que cumplen la condición.
espero les sea de mucha ayuda mi aporte

Me gusto esta clase!