Existen 4 maneras de crear una variable en Javascript:

  • Usando var
  • Usando let
  • Usando const
  • No usando nada

Que son las variables

Las variables son contenedores para almacenar datos (almacenar valores de datos).

En este ejemplo, x, y y z son variables declaradas con la palabra clave var:

Ejm

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

En este ejemplo, x, y y z son variables declaradas con la palabra clave let.

Ejm

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

En este ejemplo, x, y y z son variables no declaradas:

Ejm

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

De todos los ejemplos anteriores, puedes adivinar:

  • x almacena el valor 5
  • y almacena el valor 6
  • z almacena el valor 11

¿Cuándo usar var?

Declara siempre las variables de JavaScript con var, let, or const. La palabra clave var se usa en todo el código JavaScript desde 1995 hasta 2015. Las palabras clave let y const se agregaron a JavaScript en 2015. Si desea que su código se ejecute en un navegador anterior, debe usar var.

Cuando usar const

Si quieres una regla general: declara siempre las variables con const. Si cree que el valor de la variable puede cambiar, usa let. En este ejemplo, precio1, precio2 y total son variables:

Las dos variables precio1 y precio2 se declaran con la palabra clave const. Estos son valores constantes y no se pueden cambiar. La variable total se declara con la palabra clave let. Este es un valor que se puede cambiar.

Al igual que en álgebra

Como en álgebra, las variables almacenan valores.

Ejm

let x = 5;
let y = 6;

Al igual que en álgebra, las variables se usan en expresiones:

Ejm

let z = x + y;

Identificadores Javascript

Todas las variables de JavaScript deben identificarse con nombres únicos. Estos nombres únicos se denominan identificadores. Los identificadores pueden ser nombres cortos (como x e y) o nombres más descriptivos (edad, suma, volumen total). Las reglas generales para construir nombres para variables (identificadores únicos) son:

  • Los nombres pueden contener letras, dígitos, guiones bajos y signos de dólar.
  • Los nombres deben comenzar con una letra.
  • Los nombres también pueden comenzar con $ y _ (pero no lo usaremos en este tutorial)
  • Los nombres distinguen entre mayúsculas y minúsculas (y e Y son variables diferentes)
  • Las palabras reservadas (como las palabras clave de JavaScript) no se pueden usar como nombres

Los identificadores Javascript son Case Sensitive.

El operador de asignación

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

x = x + 5

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).

Nota: El operador "igual a" se escribe como == en JavaScript.

Tipos de datos en 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 piense en números y cadenas. Las cadenas se escriben entre comillas simples o dobles. Los números se escriben sin comillas. Si pone un número entre comillas, se tratará como una cadena de texto.

Ejm

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

Declarando una variable en Javascript

Crear una variable en JavaScript se llama "declarar" una variable. Declaras una variable de JavaScript con la palabra clave var o let.

Ejm

var carName;

o

let carName;

Después de la declaración, la variable no tiene valor (técnicamente no está definida). Para asignar un valor a la variable, utilice el signo igual:

carName = "Volvo";

También puedes asignar un valor a la variable cuando la declara.

Ejm

let carName = "Volvo";

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

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejm13</title>
</head>
<body>
    <h1>Invocando variables</h1>
    <p>Creamos una variable, la asignamos un valor y la mostramos</p>
    <p id="demo"> </p>
    <script>
        let carName = "Volvo";
        document.getElementById("demo").innerHTML = carName;
    </script>
</body>
</html>

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 muchas variables en una declaración. Inicia la instrucción con let y separa las variables con comas.

Ejm

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

Una declaración puede abarcar varias líneas.

Ejm

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

Value = undefined

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

Re-declarando variables

Si vuelves a declarar una variable de JavaScript declarada con var, no perderá su valor. La variable carName seguirá teniendo el valor "Volvo" después de la ejecución de estas sentencias:

Ejm

var carName = "Volvo";
var carName;

Nota: No puedes volver a declarar una variable declarada con let o const. Esto no funcionará:

Ejm

let carName = "Volvo";
let carName;

Aritmética JavaScript

Al igual que con el álgebra, puedeshacer aritmética con variables de JavaScript, usando operadores como = y +.

Ejm

let x = 5 + 2 + 3;

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

Ejm

let x = "John" + " " + "Doe";

Prueba también esto:

let x = "5" + 2 + 3;

Nota: Si pones un número entre comillas, el resto de los números se tratarán como cadenas y se concatenarán.

Prueba ahora ésto.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>El resultado de añadir 2 + 3 + "5" is:</p>
<p id="demo"></p>

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

</body>
</html>

El signo de dólar en Javascript

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

Ejm

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

Usar el 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 p elementos".

Guión bajo en Javascript (_)

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

Ejm

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

Usar el 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)".