Fundamentos

Variables en JavaScript

Las variables son elementos esenciales en cualquier lenguaje de programación. En JavaScript, las variables se utilizan para almacenar valores y hacer referencia a ellos en nuestro código.

Declaración de variables

En JavaScript, podemos declarar variables usando las palabras clave var, let, o const. La diferencia entre estas tres es cómo manejan el alcance y la asignación de valores.

var

La palabra clave var se utiliza para declarar variables globales o locales en una función sin importar el bloque en el que se declare.

var miVariable = "Hola mundo";

En el ejemplo anterior, la variable miVariable es declarada en el ámbito global. Esto significa que la variable miVariable puede ser accedida desde cualquier parte del código. También es posible declarar variables e inicializarlas o asignarle valores más adelante.

// Declaración de variables
var nombre;
 
// Asignación de valores
nombre = "Juan";
 
// Declaración de variables
var edad, programas, numeroIdentificacion;
 
// Asignación de valores
edad = 30;
programas = true;
numeroIdentificacion = 123456789;

let

La palabra clave let se utiliza para declarar variables locales en un bloque, declaración o expresión, y solo está disponible dentro del bloque en el que se declara.

let miVariable = "Hola mundo";

const

La palabra clave const se utiliza para declarar variables de solo lectura que no pueden ser reasignadas. El valor de una variable const no puede cambiar a lo largo de la ejecución del programa.

const miVariable = "Hola mundo";

Ejemplo

Cuando usar var, let o const?

Depende de la situación. Si deseas declarar una variable global, usa var. Si deseas declarar una variable local, usa let. Si deseas declarar una variable de solo lectura, usa const.

// Declaración de variables
var nombre = "Juan";
let paisDeResidencia = "España";
const edad = 30;
var programas = true;
const numeroIdentificacion = 123456789;
let bandasFavoritas = ["The Beatles", "Led Zeppelin", "Queen"];
 
// Creación de objeto
const persona = {
  nombre: nombre,
  paisDeResidencia: paisDeResidencia,
  edad: edad,
  programas: programas,
  numeroIdentificacion: numeroIdentificacion,
  bandasFavoritas: bandasFavoritas,
};
 
console.log(persona);

Buenas prácticas

1. Utiliza nombres descriptivos para tus variables. Por ejemplo, nombre es mejor que n.
2. Utiliza nombres que sean cortos y concisos.
3. Utiliza nombres que sean fáciles de escribir, leer, pronunciar, recordar y fáciles de buscar en el código.
4. Utiliza nombres en inglés en lo posible.
5. Las variables no deben contener espacios y no pueden contener caracteres especiales.
6. Las variables no deben contener palabras reservadas de JavaScript.
7. Las variables no deben contener nombres de funciones, métodos, clases, objetos, etc.
8. Las variables no deben iniciar con números, pero pueden contenerlos.
9. Los nombres de las variables deben ser en minúsculas, a menos que sean constantes.
10. Los tipos de escritura de las variables deben ser camelCase o snake_case.

Tipos de datos en JavaScript

En JavaScript, existen varios tipos de datos que se pueden utilizar para almacenar información en variables.

• string
• number
• boolean
• undefined
• null
• symbol
• bigint
• array
• object

Tipo de dato string

El tipo de datos string o cadena de caracteres se utiliza para representar texto.

var nombre = "Juan";
var apellido = "Pérez";
var nombreCompleto = nombre + " " + apellido;

También se pueden utilizar caracteres especiales en las cadenas de texto, como saltos de línea y tabulaciones, utilizando secuencias de escape.

var mensaje = "Este es un mensaje\nen dos líneas.";
var titulo = "Página principal\t\tMi sitio web";

Tipo de dato number

El tipo de datos number o numérico se utiliza para representar números enteros y decimales.

var numeroEntero = 42;
var numeroDecimal = 3.14;

Tipo de dato boolean

El tipo de datos boolean o booleano se utiliza para representar valores lógicos, es decir, verdadero o falso.

var esMayorDeEdad = true;
var tieneLicencia = false;

Tipo de dato undefined

El tipo de datos undefined se utiliza para representar un valor no definido.

var valorNoDefinido;

Tipo de dato null

El tipo de datos null se utiliza para representar un valor nulo o vacío.

