Objetos y Clases

EcmaScript 6

El estándar ECMAScript 6 (también conocido como ES6 o ECMAScript 2015) es una versión importante de JavaScript que se lanzó en 2015. Esta versión agregó muchas características nuevas y útiles al lenguaje, lo que lo hace más poderoso y fácil de usar.

Aquí hay algunas de las características más importantes de ECMAScript 6:

Variables

En ES6, se introdujeron dos nuevas formas de declarar variables: let y const. A diferencia de var, let y const tienen alcances de bloque, lo que significa que solo están disponibles dentro del bloque en el que se declaran.

Ejemplo:

// Declaración de variables con let y const
let nombre = "Juan";
const PI = 3.1416;
 
// Cambio de valor de una variable
nombre = "Pedro"; // Válido
PI = 3.14; // Inválido

Arrow Functions

Las funciones de flecha (también conocidas como funciones lambda) son una forma más concisa de escribir funciones en ES6. Se definen utilizando la sintaxis () => {}.

Ejemlo:

// Función normal
function sumar(a, b) {
  return a + b;
}
 
// Función de flecha
const sumar = (a, b) => {
  return a + b;
}

Template Strings (Template Literals)

Las plantillas de cadena (template strings) son una forma más conveniente de crear cadenas de texto en JavaScript. Permiten la interpolación de variables y expresiones dentro de una cadena utilizando la sintaxis ${}.

Ejemplo:

const nombre = "Juan";
const edad = 25;
 
const mensaje = `Mi nombre es ${nombre} y tengo ${edad} años.`;
console.log(mensaje); // Resultado: "Mi nombre es Juan y tengo 25 años."

Desestructuración

La desestructuración es una forma de extraer datos de matrices y objetos en variables separadas. Esto puede ser útil cuando se trabaja con funciones que devuelven matrices u objetos grandes.

Ejemplo:

// Desestructuración de objetos
const persona = {nombre: "Juan", edad: 25};
const {nombre, edad} = persona;
 
console.log(nombre); // Resultado: "Juan"
console.log(edad); // Resultado: 25
 
// Desestructuración de matrices
const numeros = [1, 2, 3];
const [a, b, c] = numeros;
 
console.log(a); // Resultado: 1
console.log(b); // Resultado: 2
console.log(c); // Resultado: 3

Clases

ES6 introdujo una nueva sintaxis para definir clases en JavaScript. Las clases permiten crear objetos que tienen propiedades y métodos.

Ejemplo:

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
 
  saludar() {
    console.log(`Hola, mi nombre es ${this.nombre}.`);
  }
}
 
const juan = new Persona("Juan", 25);
juan.saludar(); // Resultado: "Hola, mi nombre es Juan."

Promesas

Las promesas son una forma de manejar tareas asíncronas en JavaScript. Permiten realizar tareas que pueden tardar en completarse, como la obtención de datos de un servidor, y luego realizar una acción cuando se complete la tarea.

Ejemplo:

const obtenerDatos = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const datos = {nombre: "Juan", edad: 25};
      if(datos) {
        resolve(datos);
      } else {
        reject("Error al obtener los datos.");
      }
    }, 2000);
  });
}
 
obtenerDatos()
  .then((datos) => {
    console.log(datos); // Resultado: {nombre: "Juan", edad: 25}
  })
  .catch((error) => {
    console.error(error); // Resultado: "Error al obtener los datos."
  });

En este ejemplo, la función obtenerDatos devuelve una promesa que se resuelve después de 2 segundos y devuelve un objeto con datos simulados. Si la promesa se resuelve correctamente, el método then se llama con los datos obtenidos. Si la promesa se rechaza, el método catch se llama con un mensaje de error.

Buenas prácticas

Utiliza const para declarar variables que no cambiarán su valor y let para las que sí lo harán.
Utiliza funciones de flecha en lugar de funciones normales.
Utiliza plantillas de cadena en lugar de concatenación de cadenas.
Utiliza la desestructuración para extraer datos de matrices y objetos.
Utiliza clases para crear objetos con propiedades y métodos.
Utiliza promesas para manejar tareas asíncronas.

Siguiendo estas buenas prácticas, podrás escribir un código más limpio y fácil de mantener.

