Curso de JavaScript | 4. Variables en JavaScript

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Variables en JavaScript
Las variables se pueden crear y usar en JavaScript (al igual que en cualquier otro lenguaje de programación). En los siguientes ejemplos, puede que no sea inmediatamente obvio por qué, por ejemplo, el nombre se empaqueta en una variable y luego se genera cuando el nombre también podría generarse de inmediato. Estos ejemplos sirven para mostrar el uso. Más tarde vamos a ver que cualquier contenido puede estar en estas variables, por ejemplo, horas alternas, en donde el programa JavaScript creado realiza luego diferentes acciones dependiendo del tiempo.

Para establecer una variable, se asigna un nombre de variable. Este puede ser (casi) cualquiera. Hay algunas excepciones, pero eso no es tan importante para empezar.

En el primer paso creamos una variable y en el segundo paso llenamos esta variable con contenido.

Para causar cierta confusión de inmediato, introduzco 2 comandos para esto:

• Uno antiguo (que por supuesto aparece en muchos ejemplos y libros).
• Y la nueva y mejor versión del comando.

Ambos comandos hacen lo mismo; mostraré las sutiles diferencias más adelante.


Crear/definir variables
Para definir una variable, se usa el comando de JavaScript var (que es la vieja variante) o el comando más nuevo let.

<script>
var contenido;
</script>

O en la nueva forma:

<script>
let contenido;
</script>

Así le hemos dicho a JavaScript que hay una variable llamada contenido.

A continuación solo continuaré con la nueva variante let - más adelante se seguirá con la comparación entre la variante antigua y la nueva.


Asignar un contenido a una variable
Ahora hemos definido una variable; sin embargo, la variable aún no tiene ningún contenido o valor. Después de definir la variable, podemos asignarle un valor a esa variable:

<script>
let contenido;
contenido = 'Hola mundo';
</script>

Después del signo igual, asignamos el texto "Hola mundo" a la variable denominada contenido. Para este propósito, el texto se empaqueta entre comillas. ¡En un texto estático, no importa si son comillas simples o dobles! Las comillas dobles también podrían usarse en el ejemplo:

contenido = "Hola mundo";

Y ahora podemos trabajar con esta variable, es decir, podemos mostrar el contenido de la variable en la pantalla.

<script>
let contenido;
contenido = 'Hola mundo';
document.write(contenido);
</script>

La salida en la pantalla es "Hola mundo".

Por supuesto, también podemos trabajar con el contenido de la variable, es decir, por ejemplo, realizar cálculos y otras cosas. Estas posibilidades se mostrarán en los siguientes capítulos. En primer lugar, sigamos con el uso correcto de las variables.


Definir una variable y asignarle un valor en una línea
Se comienza con let y luego con el nombre de la variable y la asignación del contenido (entre ambos un signo igual).

En la salida, ahora se proporciona el nombre de la variable en lugar del texto (¡sin comillas!).

<script>
let contenido = 'Hola mundo';
document.write(contenido);
</script>

También es posible omitir let, pero entonces creamos una variable global, que puede tener sus inconvenientes al usar funciones. Más sobre este tema con las funciones más adelante. ¡Así que tene cuidado aquí! Como resultado, el siguiente programa JavaScript es el mismo.

<script>
contenido = 'Hola mundo';
document.write( contenido );
</script>

No es un buen estilo establecer variables globales a menos que realmente se necesiten globalmente.


Mayúsculas y minúsculas: nombres de variables en JavaScript
Otro peligro con las variables es la ortografía de los nombres de las variables. Estos son "Case-sensitivitys", es decir, la variable con el nombre variablepropia es diferente de variablePropia - ¡presta atención a las mayúsculas y minúsculas!

La salida ilustra esto en el ejemplo:

let variablepropia = "Hola";
let variablePropia = "mundo";
alert (variablepropia);

Por lo tanto, tene mucho cuidado aquí: es bueno si el editor de texto sugiere variables que ya están en uso, que simplemente se puedan adoptar. Menos errores tipográficos - más diversión con JavaScript.


Diferencias entre let y var
El comando let de JavaScript es más nuevo y está definido mucho más. Esto debería facilitar la creación de programas estables y sin errores. Por ejemplo, se puede definir una variable solo una vez usando let. Si se tuviera que definir nuevamente la variable más adelante en el código usando let, se recibiría un mensaje de error.

¡El siguiente programa sale mal!

let contenido = "Hola";
let contenido = "mundo";
alert (variablepropia);

Por otro lado, la vieja variante a través de var funciona sin un mensaje de error porque la verificación no es tan precisa allí. Si bien esto puede parecer una ventaja a primera vista, conlleva el riesgo de un código descuidado y de tener errores en el programa.

var contenido = "Hola";
var contenido = "mundo";
alert (variablepropia);

Hay otras diferencias entre let y var. Sin embargo, estas solo se vuelven comprensibles cuando conozcamos las funciones y usamos variables allí. Volveré a las diferencias entre let y var en el capítulo correspondiente.