var valorNulo = null;

Tipo de dato symbol

El tipo de datos symbol se utiliza para representar un valor único e inmutable.

var simbolo = Symbol("mi-simbolo");

Tipo de dato bigint

El tipo de datos bigint se utiliza para representar números enteros de gran tamaño.

var numeroEnteroGrande = 9007199254740991n;

Tipo de dato Array

El tipo de datos Array o arreglo se utiliza para representar una colección de datos ordenados.

var frutas = ["manzana", "naranja", "plátano"];
var numeros = [1, 2, 3, 4, 5];

Tipo de dato object

El tipo de datos object o objeto se utiliza para representar una colección de datos.

var persona = {
  nombre: "Juan",
  apellido: "Pérez",
  edad: 30,
  programas: true,
  numeroIdentificacion: 123456789,
  bandasFavoritas: ["The Beatles", "Led Zeppelin", "Queen"],
};

Buenas prácticas

Para saber cual es el tipo de dato de una variable, podemos utilizar el operador typeof.

var nombre = "Juan";
console.log(typeof nombre); // string
 
var edad = 30;
console.log(typeof edad); // number
 
var programas = true;
console.log(typeof programas); // boolean
 
var valorNoDefinido;
console.log(typeof valorNoDefinido); // undefined
 
var valorNulo = null;
console.log(typeof valorNulo); // object
 
var simbolo = Symbol("mi-simbolo");
console.log(typeof simbolo); // symbol
 
var numeroEnteroGrande = 9007199254740991n;
console.log(typeof numeroEnteroGrande); // bigint
 
var frutas = ["manzana", "naranja", "plátano"];
console.log(typeof frutas); // object
 
var persona = {
  nombre: "Juan",
  apellido: "Pérez",
  edad: 30,
  programas: true,
  numeroIdentificacion: 123456789,
  bandasFavoritas: ["The Beatles", "Led Zeppelin", "Queen"],
};
console.log(typeof persona); // object

Coerción de datos en JavaScript

La coerción de datos en JavaScript se refiere a la conversión automática que realiza el lenguaje de un tipo de dato a otro. A continuación, se presentan algunos ejemplos de coerción de datos en JavaScript.

Coerción implícita

La coerción implícita es cuando JavaScript convierte un tipo de dato automáticamente en otro. Por ejemplo, cuando se suman un número y una cadena de texto, JavaScript convierte automáticamente la cadena de texto en un número antes de realizar la suma.

var edad = 30;
var mensaje = "Tengo " + edad + " años."; // Coerción implícita de edad a cadena de texto
console.log(mensaje); // salida: "Tengo 30 años."

Coerción explícita

La coerción explícita es cuando se realiza una conversión de un tipo de dato a otro de forma explícita utilizando funciones o métodos específicos. Por ejemplo, se puede convertir una cadena de texto a un número utilizando la función Number().

var numeroComoCadena = "42";
var numeroComoNumero = Number(numeroComoCadena); // Coerción explícita de cadena de texto a número
console.log(typeof numeroComoCadena); // salida: "string"
console.log(typeof numeroComoNumero); // salida: "number"

Coerción de datos: string

En JavaScript, cualquier tipo de dato puede ser convertido a una cadena de texto utilizando el método toString(). Este método devuelve una cadena de texto que representa el valor original.

var numero = 42;
var cadenaDeTexto = numero.toString(); // Conversión a cadena de texto
console.log(typeof numero); // salida: "number"
console.log(typeof cadenaDeTexto); // salida: "string"

Coerción de datos: number

En JavaScript, cualquier tipo de dato puede ser convertido a un número utilizando las funciones Number() y parseInt(). La función Number() devuelve un número de punto flotante, mientras que la función parseInt() devuelve un número entero.

var cadenaDeTexto1 = "42";
var cadenaDeTexto2 = "3.14";
var numero1 = Number(cadenaDeTexto1); // Conversión a número de punto flotante
var numero2 = parseInt(cadenaDeTexto2); // Conversión a número entero
console.log(typeof cadenaDeTexto1); // salida: "string"
console.log(typeof cadenaDeTexto2); // salida: "string"
console.log(typeof numero1); // salida: "number"
console.log(typeof numero2); // salida: "number"

Coerción de datos: boolean