Declaración con let y const

La declaración de variables con let y const es una característica importante de ECMAScript 6 que ayuda a mejorar la claridad y seguridad de nuestro código. Aquí te explico en detalle cómo funcionan let y const:

`let`

let es una palabra clave que se utiliza para declarar variables en JavaScript. A diferencia de var, las variables declaradas con let tienen alcance de bloque. Esto significa que solo están disponibles dentro del bloque en el que se declaran.

Ejemplo:

function ejemplo() {
  let x = 10; // Variable disponible solo dentro de la función ejemplo
  if(true) {
    let y = 20; // Variable disponible solo dentro del bloque if
    console.log(y); // Resultado: 20
  }
  console.log(x); // Resultado: 10
  console.log(y); // Error: la variable y no está definida
}

const

const es una palabra clave que se utiliza para declarar constantes en JavaScript. Al igual que let, las constantes declaradas con const tienen alcance de bloque. Sin embargo, a diferencia de las variables declaradas con let, las constantes no se pueden reasignar.

Ejemplo:

const PI = 3.1416; // Constante disponible en todo el código
PI = 3.14; // Error: no se puede reasignar una constante

Las constantes deben inicializarse con un valor en el momento de la declaración. No se les puede asignar un valor posteriormente.

Ejemplo:

const nombre; // Error: las constantes deben inicializarse con un valor
const edad = 25; // Correcto
edad = 30; // Error: no se puede reasignar una constante

Buenas prácticas

Utiliza const para declarar variables que no se reasignarán.
Utiliza let para declarar variables que se reasignarán.
Evita utilizar var para declarar variables.

La declaración de variables con let y const es una característica importante de ECMAScript 6 que ayuda a mejorar la claridad y seguridad de nuestro código.

String templates (Template Literals)

Los string templates son una característica de ECMAScript 6 que nos permiten crear cadenas de texto de forma más legible y fácil de mantener. Aquí te explico en detalle cómo funcionan los string templates:

Sintaxis

