Proyecto: Crea un perfil para redes sociales con JavaScript

Clase 18 de 80Curso de JavaScript Desde Cero

Contenido del curso

Primeros Pasos

Funciones y This

Resumen

Aprender los tipos de datos primitivos en JavaScript cobra mucho más sentido cuando los aplicas a algo tangible. En este ejercicio construirás una biografía personalizada para redes sociales utilizando strings, números, booleanos, objetos, arrays y template literals, todo en un solo script que puedes ejecutar con Node.

¿Cómo organizar la información del usuario con variables?

El primer paso es declarar las variables que representan la información básica del perfil. Cada una utiliza un tipo de dato diferente [0:20]:

  • Username: un string con comillas simples que funciona como nombre de usuario, por ejemplo 'codingAdventure'.
  • Full name: otro string con el nombre completo, como 'John Doe'.
  • Age: un número entero que representa la edad, por ejemplo 25.
  • isStudent: un booleano (true o false) que responde si la persona es estudiante.

Una buena práctica al nombrar booleanos es anteponer la palabra is al nombre de la variable. Así, isStudent comunica de inmediato que el valor será verdadero o falso.

¿Cómo representar la dirección con un objeto?

Para agrupar datos relacionados se utiliza un objeto. La dirección se almacena dentro de const address con propiedades como street, city, state y zipCode [1:20]:

javascript const address = { street: '123 Main Street', city: 'Techville', state: 'CodingLand', zipCode: 54321 };

Cada propiedad de texto es un string y el código postal es un número entero. Acceder a un valor específico es tan simple como escribir address.city.

¿Para qué sirve un array de hobbies?

Los hobbies se guardan en un array, una estructura que permite almacenar múltiples valores en una sola variable [1:55]:

javascript const hobbies = ['coding', 'reading', 'gaming'];

Más adelante verás cómo convertir ese array en texto legible gracias al método .join().

¿Cómo construir la biografía con template literals?

Los template literals son cadenas de texto delimitadas por comillas invertidas (`) que permiten insertar expresiones directamente con ${} [2:25]. Así se arma la biografía:

javascript const personalizedBio = Hi! I am ${fullName}. I am ${age} years old. I live in ${address.city}. I love ${hobbies.join(', ')}. Follow me for coding adventures!;

Dentro de cada ${} puedes colocar variables, acceder a propiedades de objetos e incluso ejecutar métodos.

¿Qué hace el método .join() en un array?

El método .join() convierte un array en un string uniendo sus elementos con el separador que indiques [2:55]. Al escribir hobbies.join(', ') el resultado será coding, reading, gaming en lugar de la representación cruda del array. Es una forma limpia de mostrar listas dentro de un texto.

¿Cómo imprimir el resultado en la consola?

Una vez construida la biografía solo necesitas console.log() para visualizarla [3:30]:

javascript console.log(personalizedBio);

Al ejecutar el archivo con node en la terminal, el resultado será algo como:

Hi! I am John Doe.
I am 25 years old.
I live in Techville.
I love coding, reading, gaming.
Follow me for coding adventures!

En un ejercicio corto se combinaron cinco tipos de datos: string, number, boolean, objeto y array, además de una herramienta fundamental como los template literals. Comparte en los comentarios cómo quedó tu propia biografía y qué datos adicionales decidiste incluir.