5 formas de crear objetos en JavaScript

Antes de empezar con este artículo en el que te explicaremos qué son los objetos en JavaScript y cómo crearlos desde cero, debes tener en cuenta que el lenguaje de JavaScript no es lo mismo que el lenguaje Java. ¡No los confundas! 

Los dos términos pueden dar lugar a confusión, ya que ambos son lenguajes de programación, pero aquí nos centraremos en el lenguaje de programación web: JavaScript. Si quieres saber más sobre las diferencias entre estos dos lenguajes de programación, no dudes en consultar nuestro Curso de Programación en JavaScript, PHP y MySQL. 

Pero antes, te explicamos una de las características principales del lenguaje en JavaScript: los objetos. ¡Anota las formas de crearlos! 

¿Qué es un objeto JavaScript?

JavaScript es un lenguaje de programación con diferentes aplicaciones web. ¿Te has preguntado alguna vez cómo se crea la interactividad de una web? Pues, JavaScript es un lenguaje que ayuda a su construcción. Para construirla se sirve de diferentes características como el concepto de variable. Pero, ¿por qué es importante este concepto? 

Una variable es la forma en la que un lenguaje de programación nombra un valor. Es decir, cuando se le asigna un nombre a una función concreta para evitar repetir el valor y poder identificarla solamente con el nombre. Ahora que ya sabemos esto, ¿por qué es importante para definir el concepto de objeto?

Pues, sencillamente, ¡porque un objeto es una variable! Pero, profundicemos un poco más en la definición. Un objeto es un tipo de dato, interpretado de primeras como una variable especial que puede albergar más variables en su interior. 

Es decir, un objeto es una variable dentro de otra variable que permite organizar múltiples variables de la misma temática en el interior. 

De forma generalizada, se emplean dos tipos de nomenclaturas para crear un objeto: la palabra clave “new” o la notación literal, sin necesidad de utilizar la palabra new. La declaración de un objeto, es decir, la definición de un objeto se hace entre {}. Estas son solo algunas de las características principales de los objetos, pero hay una serie de propiedades que debes entender antes de aprender a crear objetos: 

• La notación con puntos, la opción más frecuente, por ejemplo: (coche.color)
• La notación con corchetes, por ejemplo: (coche[«color»])

Estas dos notaciones también sirven para añadir propiedades al objeto después de crearlo y definirlo. Como las propiedades también pueden ser empleadas como variables, este lenguaje es útil para utilizar los objetos como elementos para organizar múltiples variables. 

Cómo crear objetos con JavaScript: ¡aprende de cero!

Siguiendo el ejemplo de las notaciones, usando “coche” como variable vamos a convertirlo en objeto para así poder explicarte las cinco formas más frecuentes de crear objetos y sus propiedades. ¡Crear objetos con JavaScript es más fácil de lo que crees!

La forma básica 

Esta construcción es la más sencilla, y consiste simplemente en crear el objeto y sus propiedades en un solo paso con la siguiente nomenclatura: 

var = coche{

puertas: “2”,

ruedas: “4”,

color: “azul”

};

De esta forma, el objeto que creamos no deja de ser una variable a la que le atribuimos, a la vez, propiedades. 

A “coche” le damos las propiedades “puertas”, “ruedas” y “color”, de golpe. Pero esta definición tiene un pequeño problema, ¡y es que hay que tener claras las propiedades! No se podrán añadir más propiedades más adelante, por lo que es un ejercicio de práctica muy eficiente para comprender y estudiar la estructura del programa previamente. 

La forma más compleja 

¿No sabemos cuántas propiedades tendrá la variable? Puedes crear objetos igualmente. Siguiendo el ejemplo anterior, la definición quedaría de la siguiente forma: 

var coche = new Object();

coche.puertas = “2”;

coche.ruedas = “4”;

coche.color = “azul”;

Aquí lo que hemos hecho ha sido crear en la primera línea el objeto, seguido de la atribución de propiedades. Este código permite crear propiedades nuevas sin necesidad de volver hacia atrás: ¡permite incorporar propiedades nuevas en cualquier momento! Pero hay que tener cuidado con esta fórmula, ya que puede dar lugar a confusión si la estructura o el código están desordenados. 

A diferencia de la primera opción, la forma básica, en la que al tener todo en un mismo bloque identificamos la propiedades a la primera. 

La forma alternativa 

Esta forma es muy similar a la anterior, con la diferencia de que esta no emplea el punto para definir la propiedad sino que emplea la notación con corchetes. Visualmente, para los/as expertos en programación esta forma es más visual y clara ya que separa de forma evidente qué es cada parte: qué es objeto y qué es propiedad. ¡Esa es la única diferencia! ¿Cómo lo ves más claro coche[“puertas”] = “2”; o coche.puertas = “2”;?

Acceso a los objetos

¿Es posible acceder a las propiedades? ¡Claro! Si hemos creado un código es para que en cualquier momento podamos acceder a él.  Solamente tienes que introducir nombreDelObjeto.nombeDeLaPropiedad, entre corchetes o entre puntos, en función de cómo lo hayas creado antes, ¡y listo! Es decir, con nuestro ejemplo, sería así: coche.puertas;

Con esta búsqueda accedemos al valor que tenga en ese momento “puertas” en este caso, pudiendo recogerlo para usarlo en otra parte del código o modificarlo. Esta opción es muy útil para hacer objetos en serie, como te mostramos a continuación. 

Objeto plantilla

Este quizás sea el uso más potente y efectivo: realizar plantillas para definir otros objetos más adelante. ¿Cómo?, te estarás preguntando. Siguiendo nuestro ejemplo del coche, imaginemos que vamos a definir diferentes modelos como objetos, por ejemplo, “Fiat” y “Ford”. Primero, creamos la plantilla: 

var = coche{

puertas: “2”,

ruedas: “4”,

color: “azul”

};

A continuación, definimos el fabricante: 

var = fabricantes{

marca1: “Ford”,

marca2: “Fiat”,

};

Y por último, definimos el objeto: 

var = Ford{

puertas: coche.puertas,

ruedas: coche.ruedas,

color: coche.color,

fabricante: fabricantes.marca1

};

¿Qué es lo que conseguimos? Pues una estructura en serie en la que cambiando una propiedad asignada, ¡esta se cambiaría en todos los modelos! 

Esta técnica nos ahorra tiempo en el caso de que tengamos muchos datos, evitando modificar las propiedades del objeto una a una. 

¡Especialízate con un curso en Programación en Javascript, PHP y MySQL!

Aprender a estructurar correctamente las variables que forman un lenguaje de programación web como JavaScript, ¡es más fácil de lo que crees! Adquiere los conocimientos básicos de HTLM5 y asienta las bases de JavaScript tanto en ámbito web como en aplicaciones móviles, ¡entre otros entornos! 

En Deusto Formación te ofrecemos una formación completa a distancia con el Curso de Programación en JavaScript, PHP y MySQL, en el que 800 horas te ofrecerán los conocimientos clave que necesitas para ampliar tu horizonte laboral en el mundo de la programación. Además, al finalizar el curso podrás acceder a una bolsa de empleo gestionada por Randstad y obtendrás dos títulos: 

• Diploma propio de Deusto Formación
• Título acreditativo de la Fundación General de la Universidad de Salamanca

Comienza hoy a practicar tus habilidades en programación, ¡y ya verás como no se te escapa ningún código! No dudes en consultarnos cualquier duda a través del formulario.