If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

Repaso: objetos

Este es un repaso de lo que cubrimos en esta lección sobre objetos.
Tenemos muchos tipos de valores que podemos almacenar en variables de JavaScript, y a veces queremos guardar muchos valores relacionados juntos: ¡aquí es donde entran los objetos!
Un objeto es un tipo de datos que nos permite almacenar una colección de propiedades en una sola variable. Para crear un objeto, declaramos una variable como lo haríamos normalmente, y luego utilizamos llaves para rodear las parejas de propiedades clave-valor:
var objectName = {
  propertyName: propertyValue,
  propertyName: propertyValue,
  ...
};
Aquí hay un objeto que describe a Winston. Este objeto tiene dos propiedades, hometown (ciudad de nacimiento) y hair (cabello), y cada una de las propiedades son cadenas de caracteres:
var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"
};
Aquí hay un objeto más complejo que describe un gato, con cuatro propiedades: age (edad), furColor (color de pelo), likes (cosas que le gustan) y birthday (cumpleaños).
var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, "year": 1994}
};
Observa como cada propiedad guarda un tipo de dato distinto: age guarda un número, furColor guarda una cadena de caracteres, likes guarda un arreglo y birthday guarda otro objeto. Eso es la cosa genial de los objetos (bueno, una de las cosas geniales). ¡Pueden guardar otros objetos dentro de ellos! Así que puedes tener objetos muy anidados para describir datos complejos.
También puedes ver objetos que en sus declaraciones usan comillas alrededor de los nombres de propiedades, como:
var aboutWinston = {
  "hometown": "Mountain View, CA",
  "hair": "no"
};
Eso es equivalente a lo que vimos anteriormente sin comillas, pero nos tardamos más en escribirlo. La única vez que es absolutamente necesario usar comillas es si el nombre de tu propiedad tiene un espacio, por ejemplo:
var aboutWinston = {
  "his hair": "none"
};
Aquí tenemos que usar comillas, porque de lo contrario el intérprete de JavaScript se confundirá. Este es mi consejo: ¡simplemente no uses espacios en los nombres de las propiedades! Así nunca tendrás que poner los nombres de las propiedades entre comillas.

Acceder a las propiedades de los objetos

Un objeto no es útil a menos que podamos ver dentro de él y obtener los valores de las diferentes propiedades. Podemos hacer eso de dos maneras. Primero, mediante lo que llamamos "notación de punto", en donde escribimos el nombre de la variable, seguido por un "." y luego el nombre de la propiedad:
var aboutWinston = {
  ciudad natal: "Mountain View, CA",
  cabello: "no"
};

text("Winston es de " + aboutWinston.hometown, 100, 100);
text("Winston tiene el cabello " + aboutWinston.hair + " ", 100, 150);
También podemos usar "notación de corchetes", que es parecida a cómo accedemos a los elementos de un arreglo, en donde escribimos el nombre de la variable, luego corchetes con el nombre de la propiedad entre comillas:
var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];
Si intentamos acceder a una propiedad que no existe, veríamos "undefined" (indefinido):
text("El objetivo en la vida de Winston es " + aboutWinston.lifeGoal, 100, 150);

Modificar las propiedades de un objeto

Al igual que cuando almacenamos otros tipos de datos en las variables, podemos cambiar los valores de las propiedades del objeto en cualquier momento durante un programa, al usar la notación de punto o de corchetes:
aboutWinston.hair = "curly"; // (rizado en inglés) ¡Winston consigue una peluca!
¡También podemos agregar propiedades completamente nuevas!
aboutWinston.lifeGoal = "teach JavaScript";
Si ya no ocupamos una propiedad, podemos borrarla (pero probablemente la mayor parte del tiempo solo le cambiaremos el valor):
delete aboutWinston.hair;

Arreglos de objetos

Ahora que conoces tanto los arreglos como los objetos, puedes combinarlos para crear arreglos de objetos, que de hecho son formas muy útiles de almacenar datos en programas. Por ejemplo, un arreglo de gatos:
var myCats = [
  {name: "Lizzie", 
   age: 18},
  {name: "Daemon",
   age: 1}
];