Los string templates se definen con comillas graves (```) en lugar de comillas simples o dobles. Dentro de un string template, podemos incluir variables, expresiones y otros strings utilizando la sintaxis ${}.

Ejemplo:

const nombre = "Juan";
const edad = 25;
 
const mensaje = `Mi nombre es ${nombre} y tengo ${edad} años.`;
console.log(mensaje); // Resultado: "Mi nombre es Juan y tengo 25 años."

En este ejemplo, creamos una cadena de texto que incluye variables nombre y edad. Utilizamos la sintaxis ${} para incluir las variables dentro del string.

Multilínea

Los string templates también nos permiten crear cadenas de texto multilínea. Esto significa que podemos crear cadenas de texto que contienen saltos de línea sin tener que utilizar caracteres especiales como \n.

Ejemplo:

const mensaje = `
  Hola,
  Bienvenido al sitio web.
  Gracias por visitarnos.
`;
console.log(mensaje);
// Resultado:
// "Hola,
//  Bienvenido al sitio web.
//  Gracias por visitarnos."

En este ejemplo, creamos una cadena de texto multilínea utilizando comillas graves. No es necesario utilizar caracteres de escape o concatenación para crear una cadena de texto multilínea.

Tagged Templates

Además de los string templates regulares, ECMAScript 6 también introdujo los tagged templates. Los tagged templates son una forma de personalizar el procesamiento de una cadena de texto.

Ejemplo:

function etiqueta(strings, ...expresiones) {
  console.log(strings); // Resultado: ["Mi nombre es ", " y tengo ", " años."]
  console.log(expresiones); // Resultado: ["Juan", 25]
  return "Mensaje personalizado";
}
 
const nombre = "Juan";
const edad = 25;
 
const mensaje = etiqueta`Mi nombre es ${nombre} y tengo ${edad} años.`;
console.log(mensaje); // Resultado: "Mensaje personalizado"

En este ejemplo, creamos una función etiqueta que toma una cadena de texto y una serie de expresiones. La función muestra los strings y expresiones en la consola y devuelve un mensaje personalizado. Luego, utilizamos el string template con la función etiqueta para procesar la cadena de texto.

Espero que esta explicación te haya sido útil. Los string templates son una característica muy útil de ECMAScript 6 que nos permite crear cadenas de texto de forma más legible y fácil de mantener.

Buenas prácticas

Utiliza string templates para crear cadenas de texto de forma más legible y fácil de mantener.
Utiliza tagged templates para personalizar el procesamiento de una cadena de texto.

Objetos

Los objetos son una estructura de datos importante en JavaScript que nos permiten almacenar datos y funciones relacionadas en una sola entidad. En ECMAScript 6, se introdujeron algunas características nuevas y útiles para trabajar con objetos. Aquí te explico en detalle cómo funcionan los objetos en JavaScript:

Creación de objetos

En JavaScript, podemos crear objetos utilizando la sintaxis de llaves ({}). Los objetos pueden contener propiedades y métodos.

Ejemplo:

const persona = {
  nombre: "Juan",
  edad: 25,
  saludar: function() {
    console.log(`Hola, mi nombre es ${this.nombre}.`);
  }
};
 
console.log(persona.nombre); // Resultado: "Juan"
console.log(persona.edad); // Resultado: 25
persona.saludar(); // Resultado: "Hola, mi nombre es Juan."

En este ejemplo, creamos un objeto persona con dos propiedades (nombre y edad) y un método (saludar).

Propiedades de objetos

Podemos acceder a las propiedades de un objeto utilizando la notación de puntos (objeto.propiedad) o la notación de corchetes (objeto["propiedad"]).

Ejemplo:

const persona = {
  nombre: "Juan",
  edad: 25
};
 
console.log(persona.nombre); // Resultado: "Juan"
console.log(persona["edad"]); // Resultado: 25

Métodos de objetos

Los métodos de objetos son funciones que están asociadas con el objeto. Se definen de la misma manera que las funciones normales, pero se agregan al objeto como una propiedad.

Ejemplo:

const persona = {
  nombre: "Juan",
  edad: 25,
  saludar: function() {
    console.log(`Hola, mi nombre es ${this.nombre}.`);
  }
};
 
persona.saludar(); // Resultado: "Hola, mi nombre es Juan."

Shorthand Properties

ECMAScript 6 introdujo una sintaxis abreviada para la definición de propiedades de objeto. Si el nombre de la propiedad y el nombre de la variable que contiene su valor son iguales, podemos omitir el nombre de la propiedad.

Ejemplo:

const nombre = "Juan";
const edad = 25;
 
const persona = {nombre, edad};
 
console.log(persona.nombre); // Resultado: "Juan"
console.log(persona.edad); // Resultado: 25

Object Destructuring

ECMAScript 6 también introdujo la desestructuración de objetos, que nos permite extraer propiedades de un objeto y asignarlas a variables individuales.

Ejemplo:

const persona = {nombre: "Juan", edad: 25};
 
const {nombre, edad} = persona;
 
console.log(nombre); // Resultado: "Juan"
console.log(edad); // Resultado: 25

Espero que esta explicación te haya sido útil. Los objetos son una estructura de datos importante en JavaScript que nos permite almacenar datos y funciones relacionadas en una sola entidad. Con las características de ECMAScript 6, podemos trabajar con objetos de una manera más eficiente y legible.

Buenas prácticas

Utiliza la sintaxis de llaves ({}) para crear objetos.
Utiliza la notación de puntos (objeto.propiedad) o la notación de corchetes (objeto["propiedad"]) para acceder a las propiedades de un objeto.
Utiliza la notación de puntos (objeto.metodo()) para llamar a los métodos de un objeto.
Utiliza la sintaxis abreviada para definir propiedades de objeto cuando el nombre de la propiedad y el nombre de la variable que contiene su valor son iguales.
Utiliza la desestructuración de objetos para extraer propiedades de un objeto y asignarlas a variables individuales.

Iterando objetos

Iterar sobre los objetos es una tarea común en JavaScript y ECMAScript 6 nos ofrece algunas formas nuevas y convenientes de hacerlo. Aquí te explico en detalle cómo puedes iterar sobre objetos en ECMAScript 6:

for...in

La forma tradicional de iterar sobre los objetos en JavaScript es mediante el uso de la instrucción for...in. Esta instrucción recorre todas las propiedades enumerables de un objeto y ejecuta un bloque de código para cada propiedad.

Ejemplo:

const persona = {nombre: "Juan", edad: 25};
 
for(let propiedad in persona) {
  console.log(`${propiedad}: ${persona[propiedad]}`);
}
// Resultado: "nombre: Juan"
//           "edad: 25"

En este ejemplo, utilizamos la instrucción for...in para recorrer las propiedades del objeto persona. En cada iteración, mostramos el nombre de la propiedad y su valor utilizando la notación de corchetes.

Object.keys()

ECMAScript 6 introdujo el método Object.keys() que devuelve un array con los nombres de todas las propiedades enumerables de un objeto. Podemos utilizar este método para iterar sobre un objeto de forma más conveniente.

Ejemplo:

const persona = {nombre: "Juan", edad: 25};
 
for(let propiedad of Object.keys(persona)) {
  console.log(`${propiedad}: ${persona[propiedad]}`);
}
// Resultado: "nombre: Juan"
//           "edad: 25"

En este ejemplo, utilizamos el método Object.keys() para obtener un array con los nombres de las propiedades del objeto persona. Luego, utilizamos un for...of loop para iterar sobre el array y mostrar el nombre de la propiedad y su valor. `

Object.entries()

ECMAScript 6 también introdujo el método Object.entries() que devuelve un array de arrays con el nombre y el valor de todas las propiedades enumerables de un objeto. Podemos utilizar este método para iterar sobre un objeto de forma aún más conveniente.

Ejemplo:

const persona = {nombre: "Juan", edad: 25};
 
for(let [propiedad, valor] of Object.entries(persona)) {
  console.log(`${propiedad}: ${valor}`);
}
// Resultado: "nombre: Juan"
//           "edad: 25"

En este ejemplo, utilizamos el método Object.entries() para obtener un array de arrays con los nombres y valores de las propiedades del objeto persona. Luego, utilizamos un for...of loop para iterar sobre el array de arrays y mostrar el nombre de la propiedad y su valor.

Buenas prácticas

Cuando iteramos sobre los objetos, es una buena práctica utilizar el método hasOwnProperty() para asegurarnos de que la propiedad que estamos iterando pertenece al objeto y no a su prototipo.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción break para detener el bucle después de encontrar la propiedad que estamos buscando.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción continue para omitir la propiedad que no nos interesa.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción return para detener la función después de encontrar la propiedad que estamos buscando.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción throw para lanzar una excepción después de encontrar la propiedad que estamos buscando.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción yield para devolver la propiedad que estamos buscando.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción await para esperar a que se resuelva la propiedad que estamos buscando.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción async para ejecutar la propiedad que estamos buscando de forma asíncrona.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción async* para ejecutar la propiedad que estamos buscando de forma asíncrona y devolver un iterador.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción for await...of para iterar sobre los objetos asíncronos.
Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción for await...in para iterar sobre los objetos asíncronos.

Desestructuración de objetos

La desestructuración de objetos es una característica de ECMAScript 6 que nos permite extraer valores de un objeto y asignarlos a variables individuales en una sola línea de código. Aquí te explico en detalle cómo funciona la desestructuración de objetos en JavaScript:

Sintaxis básica

La sintaxis básica de la desestructuración de objetos implica crear una variable para cada propiedad del objeto que se desea extraer. Las variables se crean dentro de un objeto literal con el mismo nombre que la propiedad.

Ejemplo:

const persona = {nombre: "Juan", edad: 25};
 
const {nombre, edad} = persona;
 
console.log(nombre); // Resultado: "Juan"
console.log(edad); // Resultado: 25

En este ejemplo, utilizamos la sintaxis de desestructuración para extraer las propiedades nombre y edad del objeto persona. Las variables se crean automáticamente con el mismo nombre que las propiedades, lo que nos permite acceder a ellas directamente.

Asignación de alias

Podemos asignar un nombre de variable diferente al nombre de la propiedad utilizando la sintaxis de alias.

Ejemplo:

const persona = {nombre: "Juan", edad: 25};
 
const {nombre: primerNombre, edad: años} = persona;
 
console.log(primerNombre); // Resultado: "Juan"
console.log(años); // Resultado: 25

En este ejemplo, utilizamos la sintaxis de alias para asignar el nombre primerNombre a la propiedad nombre y el nombre años a la propiedad edad.

Valores por defecto

Podemos proporcionar valores por defecto para las propiedades que no existen en el objeto utilizando la sintaxis de valores por defecto.

Ejemplo:

const persona = {nombre: "Juan"};
 
const {nombre, edad = 25} = persona;
 
console.log(nombre); // Resultado: "Juan"
console.log(edad); // Resultado: 25 (por defecto)

En este ejemplo, utilizamos la sintaxis de valores por defecto para asignar un valor por defecto de 25 a la propiedad edad. Como la propiedad edad no existe en el objeto persona, se asigna automáticamente el valor por defecto.

Desestructuración de objetos anidados

También podemos utilizar la desestructuración de objetos para extraer propiedades de objetos anidados.

Ejemplo:

const persona = {nombre: "Juan", edad: 25, dirección: {calle: "Av. Principal", número: 123}};
 
const {nombre, edad, dirección: {calle, número}} = persona;
 
console.log(nombre); // Resultado: "Juan"
console.log(edad); // Resultado: 25
console.log(calle); // Resultado: "Av. Principal"
console.log(número); // Resultado: 123

En este ejemplo, utilizamos la desestructuración de objetos para extraer las propiedades nombre, edad, calle y número del objeto persona. La propiedad dirección se desestructura automáticamente y se extraen sus propias propiedades.

Buenas prácticas

La desestructuración de objetos es una característica muy útil de ECMAScript 6, pero debemos utilizarla con moderación.
Si utilizamos la desestructuración de objetos en exceso, nuestro código puede volverse difícil de leer y mantener.
La desestructuración de objetos es especialmente útil cuando trabajamos con funciones que devuelven objetos grandes con muchas propiedades.
La desestructuración de objetos también es útil cuando trabajamos con funciones que reciben objetos grandes con muchas propiedades.

Desestructuración de arrays

La desestructuración de arrays es una característica de ECMAScript 6 que nos permite extraer valores de un array y asignarlos a variables individuales en una sola línea de código. Aquí te explico en detalle cómo funciona la desestructuración de arrays en JavaScript:

Sintaxis básica

La sintaxis básica de la desestructuración de arrays implica crear una variable para cada elemento del array que se desea extraer. Las variables se crean dentro de un array literal utilizando la sintaxis de corchetes.

Ejemplo:

const [primero, segundo] = ["uno", "dos", "tres"];
 
console.log(primero); // Resultado: "uno"
console.log(segundo); // Resultado: "dos"

En este ejemplo, utilizamos la sintaxis de desestructuración para extraer los primeros dos elementos del array. Las variables primero y segundo se crean automáticamente con los valores correspondientes.

Saltos de elementos

Podemos saltar elementos del array que no deseamos extraer utilizando la sintaxis de comas.

Ejemplo:

const [primero, , tercero] = ["uno", "dos", "tres"];
 
console.log(primero); // Resultado: "uno"
console.log(tercero); // Resultado: "tres"

En este ejemplo, utilizamos la sintaxis de comas para saltar el segundo elemento del array y extraer solamente los elementos primero y tercero.

Asignación de valores por defecto

Podemos proporcionar valores por defecto para los elementos que no existen en el array utilizando la sintaxis de valores por defecto.

Ejemplo:

const [primero, segundo, tercero = "tres"] = ["uno", "dos"];
 
console.log(primero); // Resultado: "uno"
console.log(segundo); // Resultado: "dos"
console.log(tercero); // Resultado: "tres" (por defecto)

En este ejemplo, utilizamos la sintaxis de valores por defecto para asignar un valor por defecto de "tres" al elemento tercero. Como el elemento tercero no existe en el array, se asigna automáticamente el valor por defecto.

Desestructuración de arrays anidados

También podemos utilizar la desestructuración de arrays para extraer elementos de arrays anidados.

Ejemplo:

const [primero, segundo, [tercero, cuarto]] = ["uno", "dos", ["tres", "cuatro"]];
 
console.log(primero); // Resultado: "uno"
console.log(segundo); // Resultado: "dos"
console.log(tercero); // Resultado: "tres"
console.log(cuarto); // Resultado: "cuatro"

En este ejemplo, utilizamos la desestructuración de arrays para extraer los elementos primero, segundo, tercero y cuarto. El tercer elemento es otro array que se desestructura automáticamente.

Buenas prácticas

La desestructuración de arrays es una característica muy útil de ECMAScript 6, pero debemos utilizarla con moderación. Si utilizamos la desestructuración de arrays en exceso, nuestro código puede volverse difícil de leer y mantener.
La desestructuración de arrays es especialmente útil cuando trabajamos con funciones que devuelven arrays. En lugar de asignar el valor de retorno de la función a una variable y luego extraer los elementos del array, podemos hacerlo en una sola línea de código.
La desestructuración de arrays es una característica de ECMAScript 6, por lo que no es compatible con versiones anteriores de JavaScript. Si utilizamos la desestructuración de arrays en nuestro código, debemos compilarlo con Babel para que sea compatible con todos los navegadores.

Clases

Las clases son una característica importante de ECMAScript 6 que nos permiten crear objetos y definir comportamientos relacionados en una sola entidad. Aquí te explico en detalle cómo funcionan las clases en JavaScript:

Declaración de clases

La declaración de una clase en ECMAScript 6 utiliza la palabra clave class. El cuerpo de la clase contiene propiedades y métodos.

Ejemplo:

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
 
  saludar() {
    console.log(`Hola, mi nombre es ${this.nombre}.`);
  }
}
 
const persona = new Persona("Juan", 25);
console.log(persona.nombre); // Resultado: "Juan"
console.log(persona.edad); // Resultado: 25
persona.saludar(); // Resultado: "Hola, mi nombre es Juan."

En este ejemplo, creamos una clase Persona con un constructor que define las propiedades nombre y edad, y un método saludar que imprime un mensaje en la consola. Luego, creamos un objeto persona de la clase Persona utilizando el constructor y accedemos a sus propiedades y método.

Herencia de clases

Las clases en ECMAScript 6 también admiten la herencia, lo que nos permite crear una nueva clase basada en una clase existente.

Ejemplo:

class Empleado extends Persona {
  constructor(nombre, edad, trabajo) {
    super(nombre, edad);
    this.trabajo = trabajo;
  }
 
  presentarse() {
    console.log(`Hola, mi nombre es ${this.nombre} y trabajo como ${this.trabajo}.`);
  }
}
 
const empleado = new Empleado("Ana", 30, "desarrollador");
console.log(empleado.nombre); // Resultado: "Ana"
console.log(empleado.edad); // Resultado: 30
console.log(empleado.trabajo); // Resultado: "desarrollador"
empleado.saludar(); // Resultado: "Hola, mi nombre es Ana."
empleado.presentarse(); // Resultado: "Hola, mi nombre es Ana y trabajo como desarrollador."

