Métodos de arrays más importantes en JavaScript (filter, map, ...)

Author
By Darío Rivera
Posted on 2022-03-04 in Javascript

Uno de los aspectos más importantes cuando trabajamos con arrays en javascript es el amplio y coherente abanico de métodos que existen para manipular los datos. En este post, veremos los métodos más importantes de arrays en javascript.

En la siguiente imagen tomada de reddit, se resume los métodos más importantes en javascript y su aplicación. Es bastante intuitiva!.

métodos de arrays javascript

map

Este método crea un nuevo array a partir de cada elementos del array original.

const numbers = [1,2,3]

const squares = numbers.map(number => {
    return number * number
})

console.log(squares)

El resultado sería el siguiente:

[1,4,9]

En objetos es comúnmente usada para hacer un pluck de alguna propiedad.

const devs = [
    {name: 'Steave', role: 'frontend'},
    {name: 'Andrew', role: 'backend'}
]

const names = devs.map(dev => {
    return dev.name
})

console.log(names)

El resultado sería el siguiente:

['Steave', 'Andrew']

Otro uso común es modificar una o más propiedades del array original. Esto de hecho no lo considero una buena práctica debido a que contradice uno de los principios de la programación funcional y debido a que se modifica el array original no tiene sentido retornar uno nuevo.

const devs = [
    {name: 'Steave', role: 'frontend'},
    {name: 'Andrew', role: 'backend'}
]

const allDevs = devs.map(dev => {
    dev.role = 'backend'
    return dev
})

console.log(devs)

La contraparte del ejemplo anterior, es retornar un nuevo array con algunas propiedades modificadas si alterar el original.

const devs = [
    {name: 'Steave', role: 'frontend'},
    {name: 'Andrew', role: 'backend'}
]

const allDevs = devs.map(dev => {
    return {
        ...dev,
        role: 'backend'
    }
})

console.log(devs)

filter

Este método crea un nuevo array con todos los elementos que pasan el test en la condición de la función.

const devs = [
    {name: 'Steave', role: 'frontend', age: 24},
    {name: 'Andrew', role: 'backend', age: 28},
    {name: 'James', role: 'backend', age: 17}
]

const filtered = devs.filter(dev => {
    return dev.age > 20
})

console.log(filtered)

El resultado sería el siguiente:

[
    {name: 'Steave', role: 'frontend', age: 24},
    {name: 'Andrew', role: 'backend', age: 28},
]

En estos términos podemos decir que el resultado es un subconjunto del array principal.

find

Este método retorna el elemento del array que cumpla la condición dada por la función.

const devs = [
    {name: 'Steave', role: 'frontend', age: 24},
    {name: 'Andrew', role: 'backend', age: 28},
    {name: 'James', role: 'backend', age: 17}
]

const filtered = devs.find(dev => {
    return dev.age === 17
})

console.log(filtered)

El resultado sería el siguiente:

{name: 'James', role: 'backend', age: 17}

findIndex

Este método retorna el índice del primer elementos que cumpla con la condición provista en la función. Si no encuentra ningún elemento retorna -1.

const devs = [
    {name: 'Steave', role: 'frontend', age: 24},
    {name: 'Andrew', role: 'backend', age: 28},
    {name: 'James', role: 'backend', age: 17}
]

const index = devs.findIndex(dev => {
    return dev.age < 20
})

console.log(index)

El resultado sería el siguiente:

2

fill

Este método cambia todos los elementos indicados en el array por un valor estático y retorna el array modificado.

const devs = ['Steave', 'Andrew', 'James', 'Bashir']
const cleaned = devs.fill(null, 1, 3)

console.log(cleaned)

El resultado sería el siguiente. El script llena los resultados desde la posición 1 hasta la 3 sin incluir esta última.

['Steave', null, null, 'Bashir']

some

Este método true si al menos uno de los elementos en el array pasa la validación de la función.

const devs = [
    {name: 'Steave', role: 'frontend', age: 24},
    {name: 'Andrew', role: 'backend', age: 28},
    {name: 'James', role: 'backend', age: 17}
]

const some = devs.some(dev => {
    return dev.age < 20
})

console.log(some)

El resultado sería el siguiente:

true

every

Este método true si todos los elementos en el array pasa la validación de la función.

const devs = [
    {name: 'Steave', role: 'frontend', age: 24},
    {name: 'Andrew', role: 'backend', age: 28},
    {name: 'James', role: 'backend', age: 17}
]

const every = devs.every(dev => {
    return dev.age < 20
})

console.log(every)

El resultado sería el siguiente:

false

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.