En JavaScript, cualquier tipo de dato puede ser convertido a un valor booleano. Los valores que se consideran false en JavaScript son false, 0, "", null, undefined y NaN. Cualquier otro valor se considera true.

var valor1 = 1;
var valor2 = "";
var valor3 = undefined;
var valor4 = null;
console.log(Boolean(valor1)); // salida: true
console.log(Boolean(valor2)); // salida: false
console.log(Boolean(valor3)); // salida: false
console.log(Boolean(valor4)); // salida: false

¡Y eso es todo por ahora! La coerción de datos en JavaScript es una herramienta muy útil para convertir valores de un tipo de dato a otro cuando sea necesario, ya sea de forma implícita o explícita. Es importante tener en cuenta que la coerción implícita puede llevar a resultados inesperados o errores en nuestro código si no se maneja adecuadamente. Por eso es recomendable ser conscientes de las conversiones de datos que están ocurriendo en nuestro código y utilizar la coerción explícita cuando sea necesario para evitar confusiones o errores. Con un buen conocimiento de la coerción de datos en JavaScript, podemos escribir código más claro y efectivo para nuestras aplicaciones.

Buenas prácticas

• Evitar el uso de operadores de igualdad débil (==) y desigualdad débil (!=) ya que pueden provocar resultados inesperados debido a la coerción automática de tipos de datos. En su lugar, se recomienda utilizar los operadores de igualdad estricta (===) y desigualdad estricta (!==) que comparan tanto el valor como el tipo de dato.
• Utilizar los métodos nativos de conversión de tipos de datos, como parseInt(), parseFloat() y Number(), en lugar de usar conversiones implícitas. Esto ayuda a evitar errores y asegura una conversión precisa.
• Ser explícitos al convertir valores, en lugar de confiar en la coerción implícita. Por ejemplo, usar parseInt("10", 10) en lugar de solo parseInt("10").
• Entender cómo funciona la coerción de tipos de datos en JavaScript. Por ejemplo, tener en cuenta que una cadena vacía ("") se convierte en 0 cuando se usa en una operación aritmética.
• Usar isNaN() para verificar si un valor es NaN (Not a Number) en lugar de compararlo directamente con NaN.
• Usar typeof para verificar el tipo de dato de un valor en lugar de compararlo directamente con un tipo de dato.

Operadores en JavaScript

Los operadores en JavaScript son símbolos que nos permiten realizar operaciones con uno o más valores. A continuación, se presentan algunos ejemplos de operadores en JavaScript.

Operadores aritméticos

Los operadores aritméticos en JavaScript nos permiten realizar operaciones matemáticas básicas como suma, resta, multiplicación y división.

var x = 10;
var y = 5;
 
var suma = x + y; // Suma
var resta = x - y; // Resta
var multiplicacion = x * y; // Multiplicación
var division = x / y; // División
 
console.log(suma); // salida: 15
console.log(resta); // salida: 5
console.log(multiplicacion); // salida: 50
console.log(division); // salida: 2

Operadores de asignación

Los operadores de asignación en JavaScript nos permiten asignar un valor a una variable.

var x = 10;
 
x += 5; // Equivalente a x = x + 5
console.log(x); // salida: 15
 
x -= 3; // Equivalente a x = x - 3
console.log(x); // salida: 12
 
x *= 2; // Equivalente a x = x * 2
console.log(x); // salida: 24
 
x /= 4; // Equivalente a x = x / 4
console.log(x); // salida: 6

Operadores de comparación

Los operadores de comparación en JavaScript nos permiten comparar dos valores y devolver un valor booleano (true o false) que indica si la comparación es verdadera o falsa.

var x = 10;
var y = 5;
 
console.log(x > y); // salida: true
console.log(x < y); // salida: false
console.log(x >= y); // salida: true
console.log(x <= y); // salida: false
console.log(x == y); // salida: false
console.log(x != y); // salida: true
console.log(5 === "5"); // salida: false

Operador de igualdad estricta

En JavaScript, el operador de igualdad estricta (===) se utiliza para comparar si dos valores son iguales en tipo y valor. A diferencia del operador de igualdad (==), el operador de igualdad estricta no realiza una conversión de tipos antes de la comparación.