En este ejemplo, creamos una clase Empleado que hereda de la clase Persona. El constructor de la clase Empleado llama al constructor de la clase Persona utilizando la palabra clave super, y define una nueva propiedad trabajo. Además, la clase Empleado tiene un método presentarse que utiliza las propiedades de Persona y Empleado. Luego, creamos un objeto empleado de la clase Empleado utilizando el constructor y accedemos a sus propiedades y métodos.

Métodos estáticos

ECMAScript 6 también nos permite definir métodos estáticos en las clases. Los métodos estáticos son métodos que pertenecen a la clase en sí y no a sus instancias.

Ejemplo:

class Utilidades {
  static sumar(a, b) {
    return a + b;
  }
}
 
console.log(Utilidades.sumar(2, 3)); // Resultado: 5

En este ejemplo, creamos una clase Utilidades con un método estático sumar. El método sumar no utiliza la palabra clave this, ya que no pertenece a ninguna instancia de la clase. En su lugar, se llama al método utilizando el nombre de la clase.

Buenas prácticas

Utiliza la palabra clave class para declarar una clase.
Utiliza el método constructor para inicializar las propiedades de una clase.
Utiliza la palabra clave extends para crear una clase que herede de otra clase.
Utiliza la palabra clave super para llamar al constructor de la clase padre.
Utiliza la palabra clave static para definir métodos estáticos.
Utiliza la palabra clave this para acceder a las propiedades y métodos de una clase.
Utiliza la palabra clave new para crear un objeto de una clase.
Utiliza la palabra clave instanceof para comprobar si un objeto es una instancia de una clase.

