Las variables de JavaScript se pueden declarar de 4 formas:
Automáticamente
Usando var
Usando let
Usando const
En este primer ejemplo, x, y y z son variables no declaradas.
Se declaran automáticamente cuando se utilizan por primera vez:
x = 5;
y = 6;
z = x + y;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Se considera una buena práctica de programación declarar siempre las variables antes de su uso.
De los ejemplos puedes adivinar:
x almacena el valor 5
y almacena el valor 6
z almacena el valor 11
var x = 5;
var y = 6;
var z = x + y;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
La palabra clave var se utilizó en todo el código JavaScript desde 1995 hasta 2015.
Las palabras clave let y const se agregaron a JavaScript en 2015.
La palabra clave var solo debe usarse en código escrito para navegadores más antiguos.
let x = 5;
let y = 6;
let z = x + y;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
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.
El valor total se puede cambiar.
1. Declarar siempre variables
2. Utilice siempre const si el valor no debe cambiarse
3. Utilice siempre const si no se debe cambiar el tipo (matrices y objetos)
4. Utilice únicamente let si no puede utilizar const
5. Utilice únicamente var si DEBE admitir navegadores antiguos.
Al igual que en álgebra, las variables contienen valores:
let x = 5;
let y = 6;Al igual que en álgebra, las variables se utilizan en expresiones:
let z = x + y;A partir del ejemplo anterior, puedes adivinar que el total calculado es 11.
Las variables son contenedores para almacenar valores.
Todas las variables de JavaScript deben ser identificado con nombres únicos.
Estos nombres únicos se denominan identificadores.
Los identificadores pueden ser nombres cortos (como xey) o nombres más descriptivos (edad, suma, volumen total).
Las reglas generales para construir nombres de 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 utilizar como nombres.
Los identificadores de JavaScript distinguen entre mayúsculas y minúsculas.
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.)
El operador "igual a" está escrito como == en JavaScript.
Las variables de JavaScript pueden contener números como 100 y valores de texto como "John Gama".
En programación, los valores de texto se denominan cadenas de texto.
JavaScript puede manejar muchos tipos de datos, pero por ahora, sólo piense en números y cadenas.
Las cadenas se escriben entre comillas dobles o simples. los numeros estan escritos sin comillas.
Si pones un número entre comillas, será tratado como una cadena de texto.
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Crear una variable en JavaScript se llama "declarar" una variable.
Declaras una variable JavaScript con la palabra clave var o let:
var carName;let carName;Después de la declaración, la variable no tiene valor (técnicamente es undefinido).
Para asignar un valor a la variable, utilice el signo igual:
carName = "Volvo";También puedes asignar un valor a la variable cuando la declaras:
let carName = "Volvo";En el siguiente ejemplo, creamos una variable llamada carName y asignamos el valor "Volvo" para ello.
Luego "generamos" el valor dentro de un párrafo HTML con id="demo":
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Es una buena práctica de programación declarar todas las variables al comienzo de un script.
Puede declarar muchas variables en una sola declaración.
Iniciar la declaración con let y separa las variables por coma:
let person = "John Doe", carName = "Volvo", price = 200;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Una declaración puede abarcar varias líneas:
let person = "John Doe",
carName = "Volvo",
price = 200;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
En los programas de computadora, las variables a menudo se declaran sin valor. El valor puede ser algo que deba calcularse o algo que se proporcionará más tarde, como la entrada del usuario.
Una variable declarada sin valor tendrá el valor indefinido.
La variable carName tendrá el valor undefinido después de la ejecución de esta declaración:
let carName;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Si vuelve a declarar una variable JavaScript declarada con var, no perderá su valor.
La variable carName seguirá teniendo el valor "Volvo" después de la ejecución de estas declaraciones:
var carName = "Volvo";
var carName;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<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>
No puede volver a declarar una variable declarada con let o const.
Esto no funcionará:
let carName = "Volvo";
let carName;Al igual que con el álgebra, puedes hacer aritmética con variables de JavaScript, usando operadores como = y +:
let x = 5 + 2 + 3;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
También puedes agregar cadenas, pero las cadenas estarán concatenadas:
let x = "John" + " " + "Doe";Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Prueba también esto:
let x = "5" + 2 + 3;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Si pone un número entre comillas, el resto de los números se tratarán como cadenas y se concatenarán.
Ahora prueba esto:
let x = 2 + 3 + "5";Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Dado que JavaScript trata un signo de dólar como una letra, los identificadores que contienen $son nombres de variables válidos:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
Usar el signo de dólar no es muy común en JavaScript. pero los programadores profesionales lo utilizan a menudo como alias para la función principal en una biblioteca de JavaScript.
En la biblioteca JavaScript jQuery, por ejemplo, la función principal $ se utiliza para seleccionar elementos HTML. En jQuery $ ("p"); significa "seleccionar todos los p elementos".
Dado que JavaScript trata el guión bajo como una letra, los identificadores que contienen _ son nombres de variables válidos:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
Usar el guión bajo no es muy común en JavaScript, pero una convención entre los programadores profesionales es usarlo como alias para Variables "privadas (ocultas)".