Skip to content

30 D铆as de JavaScript: Objetos

Twitter Follow Autor: Asabeneh Yetayeh
Enero, 2020

<< D铆a 7 | D铆a 9 >>

Thirty Days Of JavaScript

馃摂 D铆a 8

Scope (alcance)

La variable es la parte fundamental en la programaci贸n. Declaramos variables para almacenar diferentes tipos de datos. Para declarar una variable usamos la palabra clave var, let, y const. Una variable puede declararse en diferentes scope. En esta secci贸n, veremos el alcance de las variables, el alcance de las variables cuando usamos var o let. El scope de las variables pueden ser:

  • Global
  • Local

Las variables pueden ser declaradas con un scope global o local. Veremos tanto el scope global como el local. Cualquier cosa declarada sin let, var o const tiene un alcance global.

Imaginemos que tenemos un fichero scope.js.

Objeto Global Window

Sin usar console.log() abre tu navegador y comprueba, ver谩s el valor de a y b si escribes a o b en el navegador. Eso significa que a y b ya est谩n disponibles en window

//scope.js
a = "JavaScript"; // declarar una variable sin let o const la hace disponible en el objeto window y esta se encuentra en cualquier lugar
b = 10; // es una variable de scope global y se encuentra en el objeto ventana
function letsLearnScope() {
  console.log(a, b);
  if (true) {
    console.log(a, b);
  }
}
console.log(a, b); // accesibles

Global scope

Una variable declarada globalmente puede ser accedida en cualquier lugar del mismo archivo. Pero el t茅rmino global es relativo. Puede ser global al archivo o puede ser global relativo a alg煤n bloque de c贸digos.

//scope.js
let a = "JavaScript"; // es un scope global que se encontrar谩 en cualquier parte de este archivo
let b = 10; // es un scope global que se encontrar谩 en cualquier parte de este archivo
function letsLearnScope() {
  console.log(a, b); // JavaScript 10, accesible
  if (true) {
    let a = "Python";
    let b = 100;
    console.log(a, b); // Python 100
  }
  console.log(a, b);
}
letsLearnScope();
console.log(a, b); // JavaScript 10, accesible

Local scope

Una variable declarada como local s贸lo puede ser accedida en determinados bloques de c贸digo.

  • Scope del bloque
  • Scope de la funci贸n
//scope.js
let a = "JavaScript"; // es un scope global que se encontrar谩 en cualquier parte de este archivo
let b = 10; // es un scope global que se encontrar谩 en cualquier parte de este archivo
// Scope de la funci贸n
function letsLearnScope() {
  console.log(a, b); // JavaScript 10, accesible
  let value = false;
  // Scope del bloque
  if (true) {
    // podemos acceder desde la funci贸n y fuera de la funci贸n pero
    // las variables declaradas dentro del if no ser谩n accesibles fuera del bloque if
    let a = "Python";
    let b = 20;
    let c = 30;
    let d = 40;
    value = !value;
    console.log(a, b, c, value); // Python 20 30 true
  }
  // no podemos acceder a c porque el scope de c es s贸lo el bloque if
  console.log(a, b, value); // JavaScript 10 true
}
letsLearnScope();
console.log(a, b); // JavaScript 10, accesible

Ahora, usted tiene una comprensi贸n del scope. Una variable declarada con var s贸lo tiene 谩mbito de funci贸n, pero una variable declarada con let o const tiene scope de bloque (bloque de funci贸n, bloque if, bloque de bucle, etc). El bloque en JavaScript es un c贸digo entre dos llaves({}).

//scope.js
function letsLearnScope() {
  var gravity = 9.81;
  console.log(gravity);
}
// console.log(gravity), Uncaught ReferenceError: la gravedad no est谩 definida

if (true) {
  var gravity = 9.81;
  console.log(gravity); // 9.81
}
console.log(gravity); // 9.81

for (var i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2
}
console.log(i); // 3

En ES6 y superiores existe let y const, por lo que no sufrir谩s la insidia de var. Cuando usamos let nuestra variable tiene alcance de bloque y no infectara otras partes de nuestro c贸digo.

//scope.js
function letsLearnScope() {
  // puedes usar let o const, pero la gravedad es constante prefiero usar const
  const gravity = 9.81;
  console.log(gravity);
}
// console.log(gravity), Uncaught ReferenceError: la gravedad no est谩 definida