Ejercicios Objeto y Clases

Esta sección contiene ejercicios para practicar los conceptos aprendidos en la sección de Objetos y Clases.

Objeto y Clases

Los ejercicios de esta sección se basan en el uso de objetos y clases.

Ejercicio 1 - EcmaScript 6

Crea una función que reciba un array de números y utilice la sintaxis de arrow functions para filtrar solo los números pares y retornar un nuevo array con los resultados.

Solución:

const filtrarNumerosPares = numeros => numeros.filter(num => num % 2 === 0);
 
const numeros = [1, 2, 3, 4, 5, 6];
console.log(filtrarNumerosPares(numeros)); // Resultado: [2, 4, 6]

En esta solución, utilizamos la sintaxis de arrow functions para crear una función filtrarNumerosPares que toma un array de numeros y utiliza el método filter para filtrar solo los números pares. Luego, llamamos a la función con el array [1, 2, 3, 4, 5, 6] y mostramos el resultado en la consola.

Desafío adicional:

Modifica la función para que también reciba un segundo parámetro que indique si se deben filtrar los números impares en lugar de los pares.

Ejercicio 2 - Declaración con let y const

Crea una función que utilice la sintaxis de let y const para almacenar un objeto con los datos de una persona, incluyendo su nombre, edad y profesión. Luego, utiliza la sintaxis de string templates para crear un mensaje personalizado que incluya la información de la persona.

