Curso Práctico de JavaScript

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

Sabemos que existen diferentes tipos de variables en JavaScript, entre los cuales se encuenta las listas (array) y los objetos (object).

Muchas veces se confunde a estas variables como si tuvieran las mismas propiedades, pero no es lo correcto.

Por ejemplo:

Definamos un par de variables: un array y un object.

let nombres = ["Ricardo","Terry"];

let nombresCompletos = {
    nombre: "Ricardo",
    apellido: "Chavez"
}

Ahora definamos una función que imprima los elementos de un array:

function recorrerArray(array) {
    for (let i = 0; i < array.length; i++){
        console.log(array[i]);
    }
}

Sí se llama a la función mandándole como argumento el array creado, no habrá problema en obtener la respuesta deseada:

recorrerArray(nombres)
//Ricardo
//Terry

Pero si intentamos aplicar esta función para recorrer el objeto, nos dará el siguiente resultado:

recorrerArray(nombresCompletos)
//undefined

Esto sucede porque un objeto contiene elementos con estructura propiedad-valor y no forman parte de una lista.

Entonces…¿Cómo se puede imprimir los elementos de una variable tipo Object?

Existen dos formas para hacerlo:

  1. Object.values y Object.keys

Ambos devuelven tanto el valor como la propiedad de cada elemento del objeto.

function imprimirValoresObjeto(object) {
    const array = Object.values(object); 
    for (let i = 0; i < array.length; i++) {
        console.log(array[i]);
    }
}

imprimirValoresObjeto(nombresCompletos);
//Ricardo
//Chavez

function imprimirPropiedadesObjeto(object) {
    const array = Object.keys(object); 
    for (let i = 0; i < array.length; i++) {
        console.log(array[i]);
    }
}

imprimirPropiedadesObjeto(nombresCompletos);
//nombre
//apellido
  1. for…in

Es una variante de for que permite recorrer los elementos de un objeto.

function completeObject(object){
    for (prop in object) {
        console.log(prop," : ",object[prop]); //prop recorre propiedades y object[prop] recorre valores
    }
}

completeObject(nombresCompletos)
//nombre  :  Ricardo
//apellido  :  Chavez

¡No olvides comentar y dejarme un 💚!

Curso Práctico de JavaScript

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados