Objetos

Un objecto en JavaScript es un tipo de dato que se compone de una coleccion de nombres o llave y valores representados en pares de nombre: valor "name:value". Los pares de nombre:valor "name:value", pueden consistir de propiedades "properties" el cual contiene cualquier valor numerico, cadena de caracteres, nulo, undefined o booleano, al igual que metodos "methods" el cual es una funcion dentro del objeto.

Un objeto de JavaScript puede ser completamente enlazada a una entidad independiente como un objeto de la vida real. Por ejemplo un libro, el cual como objeto podemos describirlo por titulo, autor, numeros de paginas y/o genero. Similar a un vehiculo el cual puede describirse por color, desarrollador, modelo y/o poder de fuerza.

Creacion de objeto

Objeto en JavaScript es un tipo de dato, asi como numeros o cadena de caracteres. Como tipo de dato los objetos puede ser contenida en una variable. Existe dos formas de construir un objeto de JavaScript.

• Objeto literal, usando pareas de llaves {...}

const objectLiteral = {};
console.log(typeof objectLiteral); //-> Object

let Person = {
  name: "John"
};

console.log(Person.name); //-> John

• Constructor de objeto, el cual es utilizando la palabra reservada new

const objectConstructor = new Object();
console.log(typeof objectConstructor); //-> Object

let Person = new Object();
Person.name = "John";

console.log(Person.name); //-> John

• Utilizando el metodo de Objeto() Object.create()

const objectCreate = Object.create(null);
console.log(typeof objectCreate); //-> Object

let Person = Object.create(null);
Person.name = "John";

console.log(typeof Person); //-> Object
console.log(Person.name); //-> John

• Utilizando una funcion en combinacion de la palabra reservada new

function myObject() {};
const objectFunction = new myObject();
console.log(typeof myObject); //-> Function
console.log(typeof objectFunction); //-> Object

function Person(name) {
  this.name = name;
};

let john = new Person("John");

console.log(typeof Person); //-> Function
console.log(typeof john); //-> Object
console.log(john.name); //-> John

Propiedades y metodos

Las propiedades estan asociadas entre un nombre (llave "key") y el valor dentro del objeto, esto valores pueden ser representado por cualquier tipo de datos. Las propiedades comunmente hacen referencias a caracteristicas de algun objeto. Metodos son funciones el cual pueden transformar los valores de las propiedades del objeto.

Acceso a propiedades del objeto

Existen dos maneras de accesar las propiedades de un objeto.

• Notacion de punto

const Person = {
  firstName: 'Steve ',
  lastName: 'McNiller',
  sayName: function() {
    console.log(this.firstName + this.lastName);
  }
}

console.log(Person.firstName); //-> Steve

• Notacion de corchetes

const Person = {
  firstName: 'Steve ',
  lastName: 'McNiller',
  sayName: function() {
    console.log(this.firstName + this.lastName);
  }
}

console.log(Person['firstName']); //-> Steve

De las mismas manera podemos llamar metodos dentro del objetos.

const Person = {
  firstName: 'Steve ',
  lastName: 'McNiller',
  sayName: function() {
    console.log(this.firstName + this.lastName);
  }
}

Person.sayName(); //-> Steve McNiller
Person['sayName'](); //-> Steve McNiller

Añadir o modificar propiedades de objeto

Para añadir propiedades a objeto o modificarlo, utilizamos el operador de asignacion y cualquiera de los tipo de notacion.

const Person = {
  firstName: 'Steve ',
  lastName: 'McNiller',
  sayName: function() {
    console.log(this.firstName + this.lastName);
  }
}

Person.age = 28;
console.log(Person); //-> {firstName: "Steve ", lastName: "McNiller", sayName: ƒ, age: 28}

Person['sex'] = 'Male';
console.log(Person); //-> {firstName: "Steve ", lastName: "McNiller", sayName: ƒ, age: 28, sex: "Male"}

De la misma manera podemos añadir metodos.

const Person = {
  firstName: 'Steve ',
  lastName: 'McNiller',
  sayName: function() {
    console.log(this.firstName + this.lastName);
  }
}

Person.age = 28;
Person['sex'] = 'Male';

Person.sayAge = function() {
  console.log('My age is ' + this.age)
};

Person.sayAge(); //-> My age is 28

Remover propiedades del objeto

Para remover una propiedad dentro del objeto podemos utilizar la palabra reservada delete junto a la propiedad que deseamos remover. Al remover la propiedad tendremos de vuelta el valor cierto indicando que la propiedad a sido exitosamente removida de la propiedad.

