Aprender variables y tipos de datos en JavaScript es el primer paso para entender cómo piensa un lenguaje de programación, y si vienes del diseño en Figma, ya tienes más camino recorrido del que imaginas. Esta guía te muestra cómo declarar variables, cuáles son los tipos básicos y cómo probarlos en un playground, pensada para diseñadoras y diseñadores que quieren dar el salto al código.

¿Qué tienen en común Figma y JavaScript?

Antes de escribir una línea de código, vale la pena mirar Figma con otros ojos. Cuando creas un componente, defines propiedades que se comportan exactamente como en programación.

En un componente de Figma encuentras al menos tres tipos de datos dentro de sus propiedades [0:35]:

• Un state con opciones, que funciona como una variable: guarda un dato y cambia el comportamiento del componente según lo que selecciones.
• Una instancia, que llama a otro componente creado en otra parte del archivo.
• Un valor booleano, que decide si un ícono se muestra o no, con lógica de verdadero o falso.

Esa lógica de instancia, texto y booleano es la misma que usa JavaScript en su sintaxis. Y aquí viene lo interesante: si entiendes Figma, ya entiendes la mitad del juego.

¿Cómo se escribe código en JavaScript paso a paso?

Para practicar, en la clase se usa RunJS, una aplicación tipo playground donde escribes código a la izquierda y ves el resultado a la derecha [2:24]. Es ideal para experimentar sin complicarte con configuraciones.

¿Qué es una declaración en programación?

Una declaración es una instrucción que le das al lenguaje para que ejecute algo. Si quisieras inventar tu propio lenguaje, un Spanish JS, podrías escribir tres declaraciones para sumar dos números [3:46]:

1. Quiero que tomes un número.
2. Y que lo sumes con otro número.
3. El resultado me lo entregues.

Así funciona cualquier lenguaje, ya sea Python, Go o Java: a través de declaraciones que indican al computador qué tomar, qué operar y qué mostrar. El detalle es que el computador no entiende español, así que necesitas la sintaxis correcta de JavaScript.

¿Qué es una declaración en JavaScript? Es cada instrucción que le das al lenguaje, escrita con su sintaxis específica, para que ejecute una acción concreta como guardar un dato, operar con él o mostrarlo en pantalla.

¿Cómo declarar variables en JavaScript con let?

Una variable es una porción de información guardada en memoria con un nombre que tú eliges. Puede contener un texto, un número o incluso una imagen, y la puedes reutilizar cuando quieras [5:30].

En JavaScript usas la palabra reservada let, llamada así porque solo sirve para declarar variables y no puedes usarla con otros propósitos [6:00]. La estructura es simple:

javascript let edad = 29;

Esa línea le dice al programa: crea una variable llamada edad con el valor 29. El punto y coma cierra la declaración.

¿Cómo mostrar el valor de una variable con console.log?

Para ver el resultado a la derecha en RunJS, usas el método console.log y entre paréntesis pones la variable que quieres mostrar [6:48]:

javascript console.log(edad);

También puedes combinar texto con variables usando el operador + y comillas simples o dobles:

javascript console.log('Esta es mi edad ' + edad);

El espacio antes de cerrar la comilla evita que el texto y el número queden pegados.

¿Cuáles son los tipos de datos básicos en JavaScript?

Cada variable tiene un tipo, y de ese tipo depende cómo se comporta cuando operas con ella. Si pasas el mouse sobre una variable en RunJS, verás su tipo de inmediato.

¿Qué diferencia hay entre number y string?

Un number es un valor numérico puro, como 29. Un string es una cadena de texto y se escribe entre comillas, como '29' [7:54]. Aunque el contenido se vea igual, JavaScript los trata de forma distinta cuando los operas.

javascript let edadString = '29'; let edadNumber = 29;

¿Qué es un booleano y para qué sirve?

Un booleano solo puede ser true o false, igual que la propiedad de mostrar u ocultar un ícono en Figma [8:50]. También puedes pensar en 0 como falso y 1 como verdadero, aunque técnicamente esos son números.

javascript let bool = true;

¿Qué es un dato booleano en JavaScript? Es un tipo de dato que solo admite dos valores: true o false. Sirve para decisiones lógicas, como mostrar u ocultar un elemento.

¿Qué es un arreglo y cómo se accede a sus elementos?

Un arreglo es un conjunto de variables o elementos guardados juntos, cada uno en una posición [9:43]. Se escribe entre corchetes y los elementos se separan por comas:

javascript let arreglo = [edadString, edadNumber, bool];

Las posiciones se cuentan desde cero. Para acceder a un elemento específico, indicas su índice entre corchetes [10:35]:

javascript console.log(arreglo[1]); // muestra 29

En este caso, la posición 1 corresponde a edadNumber, porque la posición 0 es el primer elemento.

¿Cómo accedo a un elemento de un arreglo en JavaScript? Escribes el nombre del arreglo seguido de corchetes con la posición numérica del elemento, empezando desde 0 para el primero.

¿Por qué un diseñador debería aprender JavaScript?

JavaScript es un lenguaje muy popular y muy versátil que aporta interacción a los sitios web, define transiciones y permite traer información desde un servidor [11:15]. Sus límites son amplios, y tener nociones como diseñadora o diseñador te abre la puerta a colaborar mejor con el equipo de desarrollo y a prototipar con más profundidad.

Si ya practicaste estos ejemplos en RunJS, cuéntame en los comentarios qué variable creaste primero y qué tipo de dato te resultó más confuso al empezar.