Esta es la parte 3 de la serie de publicaciones del blog sobre JavaScript que te ayudará a explorar el tema de las variables y los tipos de datos en JavaScript. Al final de esta serie, conocerás todos los conceptos básicos que necesitas saber para comenzar a programar en JavaScript. Sin más preámbulos, comencemos con el tercer tutorial.
En esta publicación del blog continuaremos desde donde lo dejamos en la segunda publicación del blog. En esta etapa, deberías tener abierto tu navegador Google Chrome y, más específicamente, tener abierta tu consola de JavaScript. Si por alguna razón las cerraste, sería un buen momento para volver a abrirlas.
Si estás en un Mac, el atajo de teclado para abrir la consola es presionar “Opción + Comando + J”, después de abrir Chrome. Si estás usando un dispositivo Windows, puedes usar el atajo de teclado “Control + Shift + J” para abrir la Consola de JavaScript, una vez que abras Chrome. O también puedes ir al menú en la parte superior y seleccionar Ver -> Desarrollador -> Consola de JavaScript.
Las variables en JavaScript o en cualquier otro lenguaje de programación son extremadamente comunes. Y es por una buena razón. Las variables tienen un papel muy crítico en la programación. En pocas palabras, las variables te permiten almacenar algunos datos para moverlos, modificarlos, actualizarlos o eliminarlos en tu programa. De hecho, es un concepto tan importante que hay 3 formas de crear variables. El término de programación para crear variables se llama “declarar variables”, lo que básicamente significa que estamos declarando una variable en la memoria de la computadora.
Para crear las variables, utilizaremos una de las 3 palabras clave y son: “var”, “let” y “const”. Una de las primeras cosas que debes saber sobre estas 3 palabras clave es que hasta 2015, solo se utilizaba la palabra clave “var” y las palabras clave “let” y “const” se introdujeron con un estándar de JavaScript llamado ES6 o ES2015.
Si no tienes idea de qué es ES6 o ES2015, aquí está lo que debes saber al respecto. Cuando JavaScript salió por primera vez, diferentes empresas implementaron diferentes versiones de JavaScript, y tenía que haber un estándar para que tu código se ejecutara de manera predecible y confiable en todos los navegadores principales. Así que una organización llamada ECMA (Asociación Europea de Fabricantes de Computadoras) ideó un conjunto de estándares de JavaScript que los navegadores deberían implementar. De modo que, siempre que sigas esos estándares al escribir JavaScript, tu código debería ejecutarse de manera predecible de acuerdo con esos estándares. Este estándar se llama EcmaScript y han estado publicando los estándares actualizados desde 1997. Y desde 2015, han estado publicando estos estándares anualmente, y por lo tanto, el último estándar publicado se llama ES2021 al momento de escribir esta publicación del blog.
Pero no todas las versiones son iguales, algunas diferencias de versión no son tan grandes, mientras que algunas introducen cambios bastante importantes en el lenguaje. Los últimos cambios importantes ocurrieron con ES2015, también llamado ES6, ya que fue el lanzamiento de la versión seis de la estandarización de ECMAScript. Uno de los cambios significativos se produjo en las declaraciones de variables.
Antes de ES6, solo se utilizaba la palabra clave “var” y era la única forma de declarar variables, de ahí el nombre “var”. La palabra clave var venía con flexibilidad que podría causar problemas no deseados. Debido a que era significativamente flexible en su uso, era más fácil cometer errores con las variables si no tenías el cuidado necesario. Por ejemplo, si declarabas una variable llamada “user1”, no podías volver a declarar una variable llamada user1 con las nuevas palabras clave “let” y “const”, pero podías hacerlo con la palabra clave “var”. Y si olvidas que ya tienes un user1 en tu programa, la segunda vez que declares el user1 con la información de otro usuario, estarías sobrescribiendo la información del primer usuario, lo que efectivamente eliminaría la información del primer usuario.
// esto puede causar confusión var user1 = "John"; var user1 = "Jack"; // si intentas hacer lo mismo // con let o const obtendrás un error let user1 = "John"; let user1 = "Jack"; // igualmente también obtendrás un error // si intentas hacer lo mismo con la palabra clave const const user1 = "John"; const user1 = "Jack";
Pero no es que no verás la palabra clave “var” utilizada en ningún lugar, ciertamente la verás, especialmente en algunos cursos de JavaScript de nivel principiante. Especialmente si son de hace un par de años, hay muchos tutoriales que aún te mostrarán la forma antigua de escribir JavaScript. Pero la realidad es que simplemente no es la mejor práctica usar eso ya. En su lugar, la mejor práctica es usar las palabras clave “let” o “const” al declarar variables, dependiendo de tus necesidades. Pero, ¿de qué necesidades estamos hablando? En pocas palabras, si planeas cambiar el valor dentro de una variable, querrás usar la palabra clave “let”, si sabes que no cambiarás el valor en una variable, querrás optar por “const” en su lugar. Veamos algunos ejemplos de declaraciones de variables usando tanto let como const.
// podemos usar "let" cuando queremos rastrear el nivel de juego del usuario // porque sabemos que cambiará let gameLevel = 1; gameLevel = 2; gameLevel = 3; // podemos usar la palabra clave "const" al declarar el ID del usuario // porque sabemos que no lo cambiaremos const userId = 1010101999;
Si también notaste en el código anterior, con las últimas mejores prácticas, solo escribimos las palabras clave de declaración una vez, y lo hacemos cuando estamos declarando la variable por primera vez. Cuando queremos cambiar el valor dentro de la variable más adelante, no usamos ninguna palabra clave antes del nombre de la variable.
Cuando queremos acceder a los datos que estas variables o constantes contienen, simplemente podemos usar su nombre. Por ejemplo, si queremos mostrar al usuario su nivel de juego y su ID de usuario, lo hacemos con el siguiente código:
// podemos agregar el userID al final de la oración con un signo más // explicaremos esto más adelante en el tutorial alert("Tu ID de usuario es: " + userId); // también podemos mostrar al usuario su nivel de juego como el siguiente alert("Tu nivel de juego actual es: " + gameLevel); // alternativamente, también podemos mostrar directamente // el contenido de las variables mostrándolas dentro de una alerta alert(userId); alert(gameLevel);
Ejecutar los últimos dos bloques de código proporcionaría las siguientes salidas:
Al nombrar tus variables, hay ciertas reglas y convenciones que debes considerar. La primera consideración es qué caracteres puedes usar para nombrar tus variables. ¿Pueden comenzar o terminar con un número? ¿Hay una verdad común no dicha para nombrar tus variables? Vamos a responder todo eso y más.
Diferentes lenguajes de programación tienen diferentes convenciones para nombrar variables. En JavaScript, la convención es nombrarlas con lo que se llama “camel casing”, y va así. Si el nombre de la variable tiene solo una palabra, entonces solo escribes esa palabra en minúsculas. Si hay múltiples palabras en el nombre de la variable, entonces escribes la primera palabra en minúsculas y capitalizas todas las palabras subsiguientes y las escribes sin espacios ni otros signos. Por ejemplo, si estamos haciendo un juego, podríamos nombrar las variables de la siguiente manera:
// una variable de una sola palabra let strength = 50; // un nombre descriptivo que incluye múltiples palabras let numberOfArrowsLeft = 145;
Además de usar caracteres alfabéticos, también podemos usar números, el signo de dólar y el signo de subrayado en los nombres de las variables. Es importante notar que no puedes comenzar el nombre de la variable con un número, pero puedes terminarlo con un número.
let some$$ = 100; let another_$ = 20; let car1 = "Tesla";
Ten en cuenta que solo porque es posible, no queremos nombrar nuestras variables con nombres poco claros o con símbolos. Y ese es otro tema por sí mismo. Al nombrar variables, la convención es tener nombres claros y descriptivos. Por ejemplo, si vamos a nombrar una variable para denotar cuántas flechas quedan en la bolsa de un arquero, deberíamos usar un nombre descriptivo como el que usamos en el ejemplo anterior. Si usáramos solo:
let x = 145;
Este nombre no nos diría nada sobre el valor que contiene. Y incluso un par de días después de escribir este código, tendríamos que leer el código circundante para entender qué podría significar esa variable. Por eso, tanto para tu propia claridad al escribir el código, como para tu futuro yo que podría revisar el código, es realmente importante que te acostumbres a nombrar tus variables de manera clara y descriptiva. Esto también se volverá aún más importante cuando comiences a trabajar con otras personas y les muestres tu código.
En este punto, quizás estés pensando: Es genial que podamos mover los datos y incluso cambiarlos usando variables. Pero, ¿qué datos estamos hablando aquí? ¿Por qué pusimos partes entre comillas y algunas partes no están entre comillas? Para responder a todo eso y más, veamos los tipos de datos básicos en JavaScript.
Diferentes tipos de datos son buenos para hacer diferentes cosas. En este tutorial sobre los tipos de datos básicos en JavaScript, veremos los 3 tipos de datos más básicos que se utilizan comúnmente en JavaScript. Más adelante en la serie, aprenderemos sobre otros tipos de datos en JavaScript. Una vez que aprendas estos primeros 3 tipos de datos básicos, será mucho más fácil aprender los otros tipos de datos. Los 3 tipos de datos que veremos en este tutorial son: Cadenas, Números y Booleanos. Sin más preámbulos, comencemos con el primero.
Si has estado siguiendo el tutorial desde el principio, ¡ya has trabajado con el tipo de dato cadena! Cuando escribimos una alerta que decía “¡Hola, Mundo!”, eso estaba utilizando el tipo de dato cadena para almacenar el texto que escribimos. En JavaScript hay 3 formas de representar cadenas. La primera es rodear tu texto con comillas dobles. La segunda es rodear tu texto con comillas simples. Y la tercera es rodear tu texto con comillas invertidas. Las tres se ven así:
const string1 = "Algun texto aquí."; const string2 = 'Algun texto aquí.'; const string3 = `Algun texto aquí.`;
Como puedes ver, la que tiene “comillas invertidas” se ve bastante similar a la comilla simple, pero es un poco más relajada. El uso de comillas invertidas para crear cadenas es una característica que se introdujo con ES6, para facilitar el trabajo con datos textuales. Proporciona múltiples ventajas sobre las otras dos anteriores. Por convención, puedes ver que se utilizan más a menudo las comillas dobles o las comillas invertidas. Puedes encontrar las comillas invertidas en la tecla izquierda del número 1 en tu teclado.
El uso de comillas dobles se ve más familiar y es más fácil de entender a primera vista, pero las comillas invertidas vienen con más ventajas en general. En este ejemplo, las 3 funcionan de la misma manera, ya que es un ejemplo simple. Para mostrar las tres al mismo tiempo, o incluso en la misma línea, una cosa que podemos hacer es escribir sus nombres y usar el signo más entre ellas, de manera que se sumen las cadenas entre sí.
alert(string1 + string2 + string3);[/code> <img src="https://firmbee.com/wp-content/uploads/f-1-800x419.png" alt="variables_and_data_types_in_javascript" width="800" height="419" class="alignnone size-medium wp-image-18937 img-fluid" /><p>Como puedes ver, las 3 se muestran justo después de que una de ellas termina. Esto se debe a que simplemente le dijimos al intérprete que sumara las cadenas entre sí. Si queremos agregar espacios entre ellas, siempre podemos agregar ese espacio con otra cadena.</p> [code lang="js"]alert(string1 + " " + string2 + " " + string3);
También podemos verificar el tipo de dato de una variable escribiendo “typeof” delante de ella. Por ejemplo:
alert(typeof string1);
Cuando trabajamos con números en JavaScript, generalmente estamos utilizando el tipo de dato “Número”. Es el más simple para comenzar y casi no tiene curva de aprendizaje.
Cuando escribes un número, se representa en el tipo de número. Y si asignamos ese número a una variable o constante, también tendrán el tipo de dato número.
let someNumber = 5; const score = 90; alert(typeof someNumber); alert(typeof score);
Además de los números regulares que tenemos, JavaScript también proporciona otras características que pueden ayudarnos a escribir código más seguro y predecible. Por ejemplo, en JavaScript podemos tener algo llamado “Infinito”, y es exactamente lo que suena. Además, puede ser infinito positivo e infinito negativo. Veamos cómo se ve con un ejemplo.
// podemos dividir por cero y eso no genera un error // en su lugar, devuelve Infinito alert(13 / 0);
// de manera similar, también podemos obtener infinito negativo alert(-25 / 0);
Como ya has visto con un par de ejemplos, también podemos realizar operaciones aritméticas con números. Desde la suma, resta, multiplicación y división básicas hasta operaciones aritméticas más específicas de programación. Aprenderemos más sobre ellas en el próximo tutorial.
Los booleanos son extremadamente comunes en programación. La mayoría de las veces no usaremos explícitamente sus nombres, pero utilizaremos su simple propiedad en segundo plano. Un booleano puede tener dos valores: “verdadero” y “falso” y son exactamente lo que suenan. Muchas veces te encontrarás escribiendo código para hacer una comparación y una conclusión basada en el resultado de esa comparación.
Muchas veces estas comparaciones están arraigadas en escenarios de la vida real y siguen una lógica simple. ¿Está la luz encendida o apagada? ¿Está lloviendo afuera? ¿Tienes hambre? ¿Es este número mayor que el otro número? ¿Es este párrafo más largo que el siguiente? ¿Está el usuario en una pantalla grande?
Hay muchas ocasiones en las que no solo quieres tener un valor numérico o un valor de cadena para las cosas, sino que realmente quieres una respuesta de sí o no. En pocas palabras, en esos momentos, utilizaremos el tipo de dato booleano.
// ¿es el primer número mayor que el segundo? alert(13 > 12);
// verificar el tipo de variable let isRainyOutside = true; alert(typeof isRainyOutside);
Ejecutar este código nos daría la siguiente salida:
Ahora sabes sobre variables y tipos de datos en JavaScript. En la próxima publicación del blog utilizaremos estos tipos de datos para comenzar a tomar decisiones en nuestro código y mucho más!
Si te gusta nuestro contenido, no olvides unirte a nuestra comunidad de Facebook!
Experto en JavaScript e instructor que capacita a departamentos de TI. Su objetivo principal es aumentar la productividad del equipo enseñando a otros cómo cooperar de manera efectiva mientras programan.
Los destinatarios recurren cada vez más a materiales en video. Las formas escritas se vuelven…
La redacción publicitaria se ha convertido en una profesión extremadamente popular en tiempos recientes. Hay…
¿Alguna vez tienes la sensación de que el día es demasiado corto para hacer todo…
¿Qué es el software? ¿Cuáles son los tipos y métodos de distribución? Manteniéndonos en el…
Presentar y comunicar los hallazgos de la investigación es probablemente una de las habilidades más…
¿Sabes cómo crear un ebook? ¿Conoces todos los aspectos esenciales del proceso de producción de…