if (true) {
  const gravity = 9.81;
  console.log(gravity); // 9.81
}
// console.log(gravity), Uncaught ReferenceError: la gravedad no est谩 definida

for (let i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2
}
// console.log(i), Uncaught ReferenceError: i no est谩 definida

El 谩mbito let y const es el mismo. La diferencia es s贸lo la reasignaci贸n. No podemos cambiar o reasignar el valor de la variable const. Te sugiero encarecidamente que utilices let y const, utilizando let y const escribir谩s un c贸digo limpio y evitar谩s errores dif铆ciles de depurar. Como regla general, puedes usar let para cualquier valor que cambie, const para cualquier valor constante, y para un array, objeto, funci贸n de flecha y expresi贸n de funci贸n.

馃摂 Objeto

Todo puede ser un objeto y los objetos tienen propiedades y las propiedades tienen valores, por lo que un objeto es un par clave-valor. El orden de la clave no est谩 reservado, o no hay orden. Para crear un objeto literal, utilizamos dos llaves.

Crear un objeto vac铆o

Un objeto vac铆o

const person = {};

Crear un objeto con valores

Ahora, el objeto persona tiene las propiedades firstName, lastName, age, location, skills y isMarried. El valor de las propiedades o claves puede ser una cadena, un n煤mero, un booleano, un objeto, null, undefined o una funci贸n.

Veamos algunos ejemplos de objetos. Cada clave tiene un valor en el objeto.

const rectangle = {
  length: 20,
  width: 20,
};
console.log(rectangle); // {length: 20, width: 20}

const person = {
  firstName: "Asabeneh",
  lastName: "Yetayeh",
  age: 250,
  country: "Finland",
  city: "Helsinki",
  skills: [
    "HTML",
    "CSS",
    "JavaScript",
    "React",
    "Node",
    "MongoDB",
    "Python",
    "D3.js",
  ],
  isMarried: true,
};
console.log(person);

Obtener valores de un objeto

Podemos acceder a los valores del objeto utilizando dos m茅todos:

  • usando . seguido del nombre de la clave si el nombre de la clave es de una sola palabra
  • utilizando corchetes y comillas
const person = {
  firstName: "Asabeneh",
  lastName: "Yetayeh",
  age: 250,
  country: "Finland",
  city: "Helsinki",
  skills: [
    "HTML",
    "CSS",
    "JavaScript",
    "React",
    "Node",
    "MongoDB",
    "Python",
    "D3.js",
  ],
  getFullName: function () {
    return `${this.firstName}${this.lastName}`;
  },
  "phone number": "+3584545454545",
};

// acceder a los valores mediante .
console.log(person.firstName);
console.log(person.lastName);
console.log(person.age);
console.log(person.location); // undefined

// se puede acceder al valor utilizando corchetes y el nombre de la clave
console.log(person["firstName"]);
console.log(person["lastName"]);
console.log(person["age"]);
console.log(person["age"]);
console.log(person["location"]); // undefined

// por ejemplo, para acceder al n煤mero de tel茅fono s贸lo utilizamos el m茅todo del corchete
console.log(person["phone number"]);

Crear m茅todos de objetos

Ahora, el objeto persona tiene las propiedades getFullName. El getFullName es una funci贸n dentro del objeto persona y lo llamamos un m茅todo del objeto. La palabra clave this se refiere al objeto mismo. Podemos utilizar la palabra this para acceder a los valores de diferentes propiedades del objeto. No podemos usar una funci贸n de flecha como m茅todo de objeto porque la palabra this se refiere a window dentro de una funci贸n de flecha en lugar del objeto mismo. Ejemplo de objeto:

