30 D铆as de JavaScript: Objetos

Twitter Follow Autor: Asabeneh Yetayeh
Enero, 2020
[<< D铆a 7](../dia_07_Funciones/dia_07_funciones.md) | [D铆a 9 >>](../dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md) ![Thirty Days Of JavaScript](../images/banners/day_1_8.png) - [馃摂 D铆a 8](#馃摂-d铆a-8) - [Scope](#scope-alcance) - [Objeto Global Window](#objeto-global-window) - [Global scope](#global-scope) - [Local scope](#local-scope) - [馃摂 Objeto](#馃摂-objeto) - [Crear un objeto vac铆o](#crear-un-objeto-vac铆o) - [Crear un objeto con valores](#crear-un-objeto-con-valores) - [Obtener valores de un objeto](#obtener-valores-de-un-objeto) - [Crear m茅todos de objetos](#crear-m茅todos-de-objetos) - [Establecer una nueva clave para un objeto](#establecer-una-nueva-clave-para-un-objeto) - [M茅todos de los objetos](#m茅todos-de-los-objetos) - [Obtenci贸n de claves de objetos mediante Object.keys()](#obtenci贸n-de-claves-de-objetos-mediante-objectkeys) - [Obtenci贸n de valores de objetos mediante Object.values()](#obtenci贸n-de-valores-de-objetos-mediante-objectvalues) - [Obtenci贸n de claves y valores de objetos mediante Object.entries()](#obtenci贸n-de-claves-y-valores-de-objetos-mediante-objectentries) - [Comprobaci贸n de propiedades mediante hasOwnProperty()](#comprobaci贸n-de-propiedades-mediante-hasownproperty) - [馃捇 Ejercicios](#馃捇-ejercicios) - [Ejercicios: Nivel 1](#ejercicios-nivel-1) - [Ejercicios: Nivel 2](#ejercicios-nivel-2) - [Ejercicios: Nivel 3](#ejercicios-nivel-3) # 馃摂 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 ```js //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. ```js //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 ```js //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({}). ```js //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. ```js //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 ```js 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. ```js 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 ```js 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: ```js 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 ```js 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()); ``` ```sh 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 ```js 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 ```js 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 ```js 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 ```js 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 ```js 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 1. Imprime el objeto dog en la consola 1. 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_ 1. Obtener name, legs, color, age y el valor de bark del objeto dog 1. 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. 1. Contar los usuarios conectados, contar los usuarios que tienen m谩s de 50 puntos del siguiente objeto. ````js 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 1. Establezca su nombre en el objeto usuarios sin modificar el objeto usuarios original 1. Obtener todas las claves o propiedades del objeto usuarios 1. Obtener todos los valores del objeto usuarios 1. 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 () ```js 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 3. 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 4. 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](../dia_07_Funciones/dia_07_funciones.md) | [D铆a 9 >>](../dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md)