Solución:

const crearMensaje = (nombre, edad, profesion) => {
  const persona = {
    nombre,
    edad,
    profesion
  };
 
  const mensaje = `Hola, mi nombre es ${persona.nombre}, tengo ${persona.edad} años y soy ${persona.profesion}.`;
 
  return mensaje;
};
 
console.log(crearMensaje("Juan", 25, "Desarrollador")); // Resultado: "Hola, mi nombre es Juan, tengo 25 años y soy Desarrollador."

En esta solución, creamos una función crearMensaje que toma tres parámetros nombre, edad y profesion y utiliza la sintaxis de let y const para almacenar un objeto persona con los datos. Luego, utiliza la sintaxis de string templates para crear un mensaje personalizado que incluya la información de la persona. Finalmente, llamamos a la función con los valores "Juan", 25 y "Desarrollador" y mostramos el resultado en la consola.

Desafío adicional:

Modifica la función para que permita que los valores de nombre, edad y profesion sean opcionales y proporciona valores por defecto en caso de que no se proporcionen.

Ejercicio 3 - String templates

Crea una función que utilice la sintaxis de string templates para crear un mensaje personalizado que incluya la información de una persona, incluyendo su nombre, edad y profesión.

Solución:

const crearMensaje = (nombre, edad, profesion) => `Hola, mi nombre es ${nombre}, tengo ${edad} años y soy ${profesion}.`;
 
console.log(crearMensaje("Juan", 25, "Desarrollador")); // Resultado: "Hola, mi nombre es Juan, tengo 25 años y soy Desarrollador."

En esta solución, creamos una función crearMensaje que toma tres parámetros nombre, edad y profesion y utiliza la sintaxis de string templates para crear un mensaje personalizado que incluya la información de la persona. Luego, llamamos a la función con los valores "Juan", 25 y "Desarrollador" y mostramos el resultado en la consola.

Desafío adicional:

Modifica la función para que también incluya la información del país de origen de la persona. Si la persona no tiene un país de origen definido, muestra un mensaje genérico que indique que no se dispone de esta información.

Ejercicio 4 - Objetos

Crea una función que utilice la sintaxis de objetos para almacenar la información de una persona, incluyendo su nombre, edad y profesión. Luego, utiliza la notación de punto para mostrar cada propiedad del objeto en la consola.

Solución:

const crearPersona = (nombre, edad, profesion) => {
  const persona = {
    nombre,
    edad,
    profesion
  };
 
  console.log(persona.nombre);
  console.log(persona.edad);
  console.log(persona.profesion);
};
 
crearPersona("Juan", 25, "Desarrollador"); // Resultado: "Juan", 25, "Desarrollador"

