Conceptos basicos de objetos

Un objeto es una variedad de datos y/o funcionalidades ( que generalmente se expresan en variables y funciones que se denominan propiedades y metodos cuando estan dentro de un objeto).

Sintaxis ⇒

const objectName = {
  Name1: String,//estas serian propiedades del objeto
  Name2: ["cosas" , "mas cosas"], //es una propiedad pero con varios valores porque es un array y se llama a sus valores como cualquier array
  Name3: Number,
  nameFunction1: function() {alert("algo")},//estos serian metodos del objeto
  nameFunction2: function() {prompt}
};

Los miembros de un objeto pueden ser practicamente cualquier cosa, strings, numbers, arrays, functions, los primeros tres elementos son elementos de datos y se denominan propiedades del objeto, los ultimos elementos son funciones y permiten manipular esos datos son sus metodos. La forma de llamar estos datos seria asi ⇒

objectName.Name1 //output un String
objectName.Name2[0] //output "cosas"
objectName.Name3 //output un Number
objectName.nameFunction1() //output ejecucion de la funcion (metodo)

Este tipo de objetos es muy util cuando enviamos formularios al servidor, donde es mas simple enviar un solo elemento que uno por cada input rellenado, ademas es mas legible que arrays, porque cuenta con nombres para sus miembros.

Notacion de puntos

Para acceder a los valos de los elementos de un objeto, primer se debe colocar el nombre del objeto seguido de un punto . y luego el nombre del elemento al que deseamos acceder (ya sea propiedad o metodo). Las tres formas de notacion para acceder a la info de un miembro del objeto ⇒

person.age //propiedad
person.interests[1] // propiedad de un array
person.bio() // metodo

Sub-namespace

Se puede incluso hacer que un miembro de objeto sea otro objeto ⇒

name: ['Bob', 'Smith'], //array

name : { //object
  first: 'Bob',
  last: 'Smith'
},

A estos miembros se los puede invocar utilizando la notacion de punto ⇒ person.name.first o person.name.last, con person estamos invocando al objeto, con name estamos ingresando a un mimebto del objeto, y como name es un objeto podemos ingresar a los elementos de este: first y last.

Notacion de corchetes

Existen otra forma de acceder a los datos del objeto, y esta es la notacion de corchetes donde ⇒

person.age
person.name.first

person['age']
person['name']['first']

Establecer miembros de objetos

Tambien podemos ingresar un valor a un miembro de objeto u actualizar un valor preexistentes ⇒

person.age = 45;
person['name']['last'] = 'Cratchit';

La configuracion de miembros de objeto no se limita solo a generar valores u actualizarlos sino que tambien se pueden crear miembros completamente nuevos en el objeto ⇒

person['eyes'] = 'hazel';
person.farewell = function() { alert("Bye everybody!"); }

Una ventaja importante que tiene la notacion de corchetes, es la posibilidad de colocar variables (valores dinamicos) para los miembros del objeto ⇒

function newPnMember ( myDataName , myDataValue){
person[myDataName] = myDataValue; //el nombre del miembro es un parametro de la funcion, solo se puede lograr con la notacion de corchetes.
}

Que es this?

this es una palabra clave que hace referencia al objeto actual en el que se esta escribiendo el codigo ⇒

const person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  } //aca el resultado es el saludo a 'Chris'
}

const person2 = {
  name: 'Deepti',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  } //aca el resultado es el saludo a 'Deepti'
}

Has estado usando objetos todo el tiempo

Las APIs integradas del navegador o los objetos propios del lenguaje JS, estan construidos utilizando el mismo tipo de estructura.

Cuando utilzamos metodos de string ⇒

myString.split(',');

Esto ocurre con todas las APIs integradas u objetos integrados utilizados de JS ⇒ Math, Array, etc.

const myDiv = document.createElement('div');
const myVideo = document.querySelector('video');