Variables Javascript

Las variables JavaScript son contenedores para almacenar valores de datos. En este ejemplo, x, y y z son variables.

Ejm

var x = 5;
var y = 6;
var z = x + y;

Es decir:

  • x almacena el valor 5.
  • y almacena el valor 6.
  • z almacena el valor x + y.

Muy parecido al álgebra

En este ejemplo, precio1, precio2 y total son variables.

Ejm

var precio1 = 5;
var precio2 = 6;
var total = precio1 + precio2;

Identificadores Javascript

Todas las variables de JavaScript deben identificarse con nombres únicos. Dichos nombres únicos son llamados identificadores. Los identificadores pueden ser nombres cortos (como x o y) o nombres más descriptivos (edad, suma, totalVolumen…). Las reglas generales para crear nombres de variables (identificadores únicos) son:

  • Los nombres pueden contener letras, dígitos, guiones bajos y signos de dólar.
  • Deben comenzar con una letra.
  • Pueden también comenzar por un guión bajo (_) o un signo de dólar ($).
  • Son Case Sensitive (distinguen mayúsculas de minúsculas).
  • Las palabras reservadas (keywords) no pueden usarse para nombrar variables.

El operador de asignación

En Javascript, el signo igual (=) es un operador de asignación, no un operador de igual. Esto es diferente del álgebra. Lo siguiente no tiene sentido en álgebra.

x = x + 3;

En JavaScript, sin embargo, tiene mucho sentido: asigna el valor de x + 5 a x. (Calcula el valor de x + 5 y pone el resultado en x. El valor de x se incrementa en 5.). El operador “igual a” se escribe como == en JavaScript.

Tipos de datos Javascript

Las variables de JavaScript pueden contener números como 100 y valores de texto como “John Doe”. En programación, los valores de texto se denominan cadenas de texto. JavaScript puede manejar muchos tipos de datos, pero por ahora, solo piensa en números y cadenas. Las cadenas se escriben dentro de comillas dobles o simples. Los números se escriben sin comillas. Si pones un número entre comillas, se tratará como una cadena de texto.

Ejm

var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

Declarando (creando) variables Javascript

Crear una variable Javascript se denomina declarar una variable. Para declarar una variable en Javascript utilizamos la palabra clave var.

Ejm

var carName;

Puedes asignar directamente un valor a dicha variable.

Ejm

var carName = "Volvo"

En el siguiente ejemplo, creamos una variable llamada carName y le asignamos el valor “Volvo”. Luego “extraemos” el valor dentro de un párrafo HTML con id = “demo”.

Ejm

<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

Nota: Es una buena práctica de programación declarar todas las variables al comienzo de un script.

Una declaración, muchas variables

Puedes declarar (crear) muchas variables en una declaración. Comienza la declaración con var y separa las variables por coma.

Ejm

var person = "John Doe", carName = "Volvo", price = 200;

Una declaración puede abarcar varias líneas:

Ejm

var person = "John Doe",
carName = "Volvo",
price = 200;

Valor = Undefined

En los programas de computadora, las variables a menudo se declaran sin un valor. El valor puede ser algo que debe calcularse o algo que se proporcionará más adelante, como la entrada del usuario. Una variable declarada sin un valor tendrá el valor undefined (indefinido). La variable carName tendrá el valor indefinido después de la ejecución de esta declaración.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>A variable declared without a value will have the value undefined.</p>

<p id="demo"></p>

<script>
var carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

El resultado que mostrará es ‘undefined‘ (indefinido) ya que no hemos dado valor a dicha variable.

Re-declarando variables Javascript

Si vuelves a declarar una variable de JavaScript, no perderá su valor. La variable carName seguirá teniendo el valor “Volvo” después de la ejecución de estas declaraciones.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>If you re-declare a JavaScript variable, it will not lose its value.</p>

<p id="demo"></p>

<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Seguirá imprimiendo en pantalla ‘Volvo’.

Aritmética Javascript

Al igual que con el álgebra, puedes hacer aritmética con variables de JavaScript, utilizando operadores como = y +:

Ejm

var x = 5 + 3 + 4;

También puedes agregar cadenas, pero las cadenas se concatenarán.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding "5" + 2 + 3:</p>

<p id="demo"></p>

<script>
x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Mostrará como resultado 523 ya que interpretará que se trata de una cadena al ir el 5 encerrado entre comillas dobles. Si pone un número entre comillas, el resto de los números se tratarán como cadenas y se concatenarán.

Ahora vamos a probar con el siguiente ejm.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding 2 + 3 + "5":</p>

<p id="demo"></p>

<script>
var x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Ahora el resultado impreso en pantalla será 55, los dos primeros números los suma y su resultado lo concatena con el número 5 al que se le tiene encerrado entre comillas dobles por lo que es tratado como string (cadena).

Signo de $ en Javascript

Recuerda que los identificadores de JavaScript (nombres) deben comenzar con.

  • Una letra (A-Z o a-z)
  • Un signo de dolar ($)
  • O un guión bajo (_)

Como JavaScript trata un signo de dólar como una letra, los identificadores que contienen $ son nombres de variables válidos.

Ejm

var $$$ = "Hello World";
var $ = 2;
var $myMoney = 5;

El uso del signo de dólar no es muy común en JavaScript, pero los programadores profesionales a menudo lo usan como un alias para la función principal en una biblioteca de JavaScript.

En la biblioteca JavaScript jQuery, por ejemplo, la función principal $ se usa para seleccionar elementos HTML. En jQuery $ (“p”); significa “seleccionar todos los elementos p”.

Guión bajo en Javascript

Como JavaScript trata el guión bajo como una letra, los identificadores que contienen (_) son nombres de variables válidos.

Ejm

var _lastName = "Johnson";
var _x = 2;
var _100 = 5;

El uso del guión bajo no es muy común en JavaScript, pero una convención entre los programadores profesionales es usarlo como un alias para las variables “privadas (ocultas)”.