console.log(5 === 5); // salida: true
console.log(5 === "5"); // salida: false
console.log(true === 1); // salida: false
console.log(null === undefined); // salida: false
console.log("hello" === "hello"); // salida: true
console.log({} === {}); // salida: false

• En el primer ejemplo, se comparan dos números iguales y de igual tipo, por lo que el resultado es true.
• En el segundo ejemplo, se comparan un número y una cadena de texto, que son de tipos diferentes, por lo que el resultado es false.
• En el tercer ejemplo, se comparan un booleano y un número, que son de tipos diferentes, por lo que el resultado es false.
• En el cuarto ejemplo, se comparan dos valores nulos, que son de igual tipo y valor, por lo que el resultado es true.
• En el quinto ejemplo, se comparan dos cadenas de texto iguales y de igual tipo, por lo que el resultado es true.
• En el último ejemplo, se comparan dos objetos distintos, por lo que el resultado es false.

Es importante tener en cuenta que el operador de igualdad estricta evalúa también el tipo de dato de los valores a comparar. Esto puede ser útil en ciertos casos para evitar errores de comparación por conversiones de tipos inesperadas.

Operadores lógicos

Los operadores lógicos en JavaScript nos permiten combinar expresiones booleanas y devolver un valor booleano (true o false) que indica si la combinación es verdadera o falsa.

var x = 10;
var y = 5;
 
console.log(x > 5 && y < 10); // salida: true
console.log(x > 5 || y > 10); // salida: true
console.log(!(x > y)); // salida: false

Operador ternario

El operador ternario en JavaScript nos permite realizar una evaluación condicional y asignar un valor a una variable según el resultado de la evaluación.

var edad = 20;
var esMayorDeEdad = edad >= 18 ? "Sí" : "No";
 
console.log(esMayorDeEdad); // salida: "Sí"

En este ejemplo, la variable esMayorDeEdad se asigna con el valor "Sí" si la edad es mayor o igual a 18, y con el valor "No" en caso contrario.

Buenas prácticas

• Evita utilizar el operador de igualdad estricta (===) para comparar valores nulos o indefinidos. En estos casos, es mejor utilizar el operador de igualdad (==).
• Evitar el uso de operadores de igualdad débil (==) y desigualdad débil (!=) ya que pueden provocar resultados inesperados debido a la coerción automática de tipos de datos. En su lugar, se recomienda utilizar los operadores de igualdad estricta (===) y desigualdad estricta (!==) que comparan tanto el valor como el tipo de dato.
• Utilizar operadores bit a bit solo cuando sea necesario, ya que pueden hacer que el código sea difícil de entender. En su lugar, usar los operadores lógicos (&&, ||) y los operadores de comparación (===, !==) cuando sea posible.
• Evitar el uso de operadores de incremento (++) y decremento (--), ya que pueden hacer que el código sea difícil de entender y llevar a errores sutiles. En su lugar, utilizar operaciones aritméticas simples.
• Ser conscientes de la precedencia y la asociatividad de los operadores. Si no estamos seguros de cómo se evaluará una expresión, utilizar paréntesis para asegurarnos de que se evalúe de la manera que queremos.
• Utilizar operadores lógicos cortocircuitados (&& y ||) en lugar de los operadores ternarios cuando sea posible. Por ejemplo, en lugar de escribir:

var resultado = (condicion) ? valor1 : valor2;

Podemos escribir:

var resultado = condicion && valor1 || valor2;

Esto hace que el código sea más conciso y legible.

Ejercicios fundamentos de programación

Esta sección contiene ejercicios para practicar los conceptos fundamentales de programación en JavaScript.

Variables, tipos de datos y operadores

Los ejercicios de esta sección se basan en la declaración de variables, tipos de datos y operadores.

Ejercicio 1

Crea una variable llamada carName y asígnale el valor “Volvo”.

var carName = "Volvo";

Ejercicio 2

Crea una variable llamada x y asígnale el valor 50.

var x = 50;

Ejercicio 3

Crea la suma de 5 + 10, utilizando dos variables: a y b

var a = 5;
var b = 10;
 
var suma = a + b;

Ejercicio 4

Crea una variable llamada z, asígnale x + y y muestra el resultado en un cuadro de alerta.

var y = 20;
var z = x + y;
 
alert(z);