const Person = {
  firstName: 'Steve ',
  lastName: 'McNiller',
  sayName: function() {
    console.log(this.firstName + this.lastName);
  }
}

Person.age = 28;

const confirmObjDel = delete Person.age;

console.log(confirmObjDel); //-> true
console.log(Person); //-> {firstName: "Steve ", lastName: "McNiller", sayName: ƒ}

Iteraciones atravez de propiedades de objeto

• Por medio de for...in

const Person = {
  firstName: 'Steve ',
  lastName: 'McNiller',
  age: 28,
  sayName: function() {
    console.log(this.firstName + this.lastName);
  }
}

for(let key in Person) {
  console.log(Person[key]);
}

//-> Steve
//-> McNiller
//-> 28
//-> f()

• Utilizando metodo de Object() Object.keys() este metodo devuelve un Array de los valores del objeto el cual aplicamos el metodo.

const Person = {
  firstName: 'Steve ',
  lastName: 'McNiller',
  age: 28,
  sayName: function() {
    console.log(this.firstName + this.lastName);
  }
}

const PersonArray = Object.keys(Person);
console.log(PersonArray); //-> ["firstName", "lastName", "age", "sayName"]

Descriptor de propiedad del objeto

Descriptores de objetos en JavaScript, son elemento dentro de los objetos en JavaScript el cual nos provee mas informacion sobre las propiedades dentro de nuestros objetos en JavaScript, estas propiedades determinan el estado del objeto en JavaScript.

Los objetos en JavaScript contiene los descriptores de dato, esto son [[value]], [[writable]], [[configurable]], [[enumerable]] y descriptores de accessor el cual son [[get]], [[set]], [[configurable]] y [[enumerable]].

let obj = {
  name: 'Pete'
};

Por defecto cuando nosotros creamos un objeto como el ejemplo anterior, este objeto obtiene los valores por defecto. Basado al ejemplo anterior, [[value]] es el valor de name 'Pete', el cual es lo que muestra como salida, si escribimos los siguiente console.log(obj.name). [[writable]] esta definido como cierto "true", esto significa que esta permitido cambiar el valor del objeto. [[configurable]] esta definido como cierto "true", este nos permite cambiar o utilizar las propiedades mencionadas. [[enumerable]] significa que si le aplicamos un bucle for...in al objeto de JavaScript, podemos recorrer por las propiedades definidas dentro del objeto JavaScript.

Los descriptores accessor o metodos de mutacion son metodos que nos permite buscar datos privado dentro de objetos, a estos metodos se les llama comunmente [[getter]] y [[setter]].

En JavaScript los objetos contienen unos metodos el cual nos permiten definir y configurar objetos utilizando descriptores.

Object.defineProperty

Metodos es uno de los principales para manejar y configurar objetos.

// Example of used
Object.defineProperty(obj, propName, {})

let user = {};
Object.defineProperty(user, "firstName", {
  value: "Peter",
  configurable: true,
  writable: true,
  enumerable: true
});

console.log(user.firstName); //-> Peter

Por defecto cuando definimos una propiedad dentro del objeto utilizando Object.defineProperty, si no le asignamos un valor utilizando [[value]], este se creara con el valor undefined

let user = {};
Object.defineProperty(user, "firstName", {
  configurable: true,
  writable: true,
  enumerable: true
});

console.log(user.firstName); //-> undefined

Object.defineProperties

Metodos nos permite definir varias propiedades a la misma vez.

Object.defineProperties(obj, props)

let user = {};
Object.defineProperties(user, {
  firstName: {
    value: "Peter",
    writable: true
  },
  getName: {
    value: function() {
      console.log(this.firstName);
    }
  },
});

user.getName(); //-> Peter

Observemos mas ejemplo del uso de estos metodos, digamos que queremos definir propiedades que nunca cambien, que sea constante.

let user = {};
Object.defineProperty(user, "firstName", {
  value: "Peter",
  writable: false,
  configurable: false
});

user.firstName = "Mike";
console.log(user.firstName); // Peter

Digamos que ahora en el proximo ejemplo queremos ocultar propiedades dentro del objeto en JavaScript.

let user = {
  firstName: "Peter",
  lastName: "Jackson"
};

Object.defineProperty(user, "socialSecNum", {
  value: "555-89-7844",
  enumerable: false
});

for(let prop in user) {
  console.log(prop);
}
//-> firstName
//-> lastName

Object.getOwnPropertyNames and Object.keys

Metodos son familiar al metodo keys dictionary del lenguaje de programacion Python, estos nos devuelve un array de las propiedades que se encuentran dentro del objeto de JavaScript, la diferencia entre Object.getOwnPropertyNames y Object.keys es que Object.getOwnPropertyNames nos devuleve todas las propiedades incluyendo las configurada como falso en enumerable.

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};