En esta solución, creamos una función crearPersona que toma tres parámetros nombre, edad y profesion y utiliza la sintaxis de objetos para almacenar la información en un objeto persona. Luego, utilizamos la notación de punto para mostrar cada propiedad del objeto en la consola. Finalmente, llamamos a la función con los valores "Juan", 25 y "Desarrollador".

Desafío adicional:

Modifica la función para que la información de la persona sea ingresada por el usuario a través de una ventana de diálogo.

Ejercicio 5 - Iterando objetos

Crea una función que utilice la sintaxis de for...in para recorrer las propiedades de un objeto y mostrar cada propiedad y su valor en la consola.

Solución:

const mostrarPropiedades = objeto => {
  for(let propiedad in objeto) {
    console.log(`${propiedad}: ${objeto[propiedad]}`);
  }
};
 
const persona = {nombre: "Juan", edad: 25, profesion: "Desarrollador"};
mostrarPropiedades(persona); // Resultado: "nombre: Juan", "edad: 25", "profesion: Desarrollador"

En esta solución, creamos una función mostrarPropiedades que utiliza la sintaxis de for...in para recorrer las propiedades de un objeto y mostrar cada propiedad y su valor en la consola. Luego, creamos un objeto persona con las propiedades nombre, edad y profesion, y llamamos a la función mostrarPropiedades con el objeto persona.

Desafío adicional:

Modifica la función para que también pueda recorrer las propiedades de un objeto anidado y mostrar su valor en la consola.

Ejercicio 6 - Desestructuración de objetos

Crea una función que utilice la sintaxis de desestructuración de objetos para tomar un objeto con las propiedades nombre y edad, y mostrar cada propiedad en la consola.

Solución:

const mostrarPropiedades = ({nombre, edad}) => {
  console.log(nombre);
  console.log(edad);
};
 
const persona = {nombre: "Juan", edad: 25};
mostrarPropiedades(persona); // Resultado: "Juan", 25

En esta solución, creamos una función mostrarPropiedades que utiliza la sintaxis de desestructuración de objetos para tomar un objeto con las propiedades nombre y edad, y mostrar cada propiedad en la consola. Luego, creamos un objeto persona con las propiedades nombre y edad, y llamamos a la función mostrarPropiedades con el objeto persona.

Desafío adicional:

Modifica la función para que tenga un segundo parámetro que indique cuál propiedad se debe mostrar en la consola.

Ejercicio 7 - Desestructuración de arrays

Crea una función que utilice la sintaxis de desestructuración de arrays para tomar un array con tres elementos y mostrar cada elemento en la consola.

Solución:

const mostrarElementos = ([elemento1, elemento2, elemento3]) => {
  console.log(elemento1);
  console.log(elemento2);
  console.log(elemento3);
};
 
const miArray = ["Manzana", "Banana", "Naranja"];
mostrarElementos(miArray); // Resultado: "Manzana", "Banana", "Naranja"

En esta solución, creamos una función mostrarElementos que utiliza la sintaxis de desestructuración de arrays para tomar un array con tres elementos y mostrar cada elemento en la consola. Luego, creamos un array miArray con tres elementos y llamamos a la función mostrarElementos con el array miArray.

Desafío adicional:

Modifica la función para que tenga un segundo parámetro que indique el número de elementos que se deben mostrar en la consola.

Ejercicio 8 - Clases

Crea una clase Persona con las propiedades nombre y edad, y un método saludar que muestre un mensaje personalizado en la consola.

Solución:

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
 
  saludar() {
    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
  }
}
 
const juan = new Persona("Juan", 25);
juan.saludar(); // Resultado: "Hola, mi nombre es Juan y tengo 25 años."

En esta solución, creamos una clase Persona con un constructor que recibe los parámetros nombre y edad y los asigna a las propiedades nombre y edad de la instancia. Luego, creamos un método saludar que muestra un mensaje personalizado en la consola utilizando las propiedades nombre y edad. Finalmente, creamos una instancia de la clase Persona con el nombre juan y la edad 25, y llamamos al método saludar de la instancia.

Desafío adicional:

Modifica la clase Persona para que también tenga una propiedad profesion, y modifica el método saludar para que incluya la información de la profesión de la persona.

Inicio