Ejemplos de Uso De Variables En JavaScript

Inicio » JavaScript » Uso de variables en JavaScript

Las variables en JavaScript son contenedores de datos que nos permiten almacenar y manipular información en nuestro código. Las variables se declaran utilizando las palabras clave 'var', 'let' o 'const' y pueden almacenar diferentes tipos de datos, como números, cadenas de texto, booleanos, objetos, funciones y arrays. En este artículo te mostramos cómo usar los 3 tipos de variables y te damos ejemplos prácticos.

Contenido del artículo

• ¿Para qué sirven las variables en JavaScript?
• ¿Cómo definir variables en JavaScript?
• Ejemplo de declaración de variables
• Usos y ejemplos explicados
• Ejemplo 1: Calcular el área de un círculo
• Ejemplo 2: Crear una lista de elementos con un array
• 3: Contador de clics en un botón
• ¿Qué tipo de variable debo usar?

¿Para qué sirven las variables en JavaScript?

Las variables nos permiten trabajar con información de manera flexible y eficiente, ya que nos facilitan:

Almacenar y acceder a información dinámica.
Realizar operaciones matemáticas y lógicas.
Crear y manipular estructuras de datos, como objetos y arrays.
Controlar el flujo del programa mediante condicionales y bucles.
Definir y ejecutar funciones.

¿Cómo definir variables en JavaScript?

Las variables en JavaScript se definen utilizando las palabras clave 'var', 'let' o 'const'. Explicación:

var: Se utiliza para declarar variables globales o locales en una función, sin importar el bloque de código. Se desaconseja su uso.
let: Se utiliza para declarar variables limitadas al bloque de código actual.
const: Se utiliza para declarar variables constantes, cuyo valor no puede ser modificado después de su asignación.

Ejemplo de declaración de variables

var nombre = "Juan";
let edad = 25;
const pi = 3.14159265359;

En el siguiente ejemplo, se utilizan los tres tipos de variables (var, let, y const) para diferentes propósitos:

<html>
<body>
<script>
// Variable global con 'var' (evitar su uso en la medida de lo posible)
var contadorGlobal = 0;
function ejemploVariables() {
// Variable 'const' para mantener un valor inmutable
const pi = 3.14159;
// Variable 'let' para mantener un valor mutable dentro de un bloque
let contadorLocal = 0;
for (let i = 0; i < 5; i++) {
// 'i' es una variable 'let' cuyo ámbito está limitado al bucle for
contadorLocal += i;
contadorGlobal += i;
}
console.log("Valor de PI: " + pi); // 3.14159
console.log("Contador local: " + contadorLocal); // 10
}
ejemploVariables();
console.log("Contador global: " + contadorGlobal); // 10
</script>
</body>
</html>

Usos y ejemplos explicados

Ejemplo 1: Calcular el área de un círculo

En este ejemplo, utilizaremos variables para almacenar el valor del radio y calcular el área de un círculo.

<html>
<head>
<script>
const pi = 3.14159265359;
let radio = 5;
let area = pi * Math.pow(radio, 2);
document.write("El área del círculo con radio " + radio + " es: " + area);
</script>
</head>
<body>
</body>
</html>

Ejemplo 2: Crear una lista de elementos con un array

En este ejemplo, utilizaremos variables para almacenar un array de elementos y mostrarlos en una lista HTML.

<html>
<head>
<script>
let frutas = ["Manzana", "Plátano", "Naranja", "Fresa"];
function mostrarFrutas() {
let lista = "<ul>";
for (let i = 0; i < frutas.length; i++) {
lista += "<li>" + frutas[i] + "</li>";
}
lista += "</ul>";
document.getElementById("listaFrutas").innerHTML = lista;
}
</script>
</head>
<body>
<div id="listaFrutas"></div>
<button onclick="mostrarFrutas()">Mostrar lista de frutas</button>
</body>
</html>

3: Contador de clics en un botón

En este ejemplo, utilizaremos una variable para contar cuántas veces se ha hecho clic en un botón y mostrar el resultado en el HTML.

<html>
<head>
<script>
let contador = 0;
function incrementarContador() {
contador++;
document.getElementById("clics").innerHTML = "Clics: " + contador;
}
</script>
</head>
<body>
<button onclick="incrementarContador()">Haz clic aquí</button>
<p id="clics">Clics: 0</p>
</body>
</html>

¿Qué tipo de variable debo usar?

La mejor forma de declarar variables en JavaScript depende de la situación y el alcance que requieras para la variable. En general, se recomienda utilizar let y const en lugar de var, ya que estas dos declaraciones ofrecen un mejor control del ámbito y previenen errores comunes.

Usa const para declarar variables que no cambiarán su valor a lo largo del programa. Esto hace que tu código sea más seguro y fácil de leer, ya que se garantiza que el valor de la variable no cambiará.
Usa let para declarar variables que cambiarán su valor y cuyo alcance debe estar limitado a un bloque específico, como un bucle o una función. Al utilizar let, se evitan problemas relacionados con el "hoisting" y el ámbito global que pueden surgir con var.

¿Cómo citar? & Del Moral, M. (s.f.). Ejemplos de Uso De Variables En JavaScript.Ejemplo de. Recuperado el 13 de Junio de 2024 de https://www.ejemplode.com/24-javascript/520-ejemplo_de_uso_de_variables_en_javascript.html

JavaScript

Escrito por:
Editado por:
Mauricio del Moral Durán
Master en Comunicación
Universidad Intercontinental
Creado el: 2009-01-29
Última modificación: 2023-04-16

Últimos 10 comentarios

hola de nuevo , aqui en este codigo

'declaramos la variable
var nombre;
'asignamos el valor Morris a la variable
nombre="Morris";
'imprimimos la variable
document.write(nombre);
document.write("");
'asignamos otro valor a la variable
nombre="Luffy";
'imprimimos la variable
document.write(nombre);

Cómo declarar una variable, cómo asignarle valor a una variable y como desplegar o escribir una variable con JavaScript.

no imprime la variable nombre..
gracias.. ni con explorer ni firefox..
Por jose 2011-02-26 a las 16:52:15
la variable x mas z ma y da una variable de positiva

Por jair 2010-09-21 a las 2:32:58