const person = {
  firstName: "Asabeneh",
  lastName: "Yetayeh",
  age: 250,
  country: "Finland",
  city: "Helsinki",
  skills: [
    "HTML",
    "CSS",
    "JavaScript",
    "React",
    "Node",
    "MongoDB",
    "Python",
    "D3.js",
  ],
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(person.getFullName());
// Asabeneh Yetayeh

Establecer una nueva clave para un objeto

Un objeto es una estructura de datos mutable y podemos modificar el contenido de un objeto despu茅s de su creaci贸n.

Establecer una nueva clave en un objeto

const person = {
  firstName: "Asabeneh",
  lastName: "Yetayeh",
  age: 250,
  country: "Finland",
  city: "Helsinki",
  skills: [
    "HTML",
    "CSS",
    "JavaScript",
    "React",
    "Node",
    "MongoDB",
    "Python",
    "D3.js",
  ],
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
person.nationality = "Ethiopian";
person.country = "Finland";
person.title = "teacher";
person.skills.push("Meteor");
person.skills.push("SasS");
person.isMarried = true;

person.getPersonInfo = function () {
  let skillsWithoutLastSkill = this.skills
    .splice(0, this.skills.length - 1)
    .join(", ");
  let lastSkill = this.skills.splice(this.skills.length - 1)[0];

  let skills = `${skillsWithoutLastSkill}, and ${lastSkill}`;
  let fullName = this.getFullName();
  let statement = `${fullName} is a ${this.title}.\nHe lives in ${this.country}.\nHe teaches ${skills}.`;
  return statement;
};
console.log(person);
console.log(person.getPersonInfo());

Asabeneh Yetayeh is a teacher.
He lives in Finland.
He teaches HTML, CSS, JavaScript, React, Node, MongoDB, Python, D3.js, Meteor, and SasS.

M茅todos de los objetos

Existen diferentes m茅todos para manipular un objeto. Veamos algunos de los m茅todos disponibles.

Object.assign: Para copiar un objeto sin modificar el objeto original

const person = {
  firstName: "Asabeneh",
  age: 250,
  country: "Finland",
  city: "Helsinki",
  skills: ["HTML", "CSS", "JS"],
  title: "teacher",
  address: {
    street: "Heitamienkatu 16",
    pobox: 2002,
    city: "Helsinki",
  },
  getPersonInfo: function () {
    return `I am ${this.firstName} and I live in ${this.city}, ${this.country}. I am ${this.age}.`;
  },
};

//M茅todos de objetos: Object.assign, Object.keys, Object.values, Object.entries
//hasOwnProperty

const copyPerson = Object.assign({}, person);
console.log(copyPerson);

Obtenci贸n de claves de objetos mediante Object.keys()

Object.keys: Para obtener las claves o propiedades de un objeto como un array

const keys = Object.keys(copyPerson);
console.log(keys); //['firstName', 'age', 'country','city', 'skills','title', 'address', 'getPersonInfo']
const address = Object.keys(copyPerson.address);
console.log(address); //['street', 'pobox', 'city']

Obtenci贸n de valores de objetos mediante Object.values()

Object.values:Para obtener los valores de un objeto como un array

const values = Object.values(copyPerson);
console.log(values);

Obtenci贸n de claves y valores de objetos mediante Object.entries()

Object.entries:Para obtener las claves y valores de un array

const entries = Object.entries(copyPerson);
console.log(entries);

Comprobaci贸n de propiedades mediante hasOwnProperty()

hasOwnProperty: Para comprobar si una clave o propiedad espec铆fica existe en un objeto

console.log(copyPerson.hasOwnProperty("name"));
console.log(copyPerson.hasOwnProperty("score"));

馃寱 Eres asombroso. Ahora, est谩s s煤per cargado con el poder de los objetos. Acabas de completar los desaf铆os del d铆a 8 y llevas 8 pasos de tu camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus m煤sculos.

馃捇 Ejercicios

Ejercicios: Nivel 1

  1. Crear un objeto vac铆o llamado dog
  2. Imprime el objeto dog en la consola
  3. A帽ade las propiedades name, legs, color, age y bark para el objeto dog. La propiedad bark es un m茅todo que devuelve woof woof
  4. Obtener name, legs, color, age y el valor de bark del objeto dog
  5. Establecer nuevas propiedades al objeto dog: breed, getDogInfo

Ejercicios: Nivel 2

  1. Encuentra a la persona que tiene muchas habilidades en el objeto de los usuarios.
  2. Contar los usuarios conectados, contar los usuarios que tienen m谩s de 50 puntos del siguiente objeto.
const users = {
  Alex: {
    email: 'alex@alex.com',
    skills: ['HTML', 'CSS', 'JavaScript'],
    age: 20,
    isLoggedIn: false,
    points: 30
  },
  Asab: {
    email: 'asab@asab.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
    age: 25,
    isLoggedIn: false,
    points: 50
  },
  Brook: {
    email: 'daniel@daniel.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
    age: 30,
    isLoggedIn: true,
    points: 50
  },
  Daniel: {
    email: 'daniel@alex.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
    age: 20,
    isLoggedIn: false,
    points: 40
  },
  John: {
    email: 'john@john.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
    age: 20,
    isLoggedIn: true,
    points: 50
  },
  Thomas: {
    email: 'thomas@thomas.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'React'],
    age: 20,
    isLoggedIn: false,
    points: 40
  },
  Paul: {
    email: 'paul@paul.com',
    skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'],
    age: 20,
    isLoggedIn: false,
    points: 40
  }
}```
  1. Encontrar personas que sean desarrolladores MERN stack del objeto de los usuarios
  2. Establezca su nombre en el objeto usuarios sin modificar el objeto usuarios original
  3. Obtener todas las claves o propiedades del objeto usuarios
  4. Obtener todos los valores del objeto usuarios
  5. Utilice el objeto pa铆ses para imprimir el nombre del pa铆s, la capital, la poblaci贸n y los idiomas.

Ejercicios: Nivel 3

  1. Crea un objeto literal llamado personAccount. Tiene las propiedades firstName, lastName, incomes, expenses y tiene los metodos totalIncome, totalExpense, accountInfo,addIncome, addExpense y accountBalance. Incomes es un conjunto de ingresos y su descripci贸n y expenses es un conjunto de ingresos y su descripci贸n.

  2. **** Preguntas:2, 3 y 4 se basan en los siguientes dos arrays: users y products ()

const users = [
  {
    _id: "ab12ex",
    username: "Alex",
    email: "alex@alex.com",
    password: "123123",
    createdAt: "08/01/2020 9:00 AM",
    isLoggedIn: false,
  },
  {
    _id: "fg12cy",
    username: "Asab",
    email: "asab@asab.com",
    password: "123456",
    createdAt: "08/01/2020 9:30 AM",
    isLoggedIn: true,
  },
  {
    _id: "zwf8md",
    username: "Brook",
    email: "brook@brook.com",
    password: "123111",
    createdAt: "08/01/2020 9:45 AM",
    isLoggedIn: true,
  },
  {
    _id: "eefamr",
    username: "Martha",
    email: "martha@martha.com",
    password: "123222",
    createdAt: "08/01/2020 9:50 AM",
    isLoggedIn: false,
  },
  {
    _id: "ghderc",
    username: "Thomas",
    email: "thomas@thomas.com",
    password: "123333",
    createdAt: "08/01/2020 10:00 AM",
    isLoggedIn: false,
  },
];

const products = [
  {
    _id: "eedfcf",
    name: "mobile phone",
    description: "Huawei Honor",
    price: 200,
    ratings: [
      { userId: "fg12cy", rate: 5 },
      { userId: "zwf8md", rate: 4.5 },
    ],
    likes: [],
  },
  {
    _id: "aegfal",
    name: "Laptop",
    description: "MacPro: System Darwin",
    price: 2500,
    ratings: [],
    likes: ["fg12cy"],
  },
  {
    _id: "hedfcg",
    name: "TV",
    description: "Smart TV:Procaster",
    price: 400,
    ratings: [{ userId: "fg12cy", rate: 5 }],
    likes: ["fg12cy"],
  },
];

Imagina que est谩s obteniendo la colecci贸n de usuarios anterior de una base de datos MongoDB. a. Crear una funci贸n llamada signUp que permita al usuario a帽adirse a la colecci贸n. Si el usuario existe, informar al usuario que ya tiene una cuenta.
b. Crear una funci贸n llamada signIn que permita al usuario iniciar sesi贸n en la aplicaci贸n

  1. El array de productos tiene tres elementos y cada uno de ellos tiene seis propiedades. a. Crear una funci贸n llamada rateProduct que califique el producto b. Crear una funci贸n llamada averageRating que calcule la valoraci贸n media de un producto

  2. Crear una funci贸n llamada likeProduct. Esta funci贸n ayuda a dar un like al producto. Si no le gusta eliminar el like y si le gusta darle like

馃帀 隆FELICITACIONES! 馃帀

<< D铆a 7 | D铆a 9 >>