Object.defineProperty(user, "socialSecNum", {
  value: "555-89-7844",
  enumerable: false
});

log(Object.getOwnPropertyNames(user)); //-> ["firstName", "lastName", "socialSecNum"]
log(Object.keys(user)); //-> ["firstName", "lastName"]

Object.values

Metodo es similar a Object.keys, este nos devuelve el valor de cada propiedad y al igual que Object.keys, este no retornara propiedades definidas falsa en [[enumerable]].

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};

Object.defineProperty(user, "socialSecNum", {
  value: "555-89-7844",
  enumerable: false
});

log(Object.values(user)); //-> ["firstName", "lastName"]

Object.getOwnPropertyDescriptor

Metodo nos devuelve los descriptores de una propiedad especifica que se encuentra dentro del objeto de JavaScript.

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};
log(Object.getOwnPropertyDescriptor(user, "firstName")); 
//-> {value: "Peter", writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyDescriptors

Metodo es similar a Object.getOwnPropertyDescriptor, la diferencia es que este nos devuelve todas las propiedades que se encuentre dentro del objeto JavaScript con sus descriptores.

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};
log(Object.getOwnPropertyDescriptors(user)); //-> {firstName: {…}, lastName: {…}}

Getter and Setter

Estos son descriptores de accessor o metodos de mutacion de objeto. Al contrario de los descriptores de dato, estos substituyen a los descriptores [[value]] y [[writable]]. [[get]] es la funcion por defecto que se ejecutara cuando llamamos a alguna propiedad el cual le asignamos este metodo [[get]], por defecto sera undefined el valor que devuelve, cuando asignamos un valor a alguna propiedad, el metodo [[set]] es llamado y aplicado a esa propiedad que se la asignamos.

let obj = {
  get propName() {
    // Getter, the code executed on getting obj.propName
  },
  set propName(value) {
    // Setter, the code executed on setting obj.propName = value
  }
}

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};

Object.defineProperty(user, "fullName", {
  get: function() {
    return this.firstName + " " + this.lastName;
  },
  set: function(value) {
    let parts = value.split(' ');

    if(parts.length == 2) {
      this.firstName = parts[0];
      this.lastName = parts[1];
    }
    else {
      throw 'Invalid name format'
    }
  }
});

log(user.fullName); //-> Peter Jackson

user.fullName = "Steve Finn";

log(user.firstName); //-> Steve
log(user.lastName); //-> Finn
log(user.fullName); //-> Steve Finn

Control el estado del objeto

Existen momento el cual queremos prevenir que nuestros objetos esten en el estado de lectura o escritura, los objetos de JavaScript nos provee tres metodos para evitar estos cambios o usos. Estos metodos son: Object.preventExtensions, Object.seal, Object.freeze

Object.preventExtensions

Metodo previene que el objeto de JavaScript sea extendible.

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};
Object.preventExtensions(user);

Object.defineProperty(user, "age", {
  value: 22
});

user.age = "one";
log(user.age); //-> Cannot define property age, object is not extensible

Object.isExtensible

Metodo nos devuelve un valor booleano que nos notifica si el objeto JavaScript puede ser extensible.

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};

log(Object.isExtensible(user)); //-> true
Object.preventExtensions(user);
log(Object.isExtensible(user)); //-> false

Object.seal

Metodo previene que podamos añadir o eliminar propiedades a objetos de JavaScript pero si nos permite editar propiedades del objeto de JavaScript, el objeto estara sellado.

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};

Object.seal(user);

delete user.firstName;
log(user.firstName); //-> Peter

user.fullName = "Peter Jackson";
log(user.fullName); //-> undefined

user.firstName = "Tom";
log(user.firstName); //-> Tom

Object.isSealed

Metodo nos devuleve un valor booleano que nos notifica se el objeto esta sellado.

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};

Object.seal(user);
log(Object.isSealed(user)); //-> true

Object.freeze and Object.isFrozen

Metodo es similar a Object.seal, la diferencia es que este objeto ademas que evita añadir y eliminar propiedades, no dejara editar propiedades. Este objeto estara completamente como una variable constante. Object.isFrozen nos devuelve un valor booleano para notificar si nuestro objeto esta congelado.

const log = console.log;
let user = {
  firstName: "Peter",
  lastName: "Jackson"
};

Object.freeze(user);
user.fullName = "Peter Jackson";

log(Object.isFrozen(user)); //-> true
log(user.fullName);

user.firstName = "Tom";
log(user.firstName); //-> Peter