for (var i = 0; i < myCats.length; i++) {
  var myCat = myCats[i];
  println(myCat.name + ' tiene ' + myCat.age + ' años.');
}
Observa que iteramos a través de un arreglo de la misma forma que iteramos a través de un arreglo de números o de cadenas de caracteres, al usar un bucle for. Dentro de cada iteración, accedemos al elemento actual del arreglo con notación de corchetes y accedemos a las propiedades de ese elemento del arreglo (un objeto) con notación de punto.
Aquí hay otro ejemplo práctico que podrías ocupar en tus programas, un arreglo de coordenadas de posición:
var positions = [
    {x: 200, y: 100},
    {x: 200, y: 200},
    {x: 200, y: 300}
];

for (var i = 0; i < positions.length; i++) {
    var position = positions[i];
    ellipse(position.x, position.y, 100, 100);
}
¿Genial, no? Los objetos pueden ser confusos al principio, pero sigue usándolos, y eventualmente te volverás adictos a ellos, ¡y querrás convertir todo en un objeto!

¿Quieres unirte a la conversación?

  • Avatar starky ultimate style para el usuario joseandreslemusvelazquez
    esmuy dificil aprender esto cuando tienes 7 años
    (43 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar leaf green style para el usuario juan
    como hago para almacenar una imagen dentro de un objeto
    (5 votos)
    Avatar Default Khan Academy avatar para el usuario
    • Avatar male robot donald style para el usuario Castillo Sánchez Emmanuel
      Este arreglo de objeto es de la actividad anterior, espero te sirva ;)
      var movies = [
      {
      title: "Puff the Magic Dragon",
      review: "Best movie ever!!",
      image: getImage("avatars/aqualine-seed")
      },
      {
      title: "Terminator",
      review: "Hasta la vista Baby",
      image: getImage("avatars/duskpin-seed")
      },
      {
      title: "300",
      review: "Thi's Sparta!!",
      image: getImage("avatars/leafers-seed")
      }
      ];
      (19 votos)
  • Avatar hopper jumping style para el usuario Aaron
    me costo el de la reseña de peliculas pero lo complete for es muy complejo.
    (10 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar blobby green style para el usuario Rosa Silvestre Morcillo
    Hasta aquí todo perfecto y bien explicado, pero los objetos me esta costando mucho entenderlo y me parece explicado de forma demasiado breve. Hubiese estado bien una traducción a palabras del código. Por ejemplo si pone //if (mousePressed) { if (mouseButton==RIGHT)...// En vez de poner solo el código explicar // si, el ratón se pulsa, y si lo pulsado es el botón derecho, ocurrirá...// Así entendemos qué esta ocurriendo y cómo de una forma más sencilla.
    (5 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar blobby green style para el usuario LUIS HURTADO Y SANTILLAN
    En el uso del bucle "for", después de desarrollarlo se anota:
    var position = position [i]:
    <no tengo bien claro para que sirve esta variable. Alguien me puede ayudar?
    (2 votos)
    Avatar Default Khan Academy avatar para el usuario
    • Avatar piceratops ultimate style para el usuario Mauricio Londoño Restrepo
      Dentro del bucle for, la viariable i tiene un valor de 0, lo cual te sirve como un contador. Para ejectutar la primera posición de x sin usar el bucle, debes escribir text("Mi posición actual es" + position[0], 100, 100); La variable i dentro del bucle se encarga de llamar todos los elementos del objeto, usando la propiedad position.length. Espero te sirva.
      (5 votos)
  • Avatar blobby green style para el usuario Diego Gallo
    Lo complicado del desafío anterior fue darle las coordenadas de posición al momento de mostrar las películas, ya que a pesar de dejarlas espaciadas y legible no me lo daba como correcto, el ejercicio en sí estuvo bastante simple.
    (4 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar blobby green style para el usuario Montse Aguirre
    Leer que a otros les costó trabajo el desafío de "Reseña de películas", me tranquiliza un poco.
    (4 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar leafers seed style para el usuario zankia reyes
    Porque no hay un ejemplo exacto de lo que tenemos que hacer?
    (6 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar orange juice squid orange style para el usuario Ja✔❗er
    estuvo fácil y divertido
    (4 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar piceratops sapling style para el usuario Hugo Antonio Laveriano Lima
    En esta lección estamos aprendiendo sobre los objetos, nadie lo va a entender cuando tienes menor de edad, después de esto serás un gran programador. Espero que les ayude
    (2 votos)
    Avatar Default Khan Academy avatar para el usuario
¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.